Intl.NumberFormat

也許您已經知道 Intl.NumberFormat API 了，由於它已經在瀏覽器中獲得了一段時間的支持。

Intl.NumberFormat 最基本的形式是建立一個可複用的格式化實例，該實例支持按區域設置數字格式。與其餘 Intl.*Format API 同樣，formatter 實例同時支持 format 和 formatToParts 兩個方法：

const formatter = new Intl.NumberFormat('en');
formatter.format(987654.321);
// → '987,654.321'
formatter.formatToParts(987654.321);
// → [
// → { type: 'integer', value: '987' },
// → { type: 'group', value: ',' },
// → { type: 'integer', value: '654' },
// → { type: 'decimal', value: '.' },
// → { type: 'fraction', value: '321' }
// → ]
複製代碼

Note: 雖然 Intl.NumberFormat 的多數功能能夠經過 Number.prototype.toLocaleString 來實現，但Intl.NumberFormat 仍然是最好的選擇，由於它建立的可複用實例效率更高。

最近，Intl.NumberFormat API 新增了一些新功能。

支持 BigInt

除了 Number 以外，Intl.NumberFormat 如今還能夠格式化BigInt：

譯者注：BigInt 是一種內置對象，能夠表示大於 2^53 的整數。而在 Javascript 中，Number 基本類型能夠精確表示的最大整數是 2^53。BigInt 能夠表示任意大的整數。

const formatter = new Intl.NumberFormat('fr');
formatter.format(12345678901234567890n);
// → '12 345 678 901 234 567 890'
formatter.formatToParts(123456n);
// → [
// → { type: 'integer', value: '123' },
// → { type: 'group', value: ' ' },
// → { type: 'integer', value: '456' }
// → ]
複製代碼

計量單位

Intl.NumberFormat 目前支持如下簡單的單位（simple units）：

• 角度：degree
• 面積：acre，hectare
• 濃度： percent
• 字節：bit，byte，kilobit，kilobyte，megabit，megabyte，gigabit，gigabyte，terabit，terabyte，petabyte
• 時間：millisecond，second，minute，hour，day，week，month，year
• 長度：millimeter，centimeter，meter，kilometer，inch，foot，yard，mile，mile-scandinavian
• 重量：gram，kilogram，ounce，pound，stone
• 溫度：celsius，fahrenheit
• 體積：liter，milliliter，gallon，fluid-ounce

使用 style 和 unit 選項可將數字格式化爲本地單位：

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'kilobyte',
});
formatter.format(1.234);
// → '1.234 kB'
formatter.format(123.4);
// → '123.4 kB'
複製代碼

Note: 隨着時間的推移，可能會支持更多單位。這裏是最新的列表。

上述單位能夠組合成任意的分子/分母對，以表示複合單位，如「liters per acre」或「meters per second」：

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'meter-per-second',
});
formatter.format(299792458);
// → '299,792,458 m/s'
複製代碼

緊密計法，科學計數法和工程計數法

緊密計法是使用特定於語言環境的符號來表示大數字。它是科學計數法的一種更人性化的替代方案：

{
  // 標準符號表示法
  const formatter = new Intl.NumberFormat('en', {
    notation: 'standard', // 默認值
  });
  formatter.format(1234.56);
  // → '1,234.56'
  formatter.format(123456);
  // → '123,456'
  formatter.format(123456789);
  // → '123,456,789'
}

{
  // 緊密計法
  const formatter = new Intl.NumberFormat('en', {
    notation: 'compact',
  });
  formatter.format(1234.56);
  // → '1.2K'
  formatter.format(123456);
  // → '123K'
  formatter.format(123456789);
  // → '123M'
}
複製代碼

Note: 默認狀況下，緊密計法會舍入到最接近的整數，但始終會保持 2 位有效數字。您能夠設置 {minimum,maximum}FractionDigits 或 {minimum,maximum}SignificantDigits 覆蓋該行爲。

Intl.NumberFormat 也能夠將數字格式化爲科學計數法：

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'meter-per-second',
  notation: 'scientific',
});
formatter.format(299792458);
// → '2.998E8 m/s'
複製代碼

也支持工程計數法：

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'meter-per-second',
  notation: 'engineering',
});
formatter.format(299792458);
// → '299.792E6 m/s'
複製代碼

標誌顯示

在某些狀況下，即便數字爲正數，也能夠明確顯示符號。signDisplay 選項的啓用以下：

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'percent',
  signDisplay: 'always',
});
formatter.format(-12.34);
// → '-12.34%'
formatter.format(12.34);
// → '+12.34%'
formatter.format(0);
// → '+0%'
formatter.format(-0);
// → '-0%'
複製代碼

當數值爲 0 時不想顯示符號，能夠設置 signDisplay: 'exceptZero' ：

const formatter = new Intl.NumberFormat('en', {
  style: 'unit',
  unit: 'percent',
  signDisplay: 'exceptZero',
});
formatter.format(-12.34);
// → '-12.34%'
formatter.format(12.34);
// → '+12.34%'
formatter.format(0);
// → '0%'
// Note: -0 仍然會顯示符號
formatter.format(-0);
// → '-0%'
複製代碼

對於貨幣單位，currencySign 選項會啓用會計格式，該格式能夠將金額爲負數的狀況格式化成特定區域設置的格式; 好比，將金額包裝在括號中：

const formatter = new Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero',
  currencySign: 'accounting',
});
formatter.format(-12.34);
// → '($12.34)'
formatter.format(12.34);
// → '+$12.34'
formatter.format(0);
// → '$0.00'
formatter.format(-0);
// → '($0.00)'
複製代碼

更多信息

你能夠查看相關規範提案瞭解更多信息及查看更多示例，同時還包括如何檢測每一個 Intl.NumberFormat 功能的指導。

---

參考：BigInt MDN

譯者：Mark Wong

原文：v8.dev/featur...