前言
日常写前端经常遇到接口返回数字字符串、页面输入框拿到字符串数字，直接运算就出各种奇怪 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 类型，渲染页面时再格式化小数
