JS 数字千分位格式化

数字千分位常用于金额、数据统计等场景，每千位加入一个逗号，小数部分不进行格式化

例如：1234567.123 转化为千分位的形式为：1,234,567.123

方法：

• toLocaleString()
• 正则表达式
• 将数字作为字符串来遍历，每三位添加一个逗号
• 将数值进行反转，每3位添加一次逗号
• 使用字符串拆分
• ...

第一种方法是最常规的实现方式了，注意首尾是不加符号的，下面介绍这里面比较简便的两种方式：

toLocaleString()

toLocaleString() 是相对比较快速的实现方法了，它会根据本地时间把 Date 对象转换为字符串。

let num= 123456789
console.log(num.toLocaleString())

toLocaleString() 的其它功能：

• 数组、数字、日期类型都可以使用这个函数。
• 默认就会进行千分位分隔，当 useGrouping 设置为 false 时，可以取消千分位分隔。
• 除了进行千分位转换，它还可以将数据处理成百分比、货币等形式：

参数：

• 第一个参数，表示语言环境。
• 第二个参数，是一个对象
  • style 表示转换的形式
  • currency 表示货币类型
  • useGrouping 表示是否进行千分位转换
  • minimumFractionDigits 表示保留小数位
  • ...

let num = 134
console.log(num.toLocaleString('zh',{style:'percent'}))
console.log(num.toLocaleString('zh',{style:'percent' , useGrouping: false}))
console.log(num.toLocaleString('zh',{style:'currency' , currency:'CNY' }))

运行结果：

let date = new Date()
console.log(date.toLocaleString())
console.log(date.toLocaleString('zh',{ hour12: false }))

运行结果：

正则表达式

这里只适配了整数，没有对小数进行处理，如果包含小数的转换，需要额外处理。

function toThousands(num) {
    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}

或者这种形式：

const str = "12345678"
const reg = /(?!^)(?=(\d{3})+$)/g;
console.log(str.replace(reg,','));

正则需要注意的是：匹配的数字需要是字符串形式，如果不是的话需要预先处理成字符串再调用正则匹配函数。