資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript 中 ES6/ECMA6 模板字面量無效？
模板字面量是 ECMAScript 6 (ES6) JavaScript 語言中強大而有用的功能。但是，有時模板字面量在您的程式碼中可能無法正常工作。
本文將討論您可能會遇到的一些常見的模板字面量問題，以及解決這些問題的潛在解決方案。此外，我們將概述模板字面量是什麼以及如何使用它們來建立更高效且更易讀的程式碼。
模板字面量在ES6之前被稱為模板字串。模板字面量用反引號（` `）括起來，而不是字串中的引號。佔位符由美元符號和花括號（$(表示式)）表示，在模板字面量中是允許的。如果我們想使用表示式，我們可以使用($(表示式))符號將其放在反引號內。
語法
以下是模板字面量的語法
var str = `string value`;
讓我們深入瞭解本文，瞭解更多關於 ES6/ECMA6 模板字面量的資訊。
多行字串
從普通字串建立多行字串時，我們必須使用轉義序列
。相反，在模板字面量中不需要使用
，因為字串只有在遇到反引號（`）字元時才會結束。
示例
在下面的示例中，我們正在建立一個多行字串模板。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<p>Tutorialspoint</p>
<script>
let text =`Welcome to Tp`;
document.getElementById("tutorial").innerHTML = text;
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含我們在上述指令碼中使用的文字的輸出，當事件觸發時，它將顯示在 Web 瀏覽器上。
示例
在下面的示例中，我們使用模板字面量允許在字串中使用表示式。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let amount = 11;
let VAT = 0.5;
let total = `NET: ${(amount * (1 + VAT)).toFixed(2)}`;
document.getElementById("tutorial").innerHTML = total;
</script>
</body>
</html>
執行上述指令碼後，Web 瀏覽器會顯示在事件觸發時獲得的值，如上述指令碼在網頁上使用的值。
示例
考慮下面的示例，我們在這裡使用模板字面量允許在字串中使用變數。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let firstName = "minion";
let lastName = "angrybird";
let text = `Welcome ${firstName}, ${lastName}!`;
document.getElementById("tutorial").innerHTML = text;
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含事件觸發時獲得的文字的輸出，並將其顯示在 Web 瀏覽器上。
示例
讓我們看看另一個示例，其中模板字面量在字串內同時使用單引號和雙引號。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let text = `johnny johnny "yes-papa."`;
document.getElementById("tutorial").innerHTML = text;
</script>
</body>
</html>
執行上述指令碼後，事件將被觸發，Web 瀏覽器將文字顯示在網頁上。
更新於：2023年1月18日
1K+ 次瀏覽
廣告