使用 .toLocaleString() 轻松实现多国语言价格数字格式化

用代码对数字进行格式化，显然不是逢三位加逗号这么简单。比如印度在数字分位符号上的处理，就堪称业界奇葩：

印度的数字读法用“拉克”（十万）和“克若尔”（千万），数字标法用不对称的数位分离，即小数点左侧首先是三位分隔，然后继续向左都是两位分隔。如：三千万（3 克若尔）会写成 3,00,00,000。 —— 维基百科

简单的暴利处理无法满足多语言支持，此时使用 Number.prototype.toLocaleString() 进行数字格式化处理再好不过。

使用 `.toLocaleString()`

在 JavaScript 中，数字对象的 .toLocaleString() 方法如果不传参数，则采用宿主环境的系统语言进行分位处理。

var price = 1024;

price.toLocaleString(); // => "1,024"

使用 `locales` 参数

在 ECMA-402 标准的实现中，增加了.toLocaleString() 方法对 locales 的支持，语法为 numObj.toLocaleString([locales [, options]])，locales 参数接收 BCP 47 语言标签格式的字符串或数组。(HTML Language Code Reference, ISO Language Code Table)

那么将数字强制转化为印度格式就变的简单：

var price = 1669999;

price.toLocaleString('en-IN'); // => "16,69,999"

这样就可以轻松处理多语言的自动格式化了，只要根据 <html lang="en-IN"> 中的 lang属性动态读取就可以了。

var price = 1669999;

var lang = document.querySelector('html').getAttribute('lang');

price.toLocaleString(lang); // 中文页面下 => "1,669,999"

使用 `options` 参数

如果仅仅是做到多语言自动格式化数字，显然还不够细腻。通过 .toLocaleString() 方法的 options 参数，可以做到转化至相应语言的货币格式。

在我的项目之前的实现中，多国语言的货币符号是通过模板渲染时读取配置文件完成转换的。如果使用.toLocaleString() 展示或加工展示所有货币数字，则无需这一步骤：

var price = 2499;

price.toLocaleString('en-IN', {

  style: 'currency',

  currency: 'INR'

});

// => "₹ 2,499.00"

如果不想要显示末尾的小数「.00」，只要设置一下最小分位 minimumFractionDigits 即可（默认是 2）：

var price = 2499;

price.toLocaleString('en-IN', {

  style: 'currency',

  currency: 'INR',

  minimumFractionDigits: 0

});

// => "₹ 2,499"

这样一个完美的价格格式化功能就完成了。options 对象参数接收一系列样式属性，常用的有：

style：可选值为 decimal（小数）、currency（货币）或 percent（百分比）；
currency：设置为货币样式时使用的符号，支持列表在这里；
useGrouping：布尔值，是否显示数字分位。

关于 locales 参数和 options 参数支持的其它属性，例如上面使用的 minimumFractionDigits，可以查阅 MDN，我刚把最新的英文版翻译了一遍。

兼容性

所有现代浏览器都支持 locales 参数，因此在移动端使用是安全无痛的。桌面端的支持则是 IE11 及以上。

另外，如果想在后端直接对不同页面直接输出对应的货币符或者做分位转换等操作，只要用 node.js 做一个转换就行了。

想到这里，我已经忍不住要萌萌哒了，去优化我们的工作流啦。JavaScript，FTW！

阅读原文