小数计算，并转换成带两位的百分比
- 1、需求说明
- 2、执行过程
- 2.1 计算 s1
- 2.2 计算 s2
1、需求说明
在工作中，有时需要将计算的小数转换成百分比小数，但是在js代码中，计算公式一点点的区别就会影响到最终的结果，如下面代码，s1和s2变量的计算过程只有一点点区别，但是s2计算出来的结果跟我们预想的完全不一样。
运行代码
var s = "0.025";var s1 = (parseFloat(s)*100).toFixed(2) + '%';var s2 = parseFloat(s)*100.00.toFixed(2) + '%';var s3 = parseFloat(s).toFixed(2);console.log("s1:"+s1);console.log("s2:"+s2);console.log("s3:"+s3);
</script>
控制台输出
2、执行过程
2.1 计算 s1
- parseFloat(s) 将字符串 “0.025” 转换为浮点数 0.025。
- 然后，parseFloat(s)*100 计算得到 2.5。
- .toFixed(2) 将 2.5 转换为字符串 “2.50”（因为 toFixed 总是返回一个具有指定小数位数的字符串）。
- 最后，“2.50” + ‘%’ 拼接得到字符串 “2.50%”。
2.2 计算 s2
这里的问题在于 100.00.toFixed(2) 的执行顺序。
- 首先，100.00 是一个浮点数，但 toFixed(2) 是 Number 类型的方法，不是 String 类型的方法。然而，JavaScript 在这里会将 100.00 视为一个数字并尝试调用 toFixed(2)。
100.00.toFixed(2) 的结果是字符串 “100.00”。 - 然后，parseFloat(s)（即 0.025）尝试与字符串 “100.00” 进行乘法运算，但在JavaScript中，字符串与数字的乘法操作会将字符串转换为数字（如果可能）。因此，“100.00” 被转换为数字 100。
所以，parseFloat(s)*100.00.toFixed(2) 实际上等价于 0.025 * 100，即 2.5。 - 但是，注意这里并没有再次调用 .toFixed(2) 来格式化 2.5 为字符串。因此，“2.5” + ‘%’（这里假设我们实际上是在进行这样的操作，尽管代码中并未显式这样做）会得到 “2.5%”，但实际上代码中的 s2 赋值是 2.5 + ‘%’，即 “2.5%”（因为 + 操作符在数字与字符串之间使用时，会将数字转换为字符串并进行拼接）。
注意：实际上，s2 的计算 parseFloat(s)*100.00.toFixed(2) + ‘%’ 在执行时会先计算 100.00.toFixed(2) 得到 “100.00”，然后 “100.00” 会被隐式转换为数字 100，再与 parseFloat(s) 的结果相乘，得到 2.5。然后 “2.5” + ‘%’ 得到 “2.5%”。这里的关键是 toFixed(2) 是在乘法操作之前就被调用的，并且其结果（字符串）在乘法操作中会被隐式转换为数字。
使用浏览器：Microsoft Edge (版本 126.0.2592.87 )
