JS给数字添加千位分隔符

话不多说，直接上

1、使用正则表达式

const reg = /(\d)(?=(\d{3})+$)/g

let num = "12345678";
console.log(num.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,'))//"12,345,678"

// ⚠❗❗❗ 使用String()把数字转换为字符串的优点在于null等情况不会报错
console.log(String(123456789).replace(reg, "$1,"));  // 123,456,789
// ⚠❗❗❗ 支持整数,不支持小数
console.log(String(123456789.1315454).replace(reg, "$1,"));  // 123456789.1,315,454
console.log(String(1000).replace(reg, "$1,"));  // 1,000
console.log(String(null).replace(reg, "$1,"));  // null
console.log(String(undefined).replace(reg, "$1,"));  // undefined
console.log(String(NaN).replace(reg, "$1,"));  // NaN
console.log('??????');

2、使用toLocaleString()方法

// ⚠❗❗❗ 必须是数字,如果是null或者undefined的话,会报错
console.log((123456789).toLocaleString('en-US'));  // 123,456,789
// ⚠❗❗❗ 最多保留三位小数
console.log((123456789.1315454).toLocaleString('en-US'));  // 123,456,789.132
console.log('??????');

3、使用new Intl.NumberFormat()方法

console.log(new Intl.NumberFormat('en-US', {}).format(123456789.1315454));  // 123,456,789.132
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(123456789.1315454));  // ￥123,456,789

4、在vue中添加全局方法添加千位分隔符

涉及的数据比较多，写一个过滤器，将所有的数据都过滤一下，挂载到全局，不需要每个页面引用了。
创建一个js文件，实现数字千位分隔符

export function numberToCurrencyNo(value) {
  if(!value) return 0
  // 获取整数部分
  const intPart = Math.trunc(value)
  // 整数部分处理，增加,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 预定义小数部分
  let floatPart = ''
  // 将数值截取为小数部分和整数部分
  const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 有小数部分
    floatPart = valueArray[1].toString() // 取得小数部分
    return intPartFormat + '.' + floatPart
  }
  return intPartFormat + floatPart
}

引用挂载到全局

在 main.js 文件中引入

import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// 配置全局过滤器，实现数字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)

直接在页面使用

 <div class="total-num">{{totalNum | numberToCurrency}}</div>