Number.prototype.toLocaleString() 原生支持千分位、小数位、负号及国际化，能正确处理 NaN、null、空字符串等边界情况；无需手写正则，避免小数、负数、科学计数法和多地区格式（如德语“1.234,56”）适配问题，且参数化配置灵活可靠。
直接用 Number.prototype.toLocaleString()，别手写正则或循环——它原生支持千分位、小数位、负号、国际化，且能正确处理 NaN、null、空字符串等边界情况。
为什么不用自己写正则匹配千分位
手写正则（比如 /\B(?=(\d{3})+(?!\d))/g）看似简洁，但一遇到带小数点的数字（如 1234567.89）、负数（-12345）、科学计数法（1e6）或空值，就容易漏掉小数部分、多加逗号、或抛错。更麻烦的是：它不区分地区习惯（比如德国用 1.234,56，日本用 1,234.56），后续换语言或出海时得重写。
而 toLocaleString() 天然适配这些场景，只要传对参数：
- 整数
1234567→(1234567).toLocaleString()得"1,234,567" - 带两位小数
1234567.891→(1234567.891).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })得"1,234,567.89" - 负数
-1234.5→ 自动保留负号，不会变成",-1,234.5"
toLocaleString() 的关键参数组合
真正控制格式的是第二个参数对象，不是靠猜正则。常见需求对应写法如下：
立即学习“前端免费学习笔记（深入）”；
- 纯千分位（无小数）：
num.toLocaleString('en-US', { useGrouping: true, minimumIntegerDigits: 1 }) - 金额常用（2位小数 + 千分位）：
num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) - 兼容中文环境（如需「万」「亿」缩写，需额外处理；
toLocaleString不支持）：num.toLocaleString('zh-CN', { style: 'decimal' })—— 仍输出"1,234,567.89"，只是按中文 locale 解析符号 - 避免四舍五入导致精度丢失（如展示原始数据）：
parseFloat(num.toFixed(2)).toLocaleString(...)不推荐；应先截断再格式化，或用Intl.NumberFormat配合roundingMode: 'trunc'（仅现代浏览器）
input type="number" 和显示格式化的冲突
<input type="number"> 只接受纯数字字符，不能输入逗号或中文符号。所以你不能把 "1,234.56" 直接塞进它的 value 属性——浏览器会清空或报错。
正确做法是分离「输入态」和「显示态」：
- 输入框保持原生数字类型（便于校验、键盘限制）
- 旁边放一个只读
<span id="display"></span>或<output>标签，专门做格式化展示 - 监听
input事件，取event.target.valueAsNumber（自动转为 number，""返回NaN），再调用toLocaleString()渲染到显示区 - 注意：不要用
parseFloat(e.target.value)，它对空字符串返回0，掩盖了用户未输入的意图
导出 Excel 时千分位失效怎么办
HTML 表格导出成 Excel（比如用 table2excel 或手动生成 .xls 文件）时，Excel 会把 <td>1,234.56</td> 当作文本，失去数字格式和计算能力。
解决方法只有两个：
- 服务端导出：用
SheetJS（xlsx）或后端库（如 Java 的 Apache POI），显式设置单元格格式为#,##0.00 - 前端降级兼容：在
<td>上加style="mso-number-format:'\#,##0.00';"（仅对 Microsoft Excel 生效，且必须用application/vnd.ms-excelMIME 类型）
别指望用 CSS 或 JS 在 HTML 里“骗过” Excel —— 它解析的是原始 DOM 文本内容，不是渲染结果。
