js数字转货币格式怎么写?toLocaleString、正则、边界全说清

做前端的人应该都碰到过:后端接口返回的金额是个裸数字,比如1234567.89,但页面上得显示成"¥1,234,567.89"的样子。这事看着几行代码就搞定,真动手细节还挺多,我按实际项目里的经验整理了下面几种方案。

最省事的写法是调toLocaleString:

1234567.89.toLocaleString('zh-CN', {style:'currency', currency:'CNY'})

js数字转货币格式怎么写?toLocaleString、正则、边界全说清

输出直接就是"¥1,234,567.89",千分位分隔符和小数位数自动处理,不用自己拼字符串。唯一问题是IE11对currency选项支持不好,老项目还得手动兜底。

项目里多处要用的话,我一般封个工具函数,核心就两步:先Math.round(v*100)/100修掉浮点误差,再用正则每三位插个逗号。有个特别容易踩的坑是0.1+0.2不等于0.3,金额场景必须四舍五入到分,不然累加多了对不上账,财务那边会找你。

跟后端对接时边界情况也得多想:接口返回单位是"分"的,前端展示前除以100;值为null或undefined显示"—"而不是"NaN";负数写成"-¥50.00",¥符号不跟着负号跑。这些不提前列全数字转货币的js格式,上线就是线上bug。

货币格式化真正难的从来不是那三行核心代码,而是边界情况的覆盖。不同币种、不同locale、后端单位不统一,每个项目都有自己的一套。动手前花十分钟把各种边界列清楚js数字转货币格式怎么写?toLocaleString、正则、边界全说清,比上线后挨个排查强多了。你项目里还碰到过哪些奇葩的金额展示问题?评论区聊聊。

相关阅读