js基础-小数计算，并转换成带两位的百分比

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

1. parseFloat(s) 将字符串 “0.025” 转换为浮点数 0.025。
2. 然后，parseFloat(s)*100 计算得到 2.5。
3. .toFixed(2) 将 2.5 转换为字符串 “2.50”（因为 toFixed 总是返回一个具有指定小数位数的字符串）。
4. 最后，“2.50” + ‘%’ 拼接得到字符串 “2.50%”。

2.2 计算 s2

这里的问题在于 100.00.toFixed(2) 的执行顺序。

1. 首先，100.00 是一个浮点数，但 toFixed(2) 是 Number 类型的方法，不是 String 类型的方法。然而，JavaScript 在这里会将 100.00 视为一个数字并尝试调用 toFixed(2)。
   100.00.toFixed(2) 的结果是字符串 “100.00”。
2. 然后，parseFloat(s)（即 0.025）尝试与字符串 “100.00” 进行乘法运算，但在JavaScript中，字符串与数字的乘法操作会将字符串转换为数字（如果可能）。因此，“100.00” 被转换为数字 100。
   所以，parseFloat(s)*100.00.toFixed(2) 实际上等价于 0.025 * 100，即 2.5。
3. 但是，注意这里并没有再次调用 .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 )