为何JavaScript中x += y与x = x + y表现不同？求详解

先看运行代码：

<p id="demo"></p>

<script>
const numbers = [2, 4, 6];

let start = 0;
for (let x of numbers) {
  start += x + "<br>";
}

document.getElementById("demo").innerHTML = start;
</script>
  
<br>
  
<p id="demo2"></p>

<script>
const numbers2 = [2, 4, 6];

let start2 = 0;
for (let x of numbers2) {
  start2 = start2 + x + "<br>";
}

document.getElementById("demo2").innerHTML = start2;
</script>

核心原因：运算顺序导致类型转换时机不同 #

两个写法的本质差异在于表达式的计算顺序，并非+=仅在第一次迭代做字符串拼接：

1. 第一个脚本的start += x + "<br>"
   这个写法等价于 start = start + (x + "<br>")，优先计算括号内的部分：

   • 每次迭代先算x + "<br>"：数值x和字符串相加，直接转为字符串（比如第一次得到"2<br>"）。
   • 再把start和这个字符串相加：
     • 第一次迭代时start是数值0，加字符串会触发类型转换，0转成字符串和"2<br>"拼接，得到"02<br>"，此时start变为字符串类型。
     • 后续迭代中，start已经是字符串，所有+=操作都是纯字符串拼接，最终结果是"02<br>4<br>6<br>"。

2. 第二个脚本的start2 = start2 + x + "<br>"
   这里的+是从左到右依次计算：

   • 第一次迭代先算start2 + x：数值0 + 2 = 2，还是数值类型；再算2 + "<br>"，数值转字符串得到"2<br>"，此时start2变为字符串。
   • 后续迭代同样是字符串拼接，最终结果是"2<br>4<br>6<br>"。

总结 #

两个脚本的差异完全来自运算顺序：第一个脚本先把x转成字符串再和初始数值0拼接，导致结果带0；第二个脚本先做数值加法再转字符串，初始0被直接加到2里，不会出现在最终字符串中。后续迭代里，两个脚本的+=和+操作都是纯字符串拼接，不存在“仅第一次做字符串拼接”的情况。

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