前端手写: JavaScript 千分位分隔

5 阅读1分钟

JavaScript 千分位分隔

1. 最常用:正则表达式

function thousandSeparator(num) {
  // 处理负数和小数
  const parts = num.toString().split('.');
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return parts.join('.');
}

// 示例
thousandSeparator(-1234567.89);   // "-1,234,567.89"
thousandSeparator(1234.5678);     // "1,234.5678"

2. 使用 Intl.NumberFormat (ES6+)

// 最简单的方法
const number = 1234567.89;
const formatted = new Intl.NumberFormat().format(number);
// 结果: "1,234,567.89"(根据系统区域设置)

// 指定语言环境
new Intl.NumberFormat('en-US').format(1234567.89);  // "1,234,567.89"
new Intl.NumberFormat('de-DE').format(1234567.89);  // "1.234.567,89"(德国格式)

// 自定义选项
const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
formatter.format(1234567.8);  // "1,234,567.80"

3. 使用 toLocaleString

// 最简写法
(1234567.89).toLocaleString();           // "1,234,567.89"
(1234567.89).toLocaleString('en-US');    // "1,234,567.89"

// 带选项
(1234567.89).toLocaleString('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});  // "1,234,567.89"

4. 手动实现(算法)

function formatThousand(num) {
  const str = num.toString();
  const [integer, decimal] = str.split('.');
  
  let result = '';
  let count = 0;
  
  // 从右向左处理整数部分
  for (let i = integer.length - 1; i >= 0; i--) {
    result = integer[i] + result;
    count++;
    if (count % 3 === 0 && i !== 0) {
      result = ',' + result;
    }
  }
  
  // 拼接小数部分
  return decimal ? result + '.' + decimal : result;
}

总结:对于大多数场景,直接使用 num.toLocaleString()是最简单有效的方法。