JS数值千分位格式化

简述

日常开发中，经常有数值格式化的需求，其中，最常见的场景之一，就是千分位化。

本文从讲解两种实现方案，仅供参考！

常规方法

function getAddStr (str, num) {
  var i, tmp = "";
  for (i = 0; i< num; i++) {
    tmp += str;
  }
  return tmp;
}
function commafy (num, index, separator, rententionNum) {
  if (num === '--') {return '--';}
  if (!index) {index = 3;}
  if (!separator) {separator = ',';}
  if (!rententionNum) {rententionNum = 2;}
  num = num.toFixed(rententionNum);
  var _this = this;
  var reg = new RegExp('(-?[0-9]+)([0-9]{' + index + '})');
  if (/^.*\..*$/.test(num)) {
    var pointIndex = num.lastIndexOf('.');
    var intPart = num.substring(0, pointIndex);
    var pointPart = num.substring(pointIndex + 1, num.length);
    var pointLen = pointPart.length;
    if (pointLen >= 1) {pointPart = pointPart + getAddStr("0", rententionNum - pointLen);}
    intPart = intPart + '';
    while(reg.test(intPart)) {
      intPart = intPart.replace(reg, '$1' + separator + '$2');
    }
    num = intPart + '.' + pointPart;
  } else {
    while (reg.test(num)) {
      num = num.replace(reg, '$1' + separator + '$2');
    }
    num = num + '.' + _this.getAddStr("0", rententionNum);
  }
  return num;
}
console.log(commafy(123456, 3, ',', 0)); // 123,456.00

commafy方法接收四个参数 num、index、 separator、 rententionNum，num为待格式化的数值，index格式化字符出现的位置（千分位格式化，默认为3，表示每隔三位显示一个格式化字符），separator格式化字符（默认为“,”），rententionNum小数点个数（默认为2）。除了num，其他值都是可选的。

自定义模式实现

function numberFormat (number, fmt) {
  var fmtSplit = fmt.split('.'),
      number = Number(number),
      numberString = '',
      min,
      max;
  if (isNaN(number)) return number;
  // 判断负数
  if (number < 0) {
    var isNegative = true;
  }
  // 如果有%号，做百分比转换
  if (/\%/.test(fmt)) {
      number *= 100;
      }
  // 小数部分
  if (fmtSplit.length > 1) {
    min = /0+/.exec(fmtSplit[1]);
    max = /#+/.exec(fmtSplit[1]);
    min = min == null ? 0 : min[0].length;
    max = max == null ? 0 : max[0].length;
    
    number = number.toFixed(max + min);
    for(var i = 0; i< max; i++) {
      if (number.slice(-1) !== '0') break;
      number = number.slice(0, -1);
    }
  } else {
    number = number.toFixed(0);
  }
  // 整数部分
  var numberSplit = number.replace('-', '').split('.');
  min = /[0]+/.exec(fmtSplit[0].replace(',',''));
  min = min == null ? 0 : min[0].length;
  while(numberSplit[0].length < min ) {
    numberSplit[0] = '0' + numberSplit[0];
  }
  // 加千分位
  if (fmtSplit[0].lastIndexOf(',') !== -1) {
    var groupby = fmtSplit[0].slice(fmtSplit[0].lastIndexOf(','));
    groupby = /[0#]+/.exec(groupby);
    if (groupby != null) {
      var reg = new RegExp('(-?[0-9]+)([0-9]{' + groupby[0].length + '})');
      while (reg.test(numberSplit[0])){
        numberSplit[0] = numberSplit[0].replace(reg, '$1,$2');
      }
    }
  }
  numberString = (isNegative ? '-' : '') + (numberSplit.length > 1 ? numberSplit.join('.') : numberSplit[0]);
  return fmt.replace(/[0#\-\,\.]+/, numberString);
}
console.log(numberFormat(123456, '#,##0.00')); // 123,456.00

如上代码，numberFormat接收两个参数，num跟fmt，num为待格式化的数值，fmt为格式化模式字符串，包含#跟0两个字符。

'#,##0.00' 表示 小数点后是“00”，个位是‘0’，十位是‘#’，百位是‘#’，千位是‘#’。

其中，“#”表示待格式化的数值，在该位上，没有值，则不显示该位。又或者待格式化数值该位为0且为最高位上的数值，也不显示该值。举例：如果用'#,##0'格式化1000，结果为1,000；同样的，格式化010，则结果是10（010百位的0不显示）。

‘0’表示待格式化的数字，在该位上，如果值则用0表示。'#,##0.00'格式化100时，结果是100.00。