前言前端做电商、票务系统的时候经常遇到价格特殊排版需求。 比如大字号展示价格整数右上角小号字体展示小数类似83.6。这时候就需要一个工具函数把金额拆成整数字符串和小数字符串两部分。 下面分享我正在项目里使用的价格拆分函数顺带讲坑点与优化方案。原始代码先看初稿javascript运行/** * 拆分价格整数 和 小数 * param {number} price 金额 * returns {obj} {int:整数, dec:小数一位} */ function splitPrice(price) { // 统一保留1位小数 const num Number(price).toFixed(1); const arr num.split(.); return { int: arr[0], dec: arr[1] } }功能说明Number(price)防止传入字符串类型金额统一转为数字.toFixed(1)强制保留1 位小数根据你的业务可改成 2 位split(.)用小数点切割字符串分割成数组返回对象int 整数部分dec 小数部分直接拿去渲染页面简单调用测试javascript运行console.log(splitPrice(83.6)); // {int: 83, dec: 6} console.log(splitPrice(100)); // {int: 100, dec: 0} console.log(splitPrice(9.9)); // {int: 9, dec: 9}发现原始代码存在的坑坑 1极端情况数组不存在第二项举个例子理论上toFixed()一定会生成小数点但是如果传入异常值、NaN 的时候split(.)得到的数组长度为 1arr[1]会是undefined页面渲染会报错。坑 2JS 浮点数精度老问题直接对原生数字计算后再 toFixed依然存在精度问题。示例0.1 0.2不等于 0.3业务计算金额尽量后端返回处理好的字符串前端仅做展示。坑 3注释和代码不一致注释写着小数两位代码用的是toFixed(1)保留一位小数属于低级 bug复制代码很容易踩雷。优化完善版本生产推荐javascript运行/** * 拆分价格分离整数 和 小数部分 * param {number|string} price 原始金额支持数字/字符串 * param {number} digit 保留小数位数默认1位 * returns {Object} {int:string, dec:string} */ function splitPrice(price, digit 1) { // 转为数字异常值兜底为0 const amount Number(price) || 0; // 固定小数位数返回字符串 const fixedStr amount.toFixed(digit); // 分割小数点 const [intStr, decStr 0] fixedStr.split(.); return { int: intStr, dec: decStr } }优化点入参兼容支持数字、字符串两种金额传入异常兜底如果传 null、undefined、文字自动当成 0 元不会报错解构赋默认值decStr 0就算分割不到小数点小数部分默认是 0杜绝 undefined小数位数可配置需要两位小数直接调用splitPrice(99.9, 2)调用示例javascript运行// 保留1位小数 splitPrice(50); // {int:50, dec:0} splitPrice(123.5); // {int:123, dec:5} // 保留2位小数 splitPrice(88.8, 2); // {int:88, dec:80} // 异常参数测试 splitPrice(abc); // {int:0, dec:0} splitPrice(null); // {int:0, dec:0}页面渲染实战场景拿到拆分结果后直接渲染 html实现大小字体价格效果javascript运行const priceInfo splitPrice(83.6); const html span classprice-int${priceInfo.int}/span span classprice-dec.${priceInfo.dec}/span ;搭配 css 轻松实现常见的商品价格样式css.price-int { font-size: 30px; font-weight: bold; } .price-dec { font-size: 14px; }重要业务提醒避坑重点toFixed 四舍五入规则toFixed()是银行家舍入不是我们日常的四舍五入。如果对金额精度要求极高不要前端做金额运算交给后端处理。前端只负责展示金额计算不要依赖前端 JSJS 浮点数天生有精度缺陷加减乘除尽量后端算好前端只接收最终金额字符串 / 数字仅做展示拆分。如果你业务统一需要始终保留 2 位小数只需要把调用时 digit 传 2或者直接把函数默认值改成 2。