JavaScript 中「text+='」」的工作原理範例
- WBOY轉載
- 2023-09-06 11:21:111230瀏覽
在本教學中，我們將討論為什麼需要在 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+='」」的工作原理範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！