JavaScript实现兼容正负、小数、无前置零的千分位分隔方法

纯原生JS正则实现，无第三方依赖，和现有表格逻辑适配只需要加个事件绑定，改动量极小，全场景覆盖正负数、整数、小数的格式化需求。

实现逻辑说明 #

格式化规则完全匹配需求：

• 自动为正负整数、正负小数的整数部分添加千分位分隔符
• 自动清除所有非法前置零，比如00123自动修正为123、-000.45自动修正为-0.45
• 自动补全缺失的整数位0，比如输入.12自动转为0.12、输入-.12自动转为-0.12
• 自动过滤非法输入：多余负号、多余小数点、非数字字符都会被实时拦截

核心代码 #

直接把下面这段代码加到项目的公共JS文件里，给所有价格输入框绑定input事件即可，不需要改动现有表格的结构和其他业务逻辑：

function formatPrice(e) {
  let value = e.target.value;
  // 过滤非数字、负号、小数点的非法字符
  value = value.replace(/[^\d.-]/g, '');
  // 仅允许字符串开头位置出现一个负号
  value = value.replace(/(?!^)-/g, '');
  // 仅允许存在一个小数点
  value = value.replace(/\./g, (char, pos, str) => str.indexOf(char) === pos ? char : '');

  const isNegative = value.startsWith('-');
  let numPart = isNegative ? value.slice(1) : value;
  const [intRaw, decRaw] = numPart.split('.');

  // 清除整数部分前置零，空值/全零场景保留单个0
  let intFormatted = intRaw ? intRaw.replace(/^0+/, '') || '0' : '';
  // 整数部分加千分位分隔符
  intFormatted = intFormatted.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  // 拼接最终结果
  let res = isNegative ? '-' : '';
  res += intFormatted;
  if (decRaw !== undefined) res += `.${decRaw}`;
  // 补全小数点前缺失的0
  res = res.replace(/^(-?)\./, '$10.');

  e.target.value = res;
}

// 绑定示例：给所有价格输入框绑定事件，类名和现有项目保持一致即可
document.querySelectorAll('.price-input').forEach(input => {
  input.addEventListener('input', formatPrice);
});

业务取值适配 #

如果后续需要拿输入值做计算，只需要去掉千分位逗号转成数字即可，不需要额外改其他计算逻辑：

// 从输入框取可计算的数值
const priceNum = Number(inputElement.value.replace(/,/g, ''));

覆盖测试场景 #

所有边界输入都能正确格式化：

• 输入0012345 → 输出12,345
• 输入-001234.56 → 输出-1,234.56
• 输入.789 → 输出0.789
• 输入-.789 → 输出-0.789
• 输入1234567890.1234 → 输出1,234,567,890.1234
• 输入-1234567890.1234 → 输出-1,234,567,890.1234
• 输入0000 → 输出0

内容的提问来源于stack exchange，提问作者Folco Tandiono