JS中的數字格式化和大位數縮寫

陟上晴明發表於2023-02-04
JS

一直以來都是自己寫了一個格式化函式來處理，會使用 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

相關文章