Vue中金额、日期格式化插件@formatjs/intl的使用及说明

目录

• Vue金额、日期格式化插件@formatjs/intl使用
• Intl.NumberFormat用于数字计算
• 数字分组
• 位数控制
• 长度表示
• 字节单位表示
• 复合单位表示
• 百分比表示
• 货币表示
• 质量表示
• 温度表示
• 容积表示
• 角度表示
• 大数字表示
• 总结

Vue金额、日期格式化插件@formatjs/intl使用

vue项目中我们可以使用第三方比较牛的日期、金额数字格式化的插件：@formatjs/intl

这个插件的官方地址是：

https://formatjs.io/docs/intl/

更方便的是：此插件有Flutter 版本，在Flutter开发中也可以参考使用。

具体的安装步骤：

# npm 的安装步骤npm i @formatjs/intl --save # 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',{
minimumIntegerDigITs: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-PEr-week',}
    );
    const res = formatter.format(40);
    // 中文输出：40小时/周// 英文输出：40 hr/w

unit由hour与week组合而成的单位，同样还有km/h（千米/小时: km/h）,就可以设置unit为：‘kilometer-per-hour’。还有常见的当前网速，每秒多少兆，设置 ‘megabyte-per-second’(5MB/秒);

百分比表示

常见统计类数据将会以百分比表示；如成功率占据95%，则可设置unit为percent即可。

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',  unit: 'percent',  // signDisplay: '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千克；千克设置’kiLOGram’即可。

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,fahrenheit。

容积表示

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: 'degree',}
    );
    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金额格式化保留两位小数的实现

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！