Intl.NumberFormat

NO IMAGE

也許您已經知道 Intl.NumberFormat API 了,因為它已經在瀏覽器中得到了一段時間的支持。

Intl.NumberFormat

Intl.NumberFormat 最基本的形式是創建一個可複用的格式化實例,該實例支持按區域設置數字格式。與其他 Intl.*Format API 一樣,formatter 實例同時支持 formatformatToParts 兩個方法:

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

計量單位

Intl.NumberFormat 目前支持以下簡單的單位(simple units):

  • 角度:degree
  • 面積:acrehectare
  • 濃度: percent
  • 字節:bitbytekilobitkilobytemegabitmegabytegigabitgigabyteterabitterabytepetabyte
  • 時間:millisecondsecondminutehourdayweekmonthyear
  • 長度:millimetercentimetermeterkilometerinchfootyardmilemile-scandinavian
  • 重量:gramkilogramouncepoundstone
  • 溫度:celsiusfahrenheit
  • 體積:litermillilitergallonfluid-ounce

使用 styleunit 選項可將數字格式化為本地單位:

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'

Intl.NumberFormat

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

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

{
// 標準符號表示法
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'

Intl.NumberFormat

標誌顯示

在某些情況下,即使數字為正數,也可以明確顯示符號。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

更多信息

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


參考:BigInt MDN

譯者:Mark Wong

原文:v8.dev/featur…

相關文章

JavaScript優雅寫法及騷操作記錄

Vue實現剪貼板複製功能

Vue+Element二次封裝axios為插件使用

[譯]JavaScript中的頭等函數