JavaScript 中'text+='””的工作原理示例-js教程-PHP中文网

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

WBOY

发布： 2023-09-06 11:21:11

转载

1220 人浏览过

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>

登录后复制