淺談Intl.NumberFormat

前端榮耀發表於2023-04-06
ORM

很高興您對 Intl.NumberFormat 感興趣。Intl.NumberFormat 是一個內建於 JavaScript 的國際化 API，它提供了一種簡單的方法來格式化數字，以便在不同語言環境下進行顯示。在本篇部落格中，我們將詳細介紹 Intl.NumberFormat 的使用方法和使用場景，並配以示例程式碼作為使用說明。

什麼是 Intl.NumberFormat？

Intl.NumberFormat 是一個用於格式化數字的 JavaScript 國際化 API。它使開發人員可以根據使用者的語言環境和地區設定自定義數字格式。這意味著您可以使用該 API 來格式化數字，以便在不同的語言和地區中進行顯示。

如何使用 Intl.NumberFormat？

使用 Intl.NumberFormat 非常簡單。以下是一個基本的使用示例，用於格式化一個數字：

const number = 123456.789
const formatter = new Intl.NumberFormat()
console.log(formatter.format(number))

在上面的示例中，我們首先定義了一個數字變數number，然後建立了一個Intl.NumberFormat例項，並將其儲存在變數formatter中。最後，我們使用formatter.format()方法來格式化數字，並將結果列印到控制檯中。

輸出結果為：

123,456.789

在上面的示例中，我們沒有提供任何引數來建立Intl.NumberFormat例項。這意味著它將使用預設設定來格式化數字。但是，您可以使用以下引數來建立自定義格式：

  • locale：用於格式化數字的語言環境。預設值為當前使用者的語言環境。
  • style：數字格式的樣式。可以是decimal（十進位制）、currency（貨幣）或percent（百分比）。預設值為decimal。
  • currency：如果樣式為currency，則使用的貨幣程式碼。預設值為當前使用者的貨幣程式碼。
  • currencyDisplay：如果樣式為currency，則貨幣符號的顯示位置。可以是symbol（符號）、code（程式碼）或name（名稱）。預設值為symbol。
  • minimumIntegerDigits：數字的最小整數位數。預設值為 1。
  • minimumFractionDigits：數字的最小小數位數。預設值為 0。
  • maximumFractionDigits：數字的最大小數位數。預設值為 3。
  • minimumSignificantDigits：數字的最小有效數字位數。預設值為 1。
  • maximumSignificantDigits：數字的最大有效數字位數。預設值為 21。

以下是一個示例，展示如何使用這些引數來建立自定義數字格式：

const number = 123456.789
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})
console.log(formatter.format(number))

輸出結果為：

$123,456.79

在上面的示例中，我們使用了en-US作為語言環境，並將樣式設定為currency。我們還指定了貨幣程式碼為USD，最小小數位數為 2，最大小數位數為 2。這使得輸出結果為美元貨幣格式。

使用場景

Intl.NumberFormat 可用於任何需要格式化數字的場景：

Intl.NumberFormat 支援的型別單位指的是 Intl.NumberFormat 物件支援的數字格式化型別。以下是每種型別的中文解釋和程式碼示例：

1. 貨幣格式化

貨幣格式化是將數字格式化為特定貨幣的格式。使用 Intl.NumberFormat，您可以輕鬆地將數字格式化為任何貨幣，並在不同的語言環境中進行顯示。例如，以下程式碼將格式化數字為美元貨幣格式：

const number = 1234.56
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
})
console.log(formatter.format(number))

輸出結果為：

$1,234.56

在上面的示例中，我們使用了en-US作為語言環境，並將樣式設定為currency。我們還指定了貨幣程式碼為USD。這使得輸出結果為美元貨幣格式。

2. 小數格式化

小數格式化是將數字格式化為特定小數位數的格式。使用 Intl.NumberFormat，您可以輕鬆地將數字格式化為任何小數位數，並在不同的語言環境中進行顯示。例如，以下程式碼將格式化數字為只有兩個小數位：

const number = 1234.567
const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})
console.log(formatter.format(number))

輸出結果為：

1,234.57

在上面的示例中，我們使用了en-US作為語言環境，並將最小小數位數和最大小數位數都設定為 2。這使得輸出結果只有兩個小數位。

3. 整數格式化

整數格式化是將數字格式化為特定整數位數的格式。使用 Intl.NumberFormat，您可以輕鬆地將數字格式化為任何整數位數，並在不同的語言環境中進行顯示。例如，以下程式碼將格式化數字為只有四個整數位：

const number = 12345.6789
const formatter = new Intl.NumberFormat('en-US', {
  minimumIntegerDigits: 4,
})
console.log(formatter.format(number))

輸出結果為：

12,346

在上面的示例中，我們使用了en-US作為語言環境，並將最小整數位數設定為 4。這使得輸出結果只有四個整數位。

4. 百分比格式化

百分比格式化是將數字格式化為百分比格式的格式。使用 Intl.NumberFormat，您可以輕鬆地將數字格式化為任何百分比格式，並在不同的語言環境中進行顯示。例如，以下程式碼將格式化數字為百分比格式：

const number = 0.75
const formatter = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})
console.log(formatter.format(number))

輸出結果為：

75.00%

在上面的示例中，我們使用了en-US作為語言環境，並將樣式設定為percent。我們還指定了最小小數位數為 2，最大小數位數為 2。這使得輸出結果為百分比格式。

5. 計數格式化

計數格式化是將數字格式化為計數形式的格式。使用 Intl.NumberFormat，您可以輕鬆地將數字格式化為任何計數形式的格式，並在不同的語言環境中進行顯示。例如，以下程式碼將格式化數字為計數形式的格式：

const number = 12345
const formatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
})
console.log(formatter.format(number))

輸出結果為：

12K

在上面的示例中，我們使用了en-US作為語言環境，並將

6. 多語言支援

Intl.NumberFormat 還支援多語言。使用該 API，您可以根據使用者的語言環境設定數字格式。例如，以下程式碼將格式化數字為德語貨幣格式：

const number = 123456.789
const formatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
})
console.log(formatter.format(number))

輸出結果為：

123.456,79 €

在上面的示例中，我們使用了de-DE作為語言環境，並將樣式設定為currency。我們還指定了貨幣程式碼為EUR。這使得輸出結果為德語貨幣格式。

總結

Intl.NumberFormat 是一個非常有用的 JavaScript 國際化 API，用於格式化數字以在不同的語言和地區中進行顯示。使用該 API，您可以輕鬆地建立自定義數字格式，並將其應用於任何需要格式化數字的場景。希望本篇部落格能夠幫助您瞭解 Intl.NumberFormat 的使用方法和使用場景。

參考資料：

Intl.NumberFormat MDN

相關文章