js 数字格式化

大家好，欢迎来到IT知识分享网。

数字格式化 1234567890 –> 1,234,567,890

4.1 普通版

function formatNumber(str) {
  let arr = [],
    count = str.length

  while (count >= 3) {
    arr.unshift(str.slice(count - 3, count))
    count -= 3
  }

  // 如果是不是3的倍数就另外追加到上去
  str.length % 3 && arr.unshift(str.slice(0, str.length % 3))

  return arr.toString()

}
console.log(formatNumber("1234567890")) // 1,234,567,890

优点：自我感觉比网上写的一堆 for循环 还有 if-else 判断的逻辑更加清晰直白。
缺点：太普通

4.2 进阶版

function formatNumber(str) {

  // ["0", "9", "8", "7", "6", "5", "4", "3", "2", "1"]
  return str.split("").reverse().reduce((prev, next, index) => {
    return ((index % 3) ? next : (next + ',')) + prev
  })
}

console.log(formatNumber("1234567890")) // 1,234,567,890

优点：把 JS 的 API 玩的了如指掌
缺点：可能没那么好懂，不过读懂之后就会发出我怎么没想到的感觉

4.3 正则版

function formatNumber(str) {
  return str.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

console.log(formatNumber("123456789")) // 1,234,567,890

下面简单分析下正则/\B(?=(\d{3})+(?!\d))/g：

1. /\B(?=(\d{3})+(?!\d))/g：正则匹配边界\B，边界后面必须跟着(\d{3})+(?!\d);
2. (\d{3})+：必须是1个或多个的3个连续数字;
3. (?!\d)：第2步中的3个数字不允许后面跟着数字;
4. (\d{3})+(?!\d)：所以匹配的边界后面必须跟着3*n（n>=1）的数字。

最终把匹配到的所有边界换成,即可达成目标。

优点：代码少，浓缩的就是精华
缺点：需要对正则表达式的位置匹配有一个较深的认识，门槛大一点

4.4 API版

(123456789).toLocaleString('en-US')  // 1,234,567,890

如图，你可能还不知道 JavaScript 的 toLocaleString 还可以这么玩。

还可以使用 Intl对象 – MDN

Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比，数字格式化，日期和时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。

new Intl.NumberFormat().format(1234567890) // 1,234,567,890

优点：简单粗暴，直接调用 API
缺点：Intl兼容性不太好，不过 toLocaleString的话 IE6 都支持

你可能不知道的前端知识点：Intl对象 和 toLocaleString的方法。