为什么JavaScript中输入框数字相加4+2输出42而非预期的6？

你从<input>元素的value属性获取到的值固定为字符串类型，JavaScript中+运算符在遇到字符串和数字相加时，会优先执行字符串拼接逻辑，而非算术加法。你输入的4被识别为字符串"4"，和数字2相加时2会被转为字符串"2"，最终拼接得到结果"42"。

只要将获取到的value值显式转换为数字类型即可，常用转换方式有以下几种：

• 用Number()构造函数做通用数字转换，支持整数和小数
• 用一元加运算符+做隐式转换，写法更简洁
• 仅需要整数时用parseInt()，需要保留小数时用parseFloat()

修正后的完整代码如下：

<input type="number" id="number1"> <br>
<button onclick="sayHello();">HI</button>
<p id="texthere"></p>

<script>
function sayHello() {
  // 此处用Number做转换，也可以替换为你需要的其他转换方式
  let n1 = Number(document.getElementById("number1").value);
  document.getElementById("texthere").innerHTML = n1 + 2;
}
</script>

内容的提问来源于stack exchange，提问作者Michel