Javascript 数学在函数内部是不同的

Question

我有一个非常愚蠢的问题。这段代码:

var x=5;
console.log(x*20+x-1);

按预期打印出 104，但是:

function Go(){
    x = document.getElementById("input").value;
    console.log(x);
    console.log(x*20+x-1);
}

打印出 5，然后打印出 1004。这是为什么？

console.log(x*20) 打印 100。我尝试在它周围加上括号，然后添加 (x-1) 但它仍然输出 1004。

Answer 1

input element 的 value 属性是一个字符串，因此您的x实际上是“5”，而不是数字5。以下是 JavaScript 进行算术隐式类型转换的方法:

  "5" * 20 + "5" - 1
= 100      + "5" - 1
= "1005"         - 1
= 1004

因此，在第一步中，"5" 被正确转换为数字 5，留下 100 作为中间结果。但是，向数字添加字符串会将数字转换为字符串，因此接下来发生的是将字符串连接到 "1005"。最后，从字符串中减去数字1，这会导致字符串再次转换为数字，得到最终结果:1004。

要避免这种情况，您只需先将 x 转换为数字即可:

var x = document.getElementById("input").value;
x = parseInt(x, 10); // or parseFloat(x) if you’re interested in a decimals
console.log(x * 20 + x - 1);

有趣的事实:如果你写的是x * 21 - 1，这相当于你的计算，问题就不会出现。