在Javascript中添加两个变量[重复]

Question

这个问题在这里已有答案：

• How to force JS to do math instead of putting two strings together 9个答案

我想取一个数字输入（id =“number”）并将其保存为“x”。然后创建另一个变量“y”，即“x”的5％。然后我想将它们一起添加并将结果保存在一个名为“result”的变量中。假设x = 100.然后y = 5.如果我只是警告“y”它会提醒数字5这是正确的但问题是当我尝试警告“结果”（x + y）时它会提醒1005 （它不会添加数字只是将它们写在彼此旁边）。

let x = document.getElementById("number");
let y = x*0.05;
var result = x+y;
alert(result);

Answer 1

拳头得到value，所以将其转换为number：

变化：

var x = document.getElementById("number")

至 ：

var x = parseInt( document.getElementById("number").value )

注意：即使type属性与number相等，也必须将输入转换为数字。

function fun() {
  var x = document.getElementById('number').value;
  console.log( typeof x)
  var y = parseInt(document.getElementById('number').value);
  console.log( typeof y)
}

<input type="number" id="number">
<button onclick="fun()">Go..</button>

Answer 2

1. 你需要一个值来做一些计算。所以， var x = document.getElementById（“number”）。value;
2. 如果存在字符串值，“+”运算符将连接。 var x是字符串值，但当var y = x * 0.05时会发生自动类型转换。所以你必须通过parseInt（）清楚地声明“x是数字”。 var x = parseInt（document.getElementById（“number”）。value）;

现在“+”运算符将按预期工作。

Answer 3

发生了什么是x+y正在执行string concatenation，而不是整数加法 - 这就是你想要的。

// String concatenation
console.log("100" + "5"); // outputs "1005"

// Integer Addition
console.log(100 + 5); // outputs "105"

这就是问题所在，但解决方案是什么？

解决方案是force integer addition与像parseInt()（作为Ehsan mentioned）

var x = parseInt( document.getElementById("number").value );

值得注意的是，Ehsan使用document.getElementById（“number”）。value，而不是document.getElementById（“number”）

这会强制x为int，这将允许x+y执行整数加法。

附：我还应该注意到你的问题的部分原因与document.getElementById("number").value是一个字符串的事实有关，迫使type conversion发生

加法'+'连接字符串几乎所有数学运算都将值转换为数字。一个值得注意的例外是加号+。如果添加的值之一是字符串，则另一个也转换为字符串。

然后，它连接（连接）它们：

alert( 1 + '2' ); // '12' (string to the right)
alert( '1' + 2 ); // '12' (string to the left)

仅当至少一个参数是字符串时才会发生这种情况。否则，值将转换为数字。

这意味着其中一个操作数（同样，document.getElementById（“number”）。value是一个字符串）在一个字符串的加法操作中强制它们成为字符串并连接起来。