Intl.NumberFormat 設定數字格式

MDN Intl.NumberFormat

前端界面顯示中，經常需要把數字轉換成貨币（美元歐元）小數點，貨币保留兩位小數等等操作，通常的方法是字元串拼接。現在有一個新的 API 可以直接進行轉換，功能很強大！

The

Intl.NumberFormat

object is a constructor for objects that enable language sensitive number formatting.

這裡可以把普通的數字，轉換成不同的貨币和格式樣式字元串。

locale 是必傳參數（支援不同國家的數字分隔符格式）；option 是可選參數是一個對象，style，currency 可以設定貨币符号或者精确度計算；unit 是可選參數，可以增加機關（長度機關等）

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "￥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"

           

構造器方法

Intl.NumberFormat()

Creates a new

NumberFormat

object.

靜态方法

• Intl.NumberFormat.supportedLocalesOf()

  Returns an array containing those of the provided locales that are supported without having to fall back to the runtime’s default locale. 傳回一個數組，其中包含受支援的所提供語言環境的數組，而不必回退到運作時的預設語言環境。

執行個體方法

• Intl.NumberFormat.prototype.format()

  Getter function that formats a number according to the locale and formatting options of this

  NumberFormat

  object. 根據語言個選項格式，傳回數字對應的格式。

• Intl.NumberFormat.prototype.formatToParts()

  Returns an

  Array

  of objects representing the number string in parts that can be used for custom locale-aware formatting.

  傳回一個對象數組，該對象數組表示部分數字字元串，可用于自定義區域設定格式。

• Intl.NumberFormat.prototype.resolvedOptions()

  Returns a new object with properties reflecting the locale and collation options computed during initialization of the object. 傳回一個新對象，該對象的屬性反映在對象初始化期間計算出的語言環境和排序規則選項。

例子

基本使用

In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.

你需要傳入一個數字，然後按照預設的配置生成轉換後的字元串。

var number = 3500;

console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale
           

Using

locales

這個例子是本地化數字格式的一些變形。 為了擷取應用程式使用者界面中使用的語言格式，請確定使用locales參數指定該語言（可能還包括一些後備語言）。This example shows some of the variations in localized number formats. In order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the

locales

argument:

var number = 123456.789;

// German uses comma as decimal separator and period for thousands
console.log(new Intl.NumberFormat('de-DE').format(number));
// → 123.456,789

// Arabic in most Arabic speaking countries uses real Arabic digits
console.log(new Intl.NumberFormat('ar-EG').format(number));
// → ١٢٣٤٥٦٫٧٨٩

// India uses thousands/lakh/crore separators
console.log(new Intl.NumberFormat('en-IN').format(number));
// → 1,23,456.789

// the nu extension key requests a numbering system, e.g. Chinese decimal
console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number));
// → 一二三,四五六.七八九

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
console.log(new Intl.NumberFormat(['ban', 'id']).format(number));
// → 123.456,789
           

Using

options

我們可以使用 options 增加參數

The results can be customized using the

options

argument:

var number = 123456.789;

// request a currency format
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// → ￥123,457

// limit to three significant digits 限制為三個有效數字
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// → 1,23,000
           

Using

style

and

unit

console.log(new Intl.NumberFormat("pt-PT",  {
    style: 'unit',
    unit: "mile-per-hour"
}).format(50));
// → 50 mi/h

console.log((16).toLocaleString('en-GB', {
    style: "unit",
    unit: "liter",
    unitDisplay: "long"
}));
// → 16 litres
           

上面是主要的配置。實際中，我主要使用貨币和小數點，主要是 locale 和 format 的選擇。

如果是時間計算（不是純數字），可以使用 moment 庫，具體請參考 moment 的詳細 API。