js中数字与字符串转换，计算的注意事项
前言日常写前端经常遇到接口返回数字字符串、页面输入框拿到字符串数字直接运算就出各种奇怪 bug。一、基础类型转换方式数字 字符串1. 数字 → 字符串两种最常用方案变量.toString()javascript运行let num1 120; num1.toString() // 120 输出字符串toFixed(n)保留指定小数位javascript运行num1.toFixed(5) // 120.00000⚠️重点提醒toFixed 返回值永远是字符串很多新手踩坑以为 toFixed 之后还是数字继续参与运算就出错。 如果想要数字必须外层包一层Number()转换javascript运行Number(num1.toFixed(5)) // 转为纯数字类型2. 字符串 → 数字核心方法Number(字符串)适合把123.66这类数字字符串转成数字。javascript运行let num2 123.66 Number(num2) // 123.66二、运算最大坑数字 字符串 字符串拼接JS运算符有双重身份加法和字符串拼接规则只要两边任意一边是字符串直接执行拼接不会做数学加法。javascript运行let num1 120; let num2 123.66; console.log(num1 num2) // 120123.66 ❌ 不是相加是拼接 console.log(num1 Number(num2)) // 243.66 ✅ 先统一转数字再运算小知识点- * /运算符不会拼接遇到字符串会自动尝试转数字计算。 但是规范开发不建议依赖自动隐式转换最好手动用Number()显式转换代码可读性更高。javascript运行num1 - num2 // JS偷偷把num2转数字计算但不推荐这么写三、toFixed 使用规范极易出错toFixed(n)返回字符串不要直接连续运算如果想要保留小数的计算结果先运算最后再调用 toFixed✅正确写法javascript运行((num1 * Number(num2))).toFixed(1)❌错误思路先 toFixed 再计算拿到字符串运算容易异常 3. toFixed 用来展示页面数值很合适不要用来做多次连续数学运算。四、重中之重JS 浮点数精度丢失问题经典坑JS 采用 IEEE754 浮点数存储小数0.1、0.56 这类小数直接运算会出现误差。 示例javascript运行let num5 0.1 let num6 0.56 console.log(num5 num6) // 出现不精确小数简单解决方案放大整数运算运算完再缩小思路把小数统一乘以 10、100 变成整数计算计算完成后再相除规避浮点误差javascript运行console.log((num5*100 num6*100) / 100)适合金额、价格计算场景商城结算、购票价格计算一定要注意五、综合运算书写规范混合运算先把字符串数字Number()转为数字多层运算多加括号明确运算优先级所有数学计算完成后最后调用 toFixed 格式化展示示例javascript运行(((num1 Number(num2)) * num3) / num4).toFixed(2)六、注意要点存在拼接陷阱数字和字符串相加优先拼接减法、乘除不会拼接toFixed()返回字符串如需继续运算外层包裹Number()输入框、后端返回的数字字符串参与计算前统一手动 Number () 转换小数运算警惕精度丢失金额计算建议先放大为整数运算格式化展示和业务计算分开计算阶段尽量保持 Number 类型渲染页面时再格式化小数
)
