JavaScript加法运算符异常求助：运算结果不符预期如何修复？

嘿，这俩问题都是JavaScript里隐式类型转换搞的小乌龙，咱们拆开说清楚：

这事儿核心原因是你操作的不是两个数字，而是至少有一个操作数是字符串类型！JavaScript里的+运算符有两种行为：

• 当两边都是数字时，才会做加法运算；
• 只要有一边是字符串，它就会把另一边也转成字符串，然后执行拼接操作。

比如你实际写的代码可能是下面这些情况之一：

"20" + 10; // 输出"2010"
20 + "10"; // 输出"2010"
"20" + "10"; // 输出"2010"

修复方法：主动把字符串转成数字再相加 #

有几种简单可靠的方式：

• 使用parseInt()（整数）或parseFloat()（小数）转换：

  parseInt("20") + 10; // 输出30
  20 + parseFloat("10"); // 输出30
  

• 使用一元加号+强制转换为数字：

  +"20" + 10; // 输出30
  20 + +"10"; // 输出30
  

• 如果是从输入框、表单这类地方获取的值（默认都是字符串），一定要先转类型再计算！

这说明你的代码里偷偷做了类型转换！正常情况下两个字符串相加肯定会拼接成"1020"，能得到30只有一种可能：你在代码里把x和y转成数字了——比如不小心写了parseInt(x) + parseInt(y)，或者用了一元加号+x + +y，甚至可能在定义x/y之前就有其他转换逻辑。

修复方法：确保操作数是字符串，直接拼接 #

• 如果x和y已经是字符串类型，直接保留var z = x + y就会得到"1020"，检查一下代码里有没有多余的parseInt/parseFloat或者一元加号，把那些去掉就行；
• 如果x/y原本是数字，想转成字符串拼接的话，可以主动转类型：

  var x = String(10);
  var y = String(20);
  var z = x + y; // 输出"1020"
  

• 也可以用ES6的模板字符串更直观：

  var z = `${x}${y}`; // 输出"1020"
  

小提醒 #

JavaScript的隐式类型转换虽然灵活，但很容易踩坑。记住+的核心规则：见字符串就拼接，全数字才加法。如果想明确控制行为，一定要主动做类型转换，别依赖JS的自动转换哦！

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