前端 - 三种方式给数字加上千分位分隔符

点击打开视频讲解

使用toLocaleString方法

	let num = 1234567
	num = num.toLocaleString() 
	console.log(num)// 1,234,567

使用正则表达式

	// 千分位标注
	const setThousandsMark = (num) => {
	  if(num){
	  	num = num + ''
	    let reg = /(?!^)(?=(\d{3})+$)/g;
	    return num.replace(reg, ",")
	  }
	  return num;
	}

使用js分隔符（可从小数点前添加分隔符）

	// 千分位标注
	const setThousandsMark = (num) => {
	  if(!num) return num;
	  let str = num.toString() // 数字转字符串
	  let str2 = null
	  // 如果带小数点
	  if (str.indexOf('.') !== -1) { // 带小数点只须要解决小数点右边的
	    const strArr = str.split('.') // 依据小数点切割字符串
	    str = strArr[0]// 小数点右边
	    str2 = strArr[1]// 小数点左边
	    //如12345.678  str=12345，str2=678
	  }
	  let result = ''// 后果
	  while (str.length > 3) { // while循环 字符串长度大于3就得增加千分位
	    // 切割法 ，从后往前切割字符串 ⬇️
	    result = ',' + str.slice(str.length - 3, str.length) + result 
	    // 切割str最初三位，用逗号拼接 比方12345 切割为 ,345
	    // 用result接管，并拼接上一次循环失去的result
	    str = str.slice(0, str.length - 3) // str字符串剥离下面切割的后三位，比方 12345 剥离成 12
	  }
	
	  if (str.length <= 3 && str.length > 0) {
	  // 长度小于等于3 且长度大于0，间接拼接到result
	  // 为什么能够等于3 因为下面result 拼接时候在后面带上了‘,’
	  // 相当于123456 上一步解决完之后 result=',456' str='123'
	    result = str + result
	  }
	  // 最初判断是否带小数点（str2是小数点左边的数字）
	  // 如果带了小数点就拼接小数点左边的str2 ⬇️
	  str2 ? result = result + '.' + str2 : ''
	  return result
	}