使用 .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
那麼將數字強制轉化為印度格式就變的簡單:
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!