添加分配混乱，再次JavaScript

Question

According to Mozilla，Addition Assignment运算符 将右操作数的值添加到变量中 并将结果分配给变量。两个操作数的类型决定了添加的行为。 这是添加的行为：

• 如果两个表达式都是 numeric ，则添加。
• 如果两个表达式都是 strings ，则连接。
• 如果表达式是数字而另一个是字符串，则连接。

基本上，text+=i与text = text + i相同;这是事实。

好的，如果上述情况属实，那么当我将字符串"The number is "变量化为变量text时，下面的代码版本2中的为什么， 是不是每次都用新号码写字符串，如代码版本1那样？

对于答案，我不想用其他方式来编写。如果text+=i与text = text + i相同，我需要弄清楚为什么它的工作方式不同。

我每天都在使用JavaScript，但不管你信不信，这个简单+=让我无法进一步理解它，因为有太多的例子正在使用+=。

以下是代码版本1：

 <h1>JavaScript Loops</h1>
<p id="demo"></p>

<script>
  var text = "";
  var i;
  for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
</script>

以下是代码版本2，变量text变量化了字符串"The number is "：

<h1>JavaScript Loops</h1>
<p id="demo"></p>

<script>
var text ="The number is ";
var i;
for (i = 0; i < 5; i++) {
    text = text + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

Answer 1

您正在编写不同的代码。

a = a + b确实与a += b相同。

var text = "";
text += "The number is " + i + "<br>";

与：

相同

var text = "";
text = text + "The number is " + i + "<br>";

但它与以下不一样：

var text = "The number is ";
text = text + i + "<br>";

你拥有的是什么。

Answer 2

对于这样的问题，使用 console.log 查看正在发生的事情会非常有用。

var text ="";
var i;
console.log("First approach");
for (i = 0; i < 5; i++) {
    text += "The number is " + i + "<br>";
    console.log("Iteration: "+i+" Text: "+text);
}

console.log("Second approach");
text ="The number is ";
for (i = 0; i < 5; i++) {
    text = text + i + "<br>";
    console.log("Iteration: "+i+" Text: "+text);
}

代码运行方式不同，因为在第一种情况下，您连接整个字符串＆＃34;数字是......＆＃34;在第二种情况下，用＆＃34初始化字符串;数字为＆＃34;然后只连接数字。