如何使用JavaScript實現數字千分位分隔符

一、什麼是數字千分位分隔符

數字千分位分隔符，是在數字中插入千位分隔符（千位分隔符是指數字中每三個數字加一個逗號或其他符號分隔），以提高數字的可讀性和可識別性。例如，數字1000000可以寫成1,000,000。

二、為什麼需要數字千分位分隔符

數字千分位分隔符可以讓數字更易於識別，如果數字很大，例如1000000000，如果不加千分位符，很難一眼看出數字有多大。如果加上千分位符，可以將數字分成幾組，就像1000,000,000這樣，更容易讀取和理解。

三、如何使用JavaScript實現數字千分位分隔符

在實現數字千分位分隔符之前，先了解一個JavaScript內置對象，即Number對象的toLocaleString()方法。通過該方法，可以將一個數字轉換為一個表示該數字的字符串，並設置適當的本地化選項（例如千分位分隔符），該方法返回一個帶區域設置（由本地化選項決定）的字符串。

示例代碼

let num = 1000000;
let formattedNum = num.toLocaleString('en-US');
console.log(formattedNum); // 輸出 "1,000,000"

繼續發揮toLocaleString()方法的威力，我們可以實現一個簡單的函數convertToThousands(num)，接收一個數字作為參數，返回一個帶千分位分隔符的字符串。

示例代碼

function convertToThousands(num) {
  return num.toLocaleString('en-US');
}

console.log(convertToThousands(1000000)); // 輸出 "1,000,000"
console.log(convertToThousands(12345.6789)); // 輸出 "12,345.679"

四、如何自定義千分位分隔符

默認情況下（如上例所示），toLocaleString()方法使用逗號作為千分位分隔符。但是，可以使用Intl.NumberFormat()對象來自定義千分位分隔符。此方法接收2個參數，第一個參數是語言標記，第二個參數是選項對象，其中minimumFractionDigits用於指定小數部分保留的最小位數，maximumFractionDigits用於指定小數部分保留的最大位數。currency屬性用于格式化貨幣，style屬性用於定義格式化的類型。

示例代碼

let num = 1000000;
let options = {
  minimumFractionDigits: 2,
  maximumFractionDigits: 4,
  useGrouping: true, // 使用分隔符
  groupSeparator: ".", // 自定義分隔符
  currency: "USD",
  style: "currency"
}

let formattedNum = new Intl.NumberFormat('en-US', options).format(num);
console.log(formattedNum); // 輸出 "$1.000.000,00"

上述代碼將數字1000000格式化為貨幣類型，使用”.”作為分隔符，輸出結果為”$1.000.000,00″。

五、如何兼容舊版瀏覽器

對於不支持toLocaleString()和Intl.NumberFormat()的舊版瀏覽器，可以使用自定義的函數實現千分位格式化的功能。下面是一個簡單的實現方法：

示例代碼

function convertToThousands(num) {
  let numStr = num.toString();
  let result = "";
  let count = 0;
  for (let i=numStr.length-1; i>=0; i--) {
    if (count == 3) {
      result = "," + result;
      count = 0;
    }
    result = numStr.charAt(i) + result;
    count++;
  }
  return result;
}

console.log(convertToThousands(1000000)); // 輸出 "1,000,000"
console.log(convertToThousands(12345.6789)); // 輸出 "12345.6789"

該函數將數字轉換為字符串，從字符串的末尾開始遍歷，每三個數字之後插入一個逗號。該方案可能不如使用toLocaleString()和Intl.NumberFormat()方法可定製性高，但可以兼容舊版瀏覽器。