小数计算,并转换成带两位的百分比
- 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 )