給數字添加千位分隔符

數值展示小要求：給頁面中統計總數的數值添加一個千位分隔符。

雖然添加前和添加後都是一串數字，不過對於一個數量級較大（上億級別）的數字，總不可能在讀之前還從個位數開始數數（個十百千….），等你數到最後，領導已經走人了……有千位分隔符就很快讓人知道最高位的什麼級別（千、百萬，十億…）。

感受一下添加前後區別，視覺效果都感覺好很多。

添加前：123456789

添加後：123,456,789

看到這個需求首先想到遍歷數字加逗號,，也就是就是一個一個數，從個位開始，每隔3個數字就加個逗號（,）。

遍歷每個數字方案

當然我們需要把小數部分取出來，只對整數部分處理，因爲小數是沒有千分符。

function readableNumber(value) {
  const valueStr = value.toString();
  const dotIdex = valueStr.indexOf('.');
  let intValue = valueStr;
  let floatValue = '';
  // 1.把小數部分取出來
  if (dotIdex !== -1) {
    intValue = valueStr.substr(0, dotIdex);
    floatValue = valueStr.substr(dotIdex + 1);
  }
  // 2.從個位開始每3位添加一個,
  let newIntValue = '';
  for (let index = 0; index < intValue.length; index++) {
    const item = intValue[intValue.length - index - 1];
    if (index !== 0 && index % 3 === 0) {
      newIntValue = item + ',' + newIntValue;
    } else {
      newIntValue = item + newIntValue;
    }
  }
  // 3.把小數部分添加回去
  return floatValue ? newIntValue + '.' + floatValue : newIntValue;
}

看起來雖然很麻煩，但是很實用，也是很多人一般想到的方式，第2步的添加”,“也可以用其他的處理方式，不過大同小異，都是遍歷方式。

看起來很多代碼啊，有沒更簡單更高級用法？在很多情況下，使用正則表達式可以把問題簡單化。

正則表達式方案

需要添加逗號（,），我們需要找到添加的位置，因此需要使用正則的捕獲相關的語法，而添加,的位置有一定規則，不是所有的位置都加，,位置必須是從最右的個位開始，每隔三位開始加，因此我們需要使用正則的斷言相關語法，斷言捕獲的位置必須滿足這個規則。

瞭解了捕獲和斷言這兩個知識點後，大概能寫出以下的邏輯：

function readableNumber(value) {
  return value.toString().replace(/(\d)(?=(\d{3})+(\.\d+)?$)/g, '$1,');
}

如果不需要考慮小數部分，正則可以寫成/(\d)(?=(\d{3})+$)/g。是不是發現使用正則是真高效，少些好多代碼。

雖然知道正則可以解決問題，但是不是一般人能到正則表達式的規則，簡單還好，複雜一點的是完全沒辦法。大多數時候我們也做到讀懂一個正則就不錯了。那千分位還有其他方案嗎？我不想寫那麼多代碼。其實官方JavaScript標準也提供一個API來實現。

JavaScript標準API

JavaScript標準中定義的內置對象Number的原型上有個方法toLocaleString()，這個API也可實現添加千位分隔符，而且還很簡單。

Number.prototype.toLocaleString([locales [, options]])

這個API方法上有兩個可選的參數locales和options，可定製輸出各種對數字的格式化實現。

這兩個參數相關說明可以參考MDN。

因此我的千位分隔符的處理函數又有第三種寫法：

function readableNumber(value) {
  return Number(value).toLocaleString();
}