js格式化金额_Intl.NumberFormat用法

Intl.NumberFormat可以根据不同语言环境对数值进行不同的格式化处理。当然Number.prototype.toLocaleString也可以对数字进行一定格式的处理，但Intl.NumberFormat是更好的选择，因为它使创建这往往是一个可重复使用的格式实例更有效。比如：输入一串数字，然后对其进行金额格式化：

用逗号分隔（三位一逗号）
保留 2 位小数点，数不足补 0
四舍五入
要加金额符号 $

代码实现：

var number = 123456.789;
var result = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'USD' }).format(number);
console.log(result);  // $123,456.79

Intl.NumberFormat 是对是启用语言敏感数字格式的对象的构造函数。
locales：

（可选）缩写语言代码 (BCP 47 language tag，例如：cmn-Hans-CN) 的字符串或者这些字符串组成的数组。
style：

指定数字的格式样式。

值	含义
decimal	纯数字格式（默认值）
currency	货币格式
percen	百分比格式

currency：

在货币格式化中使用的货币符号。可能的值是 ISO 的货币代码 (the ISO 4217 currency codes) 。没有默认值，如果样式是 “currency”，必须提供货币属性。

值	含义
USD	美元
EUR	欧元
CNY	人民币

useGrouping：

是否使用分组分隔符。如千位分隔符或千/万/亿分隔符，可能的值是 true 和 false ，默认值是 true。

常见应用背景

打开你手机相关应用软件（支付宝、微信、银行...），含金额1000以上方可看到这个金额以,分割，即三位分节法；下面看看在JavaScript中如何将其输出。

const formatter = new Intl.NumberFormat();
formatter.format(1000)
// 则会输出："1,000"

formatter.format(1000.5934)
// 输出："1,000.593"
formatter.format(1000.5956)
// 输出："1,000.596"

同时也可以输出其组成元素。

formatter.formatToParts(1000)
// 则输出：
// [
//  {type: "integer", value: "1"},
//  {type: "group", value: ","},
//  {type: "integer", value: "000"}
// ]

另外也可以将其输出为中文十进制数字，如：

const formatter = new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec');
const res = formatter.format(8848.86);
// 输出：八,八四八.八六

类型单位

角度: degree
面积: acre, hectare
百分比: percent
字节: bit, byte, kilobit, kilobyte, megabit, megabyte, gigabit, gigabyte, terabit, terabyte, petabyte
时间类长度: millisecond, second, minute, hour, day, week, month, year
长度或高度或深度: millimeter, centimeter, meter, kilometer, inch, foot, yard, mile, mile-scandinavian
质量:gram, kilogram, ounce, pound, stone
温度: celsius, fahrenheit
容积: liter, milliliter, gallon, fluid-ounce

长度表示

如我们所知的世界最高峰 - 珠穆朗玛峰（其最新高度8848.86米）。若动态返回数据为8848.86，那么前端人员需要将其输出为8,848.86米。

世界第一高峰：珠穆朗玛峰 (高度:8848.86米)

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

其他单位输出可以设置：bit，byte，kilobit，kilobyte，megabit，megabyte，gigabit，gigabyte，terabit，terabyte，petabyte。

复合单位表示

单位连接组合，如：'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'即可。

一颗苹果重0.25kg

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

更多单位如： 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亿

formatter.format(1400000);
// 输出：140万
formatter.format(140000);
// 输出：14万
formatter.format(14000);
// 输出：1.4万
formatter.format(1400);
// 输出：1400
//...

链接: https://www.fly63.com/article/detial/10752