JavaScript 中「text+='」」的工作原理範例-js教程-PHP中文網

JavaScript 中「text+='」」的工作原理範例

WBOY

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

轉載

1192 人瀏覽過

$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>

登入後複製