Intl.NumberFormat数字格式化应用

这篇文章发布于

由 DeathGhost 编辑， 归类于 javascript » 当前评论 0 条。

Web前端开发过程中常会对后端传递过来的数值类型的对象进行格式化处理，以便用户更好的阅读。例如：数据统计里的数值、货币、百分比、角度、字节、面积、质量、温度、长度、容量及一些符合单位等数据类型进行处理转换。所以下面看看关于Intl.NumberFormat对象对这些数值如何处理。

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

关于Intl对象前面有文章提到过，这里不再赘述。今天看看Intl中关于Intl.NumberFormat的应用。

Intl.NumberFormat数字格式化应用
Intl.NumberFormat数字格式化应用

常见应用背景

打开你手机相关应用软件（支付宝、微信、银行...），含金额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);
// 输出：八,八四八.八六

类型单位

长度表示

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

世界第一高峰： 珠穆朗玛峰 (高度:8844米)
世界第一高峰： 珠穆朗玛峰 (高度: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
一颗苹果重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
//...

结尾

系列相关文章“Intl.ListFormat对象 根据语言环境进行列表格式化”与“Intl.RelativeTimeFormat相对时间格式化”。

JavaScript Intl.NumberFormat 数字 格式化 百分比 货币 角度 面积 质量 字节

上一篇：

下一篇：