JavaScript 中“text+="””的工作原理示例

$JavaScript 中“text+=\$

在本教程中，我们将讨论为什么需要在 Javascript 中使用“text += " " ”指示符。

这里的指示是将一段代码分配给一个变量。这里的变量是'text'，'+'是字符串连接运算符，'='是赋值运算符，“'”保存一行代码，'“”'包含要添加的字符串。

程序员必须编写冗长的代码块，例如附加HTML块、附加字符串等。变量按顺序存储所有值并在dom中显示整个数据。转义内容中的单引号。

在 JavaScript 中，+= 运算符用于向变量添加值。 += 运算符右侧的值添加到左侧的变量中，并将结果存储在变量中。

以下是一些如何在 JavaScript 中使用 text += "" 的示例 -

let text = "Hello";
text += ""; // text is now "Hello"

let num = 1;
num += 1; // num is now 2

let arr = [1, 2, 3];
arr += [4, 5, 6]; // arr is now [1, 2, 3, 4, 5, 6]

在第一个示例中，+= 运算符用于将空字符串连接到文本变量。这不会更改文本变量的值，因为空字符串没有任何字符。

在第二个示例中，+= 运算符用于将 num 变量加 1。这会将 num 的值增加 1。

在第三个示例中，+= 运算符用于连接两个数组。这会将两个数组的元素组合成一个数组。

Javascript 中指示符 'text +=" " ' 的用途

语法 1

var dataStr = 'content 1';
dataStr += 'content 2'+'content 3';
document.getElementById('id').innerHTML = dataStr;

上面的语法将串联数据分配给innerHTML。

示例 1

在这个程序中，变量'htmlStr'保存了HTML代码块，并赋值给这个变量来设置innerHTML。在第一个 HTML 块之后，有一个分号来结束该块。程序使用连接运算符和赋值运算符将剩余的代码块附加到代码末尾。

<html>
<body>
   <h2> Javascript program that illustrates <i>variable += 'content' </i> </h2>
   <div id="htmlWrap"> </div>
   <script>
      
      //Save HTML code block in a variable
      var htmlStr = '<div class="div1">';
      htmlStr += '<h3>H3 tag</h1>' + '<p>P tag</p>' +
         '<strong>Escaping quotes' to avoid syntax error</strong>' +
         '</div>';
      
      //Set the code block to wrapper dom
      document.getElementById("htmlWrap").innerHTML = htmlStr;
   </script>
</body>
</html>

语法 2

var dataStr = 'content';
document.getElementId('id').innerHTML += dataStr;

上面的语法连接数据并将其分配给innerHTML本身。

示例 2

或者，您也可以直接在innerHTML 中添加多行。查看下面的代码。编写innerHTML += 'content' 即可完成这项工作。

<html>
<body>
   <h2>Javascript program that illustrates <i>innerHTML += 'content'</i></h2>
   <div id="wrap">
      <p> A default text. </p>
   </div>
   <button onclick="moreData();">Add More</button>
   <script>
      function moreData() {
         document.getElementById("wrap").innerHTML +=
            "<h3>This is the text by user.</h3>";
      }
   </script>
</body>
</html>

结论

本教程告诉我们在 Javascript 中多行代码的情况下需要连接和赋值。这种方法确保了代码的整洁和可重用。当您在网页上的多个位置需要相同的 html 内容时，这种编写方式会有所帮助。当您在单行中编写较长的代码时，它还可以避免出现语法格式错误的可能性。

我们已经看到了两种方法来做到这一点。大家可以根据自己的节目需求选择一种方式。

以上就是JavaScript 中“text+="””的工作原理示例的详细内容，更多请关注编程之家其它相关文章！