JavaScript-數字(整數、浮點數)千分位格式化

在一些業務場景，例如金額、次數等數字須要進行千分位格式化

• 原生方法(整數千分位格式化）
  

  /** * 將整數格式化成每 3 位添加一個逗號 * @param {Number} num 待格式化的數字 * @returns {String} 返回格式化後的數字 */
    Vue.prototype.$wFormatInt = num => {
      let numPrefix = ''
      let numArr = ''
      let numDist = ''
  
      // 處理負數狀況
      if (num < 0) {
        numPrefix = '-'
        numArr = String(num).slice(1).split('').reverse()
      } else {
        numArr = String(num).split('').reverse()
      }
  
      for (let i = 0; i < numArr.length; i++) {
        numDist += numArr[i]
        if ((i + 1) % 3 === 0 && (i + 1) < numArr.length) {
          numDist += ','
        }
      }
  
      return numPrefix + numDist.split('').reverse().join('')
    }複製代碼

• 原生方法（浮點數）
  

  /**
     * 將浮點數格式化成每 3 位添加一個逗號
     * @param {Number} money 待格式化的金額
     * @returns {String} 返回格式化後的數字
     */
    Vue.prototype.$wFormatDeci = num => {
      let numDeci = String(num).slice(-3)
      let numInt = String(num).slice(0, -3)
      let numDist = Vue.prototype.$wFormatInt(numInt)
      return numDist + numDeci
    }複製代碼

• 正則表達式
  

  /**   * 將數字格式化成每 3 位添加一個逗號   * @param {Number} money 待格式化的金額   * @returns {String} 返回格式化後的數字   */
   Vue.prototype.$wFormatBoth = num => return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")複製代碼

• toLocaleString方法（代碼量最少的一種方法）
  

  /**  * 將數字格式化成每 3 位添加一個逗號  * @param {Number} num 待格式化的數字  * @returns {String} 返回格式化後的數字  */
  Vue.prototype.$wFormatInt = num => num.toLocaleString('en-US')複製代碼

 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

MDN文檔上對這個方法的解析是：toLocaleString(locale, options) 方法返回這個數字在特定語言環境下的表示字符串。

此方法第一個參數爲語言格式，不填時返回使用默認的語言環境和默認選項格式化的字符串

var number = 3500;

console.log(number.toLocaleString()); // Displays "3,500" if in U.S. English locale複製代碼

不一樣地區數字格式的差別

var number = 123456.789;

// 德國使用逗號做爲小數分隔符，分位週期爲千位
console.log(number.toLocaleString('de-DE'));
// → 123.456,789

// 在大多數阿拉伯語國家使用阿拉伯語數字
console.log(number.toLocaleString('ar-EG'));
// → ١٢٣٤٥٦٫٧٨٩

// 印度使用千位/拉克（十萬）/克若爾（千萬）分隔
console.log(number.toLocaleString('en-IN'));
// → 1,23,456.789

// nu 擴展字段要求編號系統，e.g. 中文十進制
console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
// → 一二三,四五六.七八九複製代碼

經過 toLocaleString 返回的結果能夠經過 options 參數進行定製：

var number = 123456.789;

// 要求貨幣格式
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 123.456,79 €

// 日元不使用小數位
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥123,457

// 限制三位有效數字
console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
// → 1,23,000複製代碼