在 JavaScript 中格式化數字

來自不同國家和地區的人們採用不同的方式來格式化數字。在某些情況下，我們可能希望根據訪問者訪問我們網站的世界哪個部分來格式化我們網站上的數字。

如果你嘗試根據使用者的位置手動執行此操作，則可能會變得具有挑戰性。但是不用擔心，你不必手動執行此操作，因為在 JavaScript 中有一種更好的方法來格式化數字，那就是在 toLocalString() 方法的幫助下。此方法返回一個字串，該字串具有特定於語言的數字表示形式。

使用 JavaScript 中的 toLocaleString() 方法格式化數字

它需要兩個引數，第一個是 locales，第二個是 options。這兩個引數都是可選的，這意味著它不是強制性的。你也可以直接執行該方法而無需傳遞這些引數。如果你想格式化數字，在這種情況下，我們這樣做，那麼我們需要傳遞這些引數。

讓我們首先了解每個引數的含義，然後我們將看到如何在我們的程式碼中使用它們。

1. locales 引數

locales 是 toLocalString() 方法接受的第一個引數。它表示一串 BCP 47 語言標籤或一組此類字串。BCP 47 語言標籤是識別人類語言的程式碼。

例如，標籤 ar-SA 表示它用於由 ar 表示的阿拉伯語，在沙烏地阿拉伯 SA 地區使用。因此，如果你將此字串作為第一個引數傳遞，它將格式化數字，使其以阿拉伯語書寫。

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

輸出：

١٢٬٣٤٥

在這裡，我們建立了一個名為 eArabic 的箭頭函式，它接受一個數字作為引數。現在，我們將數字 12345 傳遞給這個箭頭函式。此函式旨在藉助 toLocalString() 方法將數字 12345 轉換為其阿拉伯語等效格式 ar-SA。

你可以直接複製並貼上上面的整個程式碼，然後在瀏覽器的控制檯視窗中執行它以檢視輸出。

要了解有關所有 BCP 47 語言標籤的更多資訊，你可以檢視此資源。

你還可以將 undefined 作為語言環境傳遞。它將採用訪問者瀏覽器中設定的預設語言。因此，如果有人將瀏覽器的語言更改為德語，則會以德語格式顯示數字。

2. options 引數

options 是一個物件，它是 toLocalString() 方法接受的第二個引數。由於它是一個物件，因此該引數可以採用各種屬性，例如 currency、currencySign、style、unitDisplay 等等。

讓我們以上面採用的相同示例為例，讓我們嘗試修改它以理解 options 引數。以前，我們只取數字 12345，然後將其格式化為阿拉伯語。現在讓我們也給數字一個貨幣格式，通過給它一個帶有貨幣符號的 currency 樣式，並在 options 的幫助下在該數字的末尾新增一些小數位。

let eArabic = (number => {
  return number.toLocaleString(
      'ar-SA', {style: 'currency', currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

輸出：

١٢٬٣٤٥٫٠٠٠ ر.س

在本例中，對於 toLocaleString() 方法，我們現在還新增了 options 引數，它是一個物件。目前，它需要 3 個屬性，style 屬性將以貨幣格式格式化數字，currency 屬性將告訴它代表哪種貨幣，在這種情況下，沙特里亞爾 SAR 和 minimumFractionDigits 屬性表示有多少要在數字末尾顯示的小數位數。

在這裡，如果你將 style 屬性設定為貨幣值，你還必須為屬性 currency 設定一些值。否則，你將收到型別錯誤：Currency code is required with currency style.。

在上述程式的輸出中，我們首先有貨幣名稱沙特里亞爾 ر.س.。如果它是美元，那麼它將是 $ 符號。然後我們有阿拉伯語 ١٢٬٣٤٥ 的數字本身。如果是美元，那麼它將是 12,345。最後，我們在點之後的 3 個小數位在阿拉伯語中表示為 ٫٠٠٠，美元表示為 .000。

// USD format
$12, 345.000

在這裡，我們還為你提供美國貨幣格式的輸出，以便將其與沙烏地阿拉伯貨幣格式的輸出輕鬆關聯，因為人們可能難以理解阿拉伯語言。

你可以在程式碼中使用任何這些引數和物件屬性，具體取決於你希望如何格式化你的數字。你還可以訪問本文中提供的各種連結，以瞭解有關在 JavaScript 中格式化數字的 toLocalString() 的更多資訊。