使用 .toLocaleString() 轻松实现多国语言价格数字格式化
用代碼對(duì)數(shù)字進(jìn)行格式化，顯然不是逢三位加逗號(hào)這么簡單。比如印度在數(shù)字分位符號(hào)上的處理，就堪稱業(yè)界奇葩：
印度的數(shù)字讀法用“拉克”（十萬）和“克若爾”（千萬），數(shù)字標(biāo)法用不對(duì)稱的數(shù)位分離，即小數(shù)點(diǎn)左側(cè)首先是三位分隔，然后繼續(xù)向左都是兩位分隔。如：三千萬（3 克若爾）會(huì)寫成 3,00,00,000。 —— 維基百科
簡單的暴利處理無法滿足多語言支持，此時(shí)使用 Number.prototype.toLocaleString() 進(jìn)行數(shù)字格式化處理再好不過。
使用 .toLocaleString()
在 JavaScript 中，數(shù)字對(duì)象的 .toLocaleString() 方法如果不傳參數(shù)，則采用宿主環(huán)境的系統(tǒng)語言進(jìn)行分位處理。
var price = 1024; price.toLocaleString(); // => "1,024"使用 locales 參數(shù)
在 ECMA-402 標(biāo)準(zhǔn)的實(shí)現(xiàn)中，增加了.toLocaleString() 方法對(duì) locales 的支持，語法為 numObj.toLocaleString([locales [, options]])，locales 參數(shù)接收 BCP 47 語言標(biāo)簽格式的字符串或數(shù)組
那么將數(shù)字強(qiáng)制轉(zhuǎn)化為印度格式就變的簡單：
var price = 1669999; price.toLocaleString('en-IN'); // => "16,69,999"這樣就可以輕松處理多語言的自動(dòng)格式化了，只要根據(jù) <html lang="en-IN"> 中的 lang屬性動(dòng)態(tài)讀取就可以了。
var price = 1669999; var lang = document.querySelector('html').getAttribute('lang'); price.toLocaleString(lang); // 中文頁面下 => "1,669,999"使用 options 參數(shù)
如果僅僅是做到多語言自動(dòng)格式化數(shù)字，顯然還不夠細(xì)膩。通過 .toLocaleString() 方法的 options 參數(shù)，可以做到轉(zhuǎn)化至相應(yīng)語言的貨幣格式。
在我的項(xiàng)目之前的實(shí)現(xiàn)中，多國語言的貨幣符號(hào)是通過模板渲染時(shí)讀取配置文件完成轉(zhuǎn)換的。如果使用 .toLocaleString() 展示或加工展示所有貨幣數(shù)字，則無需這一步驟：
var price = 2499; price.toLocaleString('en-IN', {style: 'currency',currency: 'INR' }); // => "? 2,499.00"如果不想要顯示末尾的小數(shù)「.00」，只要設(shè)置一下最小分位 minimumFractionDigits 即可（默認(rèn)是 2）
var price = 2499; price.toLocaleString('en-IN', {style: 'currency',currency: 'INR',minimumFractionDigits: 0 }); // => "? 2,499"這樣一個(gè)完美的價(jià)格格式化功能就完成了。options 對(duì)象參數(shù)接收一系列樣式屬性，常用的有：
1.style：可選值為 decimal（小數(shù)）、currency（貨幣）或 percent（百分比）；
2.currency：設(shè)置為貨幣樣式時(shí)使用的符號(hào)，支持列表在這里；
3.useGrouping：布爾值，是否顯示數(shù)字分位。
關(guān)于 locales 參數(shù)和 options 參數(shù)支持的其它屬性，例如上面使用的 minimumFractionDigits，可以查閱 MDN
兼容性
所有現(xiàn)代瀏覽器都支持 locales 參數(shù)，因此在移動(dòng)端使用是安全無痛的。桌面端的支持則是 IE11 及以上。
另外，如果想在后端直接對(duì)不同頁面直接輸出對(duì)應(yīng)的貨幣符或者做分位轉(zhuǎn)換等操作，只要用 node.js 做一個(gè)轉(zhuǎn)換就行了。
參考： https://www.cnblogs.com/276815076/p/10028391.html
總結(jié)
以上是生活随笔為你收集整理的使用 .toLocaleString() 轻松实现多国语言价格数字格式化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： remote: GitLab: Auth
- 下一篇： iview中时间选择器可设置选择范围方法