javaScript金钱格式化｜千位分隔符

js金钱格式化

金钱每三位添加“,” 12345678->12,345,678

• 思路1:数字->字符串->倒着每三位加“,”

function format(num){
	num=num+'';//数字转字符串
    var str="";//字符串累加
    for(var i=num.length- 1,j=1;i>=0;i--,j++){
	  if(j%3==0 && i!=0){//每隔三位加逗号，过滤正好在第一个数字的情况
	     str+=num[i]+",";//加千分位逗号
		 continue;
      }
	  str+=num[i];//倒着累加数字
     }
	return str.split('').reverse().join("");//字符串=>数组=>反转=>字符串
}

• 思路2:将字符串/数字每三位添加至数组中，再转为字符串

function format(num) {
  let str=num+'';
  let arr = [],
  let 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()
}

• 思路3:数字/字符串->转为数组->反转->利用reduce()判断

function format(num) {
	let str=num+'';//数字转为字符串
  // ["0", "9", "8", "7", "6", "5", "4", "3", "2", "1"]
  return str.split("").reverse().reduce((prev, next, index) => {
    return ((index % 3) ? next : (next + ',')) + prev
  })//reduce 累加器
}

• 思路4:正则表达式

//正则1
function format (num) {
	return (num + '').replace(/\d{1,3}(?=(\d{3})+$)/g, '$&,');
}
//正则2
function format(num) {
  return (num + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

• 思路5:JS自带API

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

toLocaleString：将数字转化成指定格式的字符串
自带API：详情可查看MDN文档

含有小数点的金钱格式化

• 思路:将小数点补齐后，分为整数部分和小数部分，整数部分逻辑不变，再加上小数点和小数部分

function format(num) {
  num=parseFloat((num + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
  var intNum = num.toString().split(".")[0];
  var floatNum=num.toString().split(".")[1];
  return (intNum || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')+"."+floatNum;
}

输入框内仅允许输入数字及小数点后两位

    <input
      placeholder="请输入已付金额"
      v-model="count"
      onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
    />