JS金额千分位格式化6种方法：正则、Intl与性能分析

方法一：数组分割法

这是最直观的解决思路。核心逻辑是将数字转换为字符串后，以小数点为界进行分割，随后对整数部分按每三位一组进行字符拼接处理。

function format_with_array(number) {
  // 转为字符串，并按照.拆分
  const arr = (number + '').split('.');
  // 整数部分再拆分
  const int = arr[0].split('');
  // 小数部分
  const fraction = arr[1] || '';
  // 返回的变量
  let r = '';
  int.reverse().forEach(function (v, i) {
    // 非第一位并且是位值是3的倍数，添加“,”
    if (i !== 0 && i % 3 === 0) {
      r = v + ',' + r;
    } else {
      // 正常添加字符(这是好写法)
      r = v + r;
    }
  });
  // 整数部分和小数部分拼接
  return r + (!!fraction ? '.' + fraction : '');
}
// 测试用例
console.log(format_with_array(1234567893.99));

方法二：字符截取法

该方法通过计算整数部分长度对3取模的余数，先截取多余的前几位，再循环截取每三位并插入逗号。具体实现逻辑可参考下方代码注释。

function format_with_substring(number) {
  // 数字转为字符串，并按照 .分割
  let arr = (number + '').split('.');
  let int = arr[0] + '';
  let fraction = arr[1] || '';
  // 多余的位数
  let f = int.length % 3;
  // 获取多余的位数，f可能是0， 即r可能是空字符串
  let r = int.substring(0, f);
  // 每三位添加','金额对应的字符
  for (let i = 0; i < Math.floor(int.length / 3); i++) {
    r += ',' + int.substring(f + i * 3, f + (i + 1) * 3);
  }
  // 多余的位数，上面
  if (f === 0) {
    r = r.substring(1);
  }
  // 调整部分和小数部分拼接
  return r + (!!fraction ? '.' + fraction : '');
}
console.log(format_with_substring(12112123313.78));

方法三：求模法

此方案利用1000求模获取末尾三位数字，再通过除法判断剩余位数。由于避免了复杂的字符串操作，其运行性能通常优于其他方法，因此作为推荐方案使用。

function format_with_mod(number) {
  let n = number;
  let r = '';
  let temp = '';
  do {
    // 求模的值， 用于获取高三位，这里可能有小数
    mod = n % 1000;
    // 值是不是大于1，是继续的条件
    n = n / 1000;
    // 高三位
    temp = ~~mod;
    // 1.填充: n > 1 循环未结束， 就要填充为比如 1 => 001
    // 不然temp = ~~mod的时候, 1 001， 就会变成 "11"
    // 2.拼接“,”
    r = (n >= 1 ? `${temp}`.padStart(3, '0') : temp) + (!!r ? ',' + r : '');
  } while (n >= 1);
  const strNumber = number + '';
  let index = strNumber.indexOf('.');
  // 拼接小数部分
  if (index >= 0) {
    r += strNumber.substring(index);
  }
  return r;
}
console.log(format_with_mod(1234567893.99));

方法四：正则表达式（先行断言）

在展示具体代码前，需先理解正则中的“先行断言”概念。先行断言用于匹配后跟特定模式的子串，而不消耗字符。

假设存在字符串：“我爱你我爱爱爱你”。

若需提取所有“爱”字，且要求该“爱”字后面紧跟着“你”，则需使用先行断言语法。

'我爱你我爱爱爱你'.match(/爱(?=你)/g) // ["爱", "爱"]

若需匹配“爱”字后面不跟随“你”的情况，则使用先行否定断言。

'我爱你我爱爱爱你'.match(/爱(?!你)/g) // ["爱", "爱"]，此处匹配结果因存在相同字符而需注意上下文。

若需同时满足“爱”字后面有“你”，且前面有“我”，则需结合使用后行断言。

'我爱你我爱爱爱你'.match(/(?<=我)爱(?=你)/g) // ["爱"]

若需匹配“爱”字前面没有“我”且后面也没有“你”，则需同时使用先行否定断言和后行否定断言。

'我爱你我爱爱爱你'.match(/(?<!我)爱(?!你)/g) // ["爱"]

正则表达式具有高度灵活性，下面将展示如何利用上述断言技巧实现千分位格式化。

function format_with_regex(number) {
  return !(number + '').includes('.')
    ? // 就是说1-3位后面一定要匹配3位
      (number + '').replace(/\d{1,3}(?=(\d{3})+$)/g, (match) => {
        return match + ',';
      })
    : (number + '').replace(/\d{1,3}(?=(\d{3})+(\.))/g, (match) => {
        return match + ',';
      });
}
console.log(format_with_regex(1243250.99));

代码中 `d{1,3}` 表示匹配1到3次数字，其后紧跟由3个数字组成的组。以“1243250”为例：首先“243”前有一位“1”，符合“1-3位后接3位数字”的条件，因此“1,243”被标记；接着“250”前是“243”，同样符合条件，最终结果为“1,243,250”。

方法五：通过Intl.NumberFormat

此方法利用JavaScript内置的 `Intl.NumberFormat` API。需要注意的是，该对象在每次调用时都会进行初始化，可能引发性能开销，建议在非高频调用场景下使用。

function format_with_Intl(
  number,
  minimumFractionDigits,
  maximumFractionDigits
) {
  minimumFractionDigits = minimumFractionDigits || 2;
  minimumFractionDigits = maximumFractionDigits || 2;
  maximumFractionDigits = Math.max(
    minimumFractionDigits,
    maximumFractionDigits
  );
  return new Intl.NumberFormat('en-us', {
    maximumFractionDigits: maximumFractionDigits || 2,
    minimumFractionDigits: minimumFractionDigits || 2,
  }).format(number);
}
console.log(format_with_Intl(123456789.98));

方法六：number.toLocaleString方式

这是JavaScript原生提供的API方法，其底层实现与 `Intl.NumberFormat` 类似，同样存在初始化带来的性能问题，不适合对性能要求极高的循环场景。

function format_with_toLocalString(
  number,
  minimumFractionDigits,
  maximumFractionDigits
) {
  minimumFractionDigits = minimumFractionDigits || 2;
  minimumFractionDigits = maximumFractionDigits || 2;
  maximumFractionDigits = Math.max(
    minimumFractionDigits,
    maximumFractionDigits
  );
  return number.toLocaleString('en-us', {
    maximumFractionDigits: maximumFractionDigits || 2,
    minimumFractionDigits: minimumFractionDigits || 2,
  });
}
console.log(format_with_toLocalString(123456789.58));

总结

以上介绍了JavaScript中实现金额千分位格式化的六种方式。读者可根据实际业务场景，在代码可读性与执行性能之间做出权衡。更多关于JS金额处理的技术细节，请参阅本站相关文章。

JavaScript实现金额千分位分隔的6种方案及性能对比