Vue金额、日期格式化插件@formatjs/intl使用
vue项目中我们可以使用第三方比较牛的日期、金额数字格式化的插件：@formatjs/intl
这个插件的 官方 地址是：
https://formatjs.io/docs/intl/
更方便的是：此插件有Flutter 版本，在Flutter开发中也可以参考使用。
具体的安装步骤：
# npm 的安装步骤 npm i @formatjs/intl - -s ave # yarn 的安装步骤如下 yarn add @formatjs/intl # 上面步骤都会保存到package. JSON 中
简单 的使用步骤方式：
# 在script 中定义 工具的实例
# 以格式化金额的方式 为例 子
const intl = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'RMB' })
# 更多的方式可以参考官方的链接进行 了解 。
VAR value = 1000;
intl.format(value)
# 格式化出来的结果数据样式为： RMB 1,000.00
Intl.NumberFormat用于数字计算
Intl.NumberFormat是 国际 化的数字处理 方案 ，它可以用来显示不同国家对数字对处理偏好，但是一般情况下，我们还是处理中文数字比较多，但是我发现这个Intl.NumberFormat也挺好用的。
这个插件的官方地址是： https://formatjs.io/docs/intl/
数字分组
new Intl.NumberFormat('zh-CN',{useGrouping:true}).format(12345678);
"12,345,678"
new Intl.NumberFormat('zh-CN',{useGrouping:false}).format(12345678)
"12345678"
位数控制
new Intl.NumberFormat('zh-CN',{minimumIntegerDig IT s:2}).format(12345678);
"12"
minimumIntegerDigits 表示整数部分最小要几位置，默认1，范围[1,21] minimumFractionDigits 表示小数部分最小要几位，默认0，范围[0,20] maximumFractionDigits 表示小数部分最多几位，范围[0,20]。纯数字默认3，货币，百分比默认2。 minimumSignificantDigits 表示整体最小的位数，范围[1,21]，默认1 maximumSignificantDigits 表示整体最大的位数，范围[1,21]:
整体位数的控制权大于局部位数的控制权。
长度表示
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: 'meter',
});
const res = formatter.format(8848.86);
// 则输出：8,848.86米
// 若语言设置为'en'，则输出：8,848.86m
当然在高度或长度方面还存在别的单位，如：毫米、厘米、千米 等等 （millimeter，centimeter，meter，kilometer，inch，foot，yard，mile，mile-scandinavian）。
字节单位表示
kB、MB、Gb、Tb这几个单位在日常 生活 中也是常见的。
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: 'megabyte',
});
const res = formatter.format(1024);
// 则输出：1,024 MB
// 其他
// .. .
// 若unit设置"gigabit",则：1,024 Gb
// 若unit设置"terabit",则：1,024 Tb
// ...
复合单位表示
单位连接组合，如：‘40 小时/周’ （每周工作40小时）。
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: 'hour- PE r-week',
});
const res = formatter.format(40);
// 中文输出：40小时/周
// 英文输出：40 hr /w
unit由hour与week组合而成的单位，同样还有km/h（千米/小时: km/h）,就可以设置unit为：‘kilometer-per-hour’。还有常见的当前 网速 ，每秒多少兆，设置 &lsquo ;m egabyte-per-second’(5MB/秒);
百分比表示
常见统计类数据将会以百分比表示；如成功率占据95%，则可设置unit为percent即可。
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: 'percent',
// signDis play : 'always',
// signDisplay: 'exceptZero',
});
const res = formatter.format(95);
// 则输出：95%
// 设置 signDisplay: 'always'，则输出：+95% 或 -95%
在某些情况下（例如显示增量），即使数字为 正数 ，也有助于显式显示符号，如：+95%或-95%。可设置signDisplay: 'always’即可。排除输出+0%或-0%时设置signDisplay: 'exceptZero’即可。
货币表示
例如输出 人民币 5000000（500万）。
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'currency',
// 输出人民币
currency: 'CNY',
// 输出 美元 ，语言设置为'en'
// currency: 'USD',
// currencySign选项启用记帐格式
currencySign: 'accounting',
});
const res = formatter.format(5000000);
//输出结果：¥5,000,000.00
// 其他
// 人民币：输出结果：¥5,000,000.00
// 美元：输出结果：$5,000,000.00
同样以英文输出美元，设置其语言项与货币类型即可。如人民币CNY，美元USD，欧元EUR等等。
质量 表示
例如：输出500千克；千克设置’ki LOG r am ’即可。
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: 'kilogram',
});
const res = formatter.format(500);
// 输出：500kg
更多单位如：gram,kilogram,ounce,pound,stone。
温度 表示
例如：今天气温在28度。
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: 'celsius',
});
const res = formatter.format(28);
// 输出：28°C
更多单位选择celsius,fahrenh ei t。
容积表示
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: 'milliliter',
});
const res = formatter.format(28);
// 中文输出：28毫升
// 英文输出：28 ML
更多单位选择liter（升），milliliter（毫升），gallon（加仑），fluid-ounce（液盎司）。
角度表示
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'unit',
unit: ' deg ree',
});
const res = formatter.format(90);
// 输出：90°
大数字表示
如：中国大陆有14多亿人，那该如何表示，1400000000这样显示看起来有点费劲，在中文里，我们可以表示14亿。
const formatter = new Intl.NumberFormat('zh-CN', {
notation: 'compact',
});
const res = formatter.format(1400000000);
// 输出：14亿
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : vue js格式化数字为金额格式代码 vue中格式化时间过滤器代码实例 vue金额格式化保留两位小数的实现
总结
以上是 为你收集整理的 Vue中金额、日期格式化插件@formatjs/intl的使用及说明 全部内容，希望文章能够帮你解决 Vue中金额、日期格式化插件@formatjs/intl的使用及说明 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue中金额、日期格式化插件@formatjs/intl的使用及说明的详细内容...