numberformat的作用，numberformat数字格式化应用
Web前端开发过程中常会对后端传递过来的数值类型的对象进行格式化处理，以便用户更好的阅读。例如：数据统计里的数值、货币、百分比、角度、字节、面积、质量、温度、长度、容量及一些符合单位等数据类型进行处理转换。所以下面看看关于Intl.NumberFormat对象对这些数值如何处理。
Intl.NumberFormat可以根据不同语言环境对数值进行不同的格式化处理。当然Number.prototype.toLocaleString也可以对数字进行一定格式的处理，但Intl.NumberFormat是更好的选择，因为它使创建这往往是一个可重复使用的格式实例更有效。
关于Intl对象前面有文章提到过，这里不再赘述。今天看看Intl中关于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);
// 输出：八,八四八.八六类型单位
角度: 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米。
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/wunit 由 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: '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亿 本文地址：百科问答频道 https://www.neebe.cn/wenda/929609.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
