JavaScript数字显示异常：加法变字符串拼接，parseInt无效求助

嘿，这个坑我刚学JS的时候也踩过，太懂你的困惑了！

问题根源 #

从HTML输入框(<input>)获取的value属性默认是字符串类型。在JS里，+运算符有两个作用：

• 当两边都是数字时，做算术加法
• 只要有一边是字符串，就会触发字符串拼接

而*、-、/这些算术运算符会自动把字符串隐式转换成数字，所以乘法能正常工作，但加法就变成拼接啦。

你说用了parseInt()但没解决，大概率是只转换了其中一个变量，或者没指定parseInt的第二个参数（基数）——如果不写基数，JS可能会把以0开头的数字当成八进制处理，导致转换错误。

修复方案 #

你需要把两个输入值都转换成数字类型，这里给你几种靠谱的方法：

方法1：带基数的parseInt()

适合处理整数输入，记得加上十进制基数避免坑：

function myfunction() {
  // 第二个参数10表示十进制，防止八进制解析问题
  var x = parseInt(document.getElementById("fname").value, 10);
  var y = parseInt(document.getElementById("lname").value, 10);
  
  // 先判断是否为有效数字
  if (isNaN(x) || isNaN(y)) {
    document.getElementById("output").innerText = "请输入有效的数字！";
    return;
  }
  
  var z = x + y;
  document.getElementById("output").innerText = z;
}

方法2：用Number()转换

如果需要支持小数运算（比如输入3.5+2.5），parseInt()会截断小数，这时候用Number()更合适：

function myfunction() {
  var x = Number(document.getElementById("fname").value);
  var y = Number(document.getElementById("lname").value);
  
  if (isNaN(x) || isNaN(y)) {
    document.getElementById("output").innerText = "请输入有效的数字！";
    return;
  }
  
  var z = x + y;
  document.getElementById("output").innerText = z;
}

方法3：简洁的+前缀

这是JS里快速转数字的小技巧，效果和Number()完全一致：

function myfunction() {
  var x = +document.getElementById("fname").value;
  var y = +document.getElementById("lname").value;
  
  if (isNaN(x) || isNaN(y)) {
    document.getElementById("output").innerText = "请输入有效的数字！";
    return;
  }
  
  var z = x + y;
  document.getElementById("output").innerText = z;
}

额外提醒 #

如果用户输入了非数字内容，转换后会得到NaN（非数字），所以一定要加个判断，避免页面显示奇怪的结果哦～

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