number类型input取值异常：变量a莫名加10的原因求解

嘿，这个问题其实是JavaScript里字符串与数字的隐式类型转换在搞鬼，而且你的测试场景刚好让这个问题看起来像是number_a被加了10，咱们一步步拆解：

核心问题：val()返回的是字符串，而非数字 #

你从input获取值时，$(this).val()返回的是字符串类型——哪怕input的type设为number也一样。而JavaScript里，当字符串和数字做+运算时，会把数字转换成字符串，执行字符串拼接，而不是你预期的算术加法。

为什么只有number_a出现“加10”的错觉？ #

结合你的代码和大概率的测试场景（我猜你是只修改a的值，b保持初始的数字0）：

• 初始状态：number_a=0（数字），number_b=0（数字），number_c=0（数字）
• 当你在a输入5，number_a被赋值为字符串"5"
• 执行number_a + number_b时，就是字符串"5"和数字0相加，JavaScript会把0转成字符串"0"，拼接结果是"50"
• 最后除以c（如果c还是0，就走else分支除以1），得到50——这看起来就像是5 + 10，但实际是字符串拼接成了"50"

如果修改b的值，你会发现number_b也会变成字符串，这时候number_a + number_b会变成两个字符串拼接（比如a=5、b=3，结果是"53"），就不会有“加10”的错觉了——这就是为什么你觉得只有a出问题的原因。

验证方法 #

你可以在calculate()里加一行日志，打印变量的类型，就能直观看到问题：

console.log(typeof number_a, typeof number_b, typeof number_c);

运行后会发现，修改过的input对应的变量类型是string，未修改的是number。

解决办法（你已经知道，但再明确下） #

每次赋值时把字符串转成数字，常用的三种方式：

• 使用parseInt()（记得指定进制，避免意外）：

  number_a = parseInt($(this).val(), 10);
  

• 使用parseFloat()（适合需要处理小数的场景）：

  number_a = parseFloat($(this).val());
  

• 使用一元+运算符快速转换：

  number_a = +$(this).val();
  

这样所有变量都会保持数字类型，+就会执行算术加法，结果就完全符合预期了。

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