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

# 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

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"

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'meter',
});
const res = formatter.format(8848.86);
// 则输出：8,848.86米
// 若语言设置为'en'，则输出：8,848.86m

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
// ...

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'hour-per-week',
});
const res = formatter.format(40);
// 中文输出：40小时/周
// 英文输出：40 hr/w

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%

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

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'kilogram',
});
const res = formatter.format(500);
// 输出：500kg

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'celsius',
});
const res = formatter.format(28);
// 输出：28°C

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'milliliter',
});
const res = formatter.format(28);
// 中文输出：28毫升
// 英文输出：28 mL

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'degree',
});
const res = formatter.format(90);
// 输出：90°

const formatter = new Intl.NumberFormat('zh-CN', {
  notation: 'compact',
});
const res = formatter.format(1400000000);
// 输出：14亿