关于前端:JS中的数字格式化和大位数缩写

2次阅读

共计 1797 个字符，预计需要花费 5 分钟才能阅读完成。

始终以来都是本人写了一个格式化函数来解决，会应用 replace 配合正则对数字进行千位宰割来展现，并且搭配 Vue.filter 来实现疾速格式化。
然而因为我的项目须要 i18n，所以对于大位数解决就会比拟麻烦了，因为在境内就须要应用 万位宰割 ，大位数应用 万、亿、万亿 来缩，而在英语系国家就会应用 千分分隔，比如说: K、M、B 来缩写数额。

刚巧最近开始了一个须要国际化的我的项目，在一开始编写数字格式化过滤器的时候偶然发现了 Intl.NumberFormat().format() 这个 API，原来当初 原生 JS 就反对了对数字的格式化，并且不光能够千位分隔，还能够将大位数缩写。

简略的看一下这个 API：

Intl.NumberFormat 是对语言敏感的格式化数字类的结构器类。
语法：
new Intl.NumberFormat([locales[, options]])

是不是很简略，并且能够从参数中看到，这个 API 是反对设置本地化的，那就疾速来过一遍示例：

// 间接格式化
new Intl.NumberFormat().format(123456789)
//’123,456,789

应用 locales 本地化数字：

// 英语环境下的数字格式化
new Intl.NumberFormat('en').format(123456.789);
// '123,456.789'
// 中文环境下的数字格式化
new Intl.NumberFormat('zh').format(123456.789);
// '123,456.789'
// 德语环境应用逗号 (,) 作为小数点，应用句号 (.) 作为千位分隔符
new Intl.NumberFormat('de-DE').format(123456.789)
// '123.456,789'
// 阿拉伯语国家应用阿拉伯语数字
new Intl.NumberFormat('ar-EG').format(123456.789);
// '١٢٣٬٤٥٦٫٧٨٩'

配置紧凑型({notation:"compact"}) 能够将大位数缩写:

new Intl.NumberFormat('en', {notation:"compact"}).format(123456789)
// '123M'
new Intl.NumberFormat('en', {notation:"compact", compactDisplay: "long"}).format(123456789)
// '123 million'
new Intl.NumberFormat('zh', {notation:"compact"}).format(123456789)
// '1.2 亿'
new Intl.NumberFormat('zh', {notation:"compact", compactDisplay: "long"}).format(123456789)
// '1.2 亿'

new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec', {notation: "compact"}).format(123456789)
// 一. 二亿
new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec', {notation: "compact"}).format(1234567890)
// '一二亿'

能够看到应用 中文十进制数字，还是略微有点问题的，不过间接应用阿拉伯数字展现也不是不行对吧。

其余扩大用法查看 MDN 的文档就行，外面有具体的示例，我就不一一举例了。

兼容性问题是有很多人关注的，作为一个在 2012 年被提出的标准（ECMA-402 1.0），从 IE 11 开始被反对（不持支大位数缩写），其它的古代浏览器都是反对的，当然处在试验阶段的属性实现水平不统一，不过 format 和 locales 以及 notation 都是反对的，所以失常应用曾经足够了。

Intl.NumberFormat – JavaScript | MDN
Intl.NumberFormat.prototype.format() – JavaScript | MDN
Intl.NumberFormat.prototype.format – ECMAScript Internationalization API Specification – ECMA-402 Edition 1.0

正文完