資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 ECMAScript 6 中使用模板字串字面量？
在 JavaScript 的 ES6 版本中，引入了字面量。JavaScript 包含物件字面量、陣列字面量、數字字面量、正則表示式字面量等。此外，它還包含字串字面量。
字串字面量允許我們建立多行字串而無需任何反斜槓字元，將任何單詞或句子新增到引號中，並在字串之間新增變數和數學表示式。
語法
使用者可以按照以下語法在 ECMAScript 6 中使用模板字串字面量。
let string = `This is template literal string!`;
在以上語法中，我們使用了反引號（` `）來建立一個模板字面量字串。
示例 1（多行字串）
在下面的示例中，我們使用模板字面量字串來建立一個多行字串。每當我們用引號建立字串時，都需要使用‘
’字元來建立新行，但使用字串字面量，我們可以透過在新行中寫入字串來實現。
在 string1 中，新行是透過在新行中寫入字串建立的，在 string2 中，我們使用了‘
’字元來建立新行。使用者可以在輸出中觀察 string1 和 string2，它們看起來相同。
let string1 = `This is first line. This is the second line. This is the third line. This is the fourth line.`; console.log(string1); // added
character to create a multiline string. let string2 = "Welcome on the
TutorialsPoint!"; console.log(string2);
示例 2（字串中的引號）
我們可以使用模板字串字面量在字串內新增引號。當我們用雙引號建立字串時，我們只能在字串中新增單引號，當我們用單引號建立字串時，我們只能在字串中新增雙引號。
我們使用字串字面量在 stringQuote 變數的字串中添加了單引號。
<html>
<body>
<h2>Using the <i>template string literals</i> to add quotes in the string.</h2>
<div id = "output"></div>
</body>
<script>
var output = document.getElementById('output');
let stringQuotes = `This is a 'template string literals' with a quote.`;
output.innerHTML += stringQuotes + "<br/>";
let string1 = "This is 'similar to template string literals'." + "<br/>";
output.innerHTML += string1;
</script>
</html>
示例 3（字串中的變數）
在下面的示例中，我們在字串中進行了變數替換。通常，要將變數與字串一起使用，我們需要使用‘+’運算子並連線多個字串，但模板字串字面量允許我們直接在字串中新增變數。我們可以在 ${} 表示式中新增變數。
在 variableStr 變數的值中，我們插入了 name、job 和 timePeriod 變數。
<html>
<body>
<h2>Using the <i>template string literals </i> to add variables in the string.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let name = "Shubham";
let job = "Content writer";
let timePeriod = "1 Year";
let variableStr = `Using template string literals :- ${name} is a ${job} at TutorialsPoint from last ${timePeriod}.`;
output.innerHTML += variableStr + "<br/>";
let string = "Using Quotes :- " + name + " is a " + job + " at TutorialsPoint from last " + timePeriod + ". ";
output.innerHTML += string + "<br/>";
</script>
</html>
示例 4（字串中的表示式）
在這個示例中，我們將使用模板字串字面量在字串中新增數學表示式。在 sumString 中，我們在 ${} 內添加了數學表示式。使用者可以看到我們如何在字串字面量中對 num1 和 num2 求和。
此外，我們在 string2 中對 2 個值進行了乘法運算。
<html>
<body>
<h2>Using the <i> template string literals </i> to add expression in the string.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let num1 = 10;
let num2 = 40;
let sumString = `The sum of ${num1} and ${num2} is ${num1 + num2}`;
output.innerHTML += sumString + "<br>";
let string2 = `The multiplication of 20 and 5 is ${20 * 5}`;
output.innerHTML += string2 + "<br>";
</script>
</html>
示例 5（字串中的 HTML）
我們可以使用模板字串字面量建立一行 HTML 並將其新增到網頁中。在這個示例中，我們使用字串字面量建立了 HTML 列表，並使用 <div> 的 innerHTML 屬性將行 HTML 新增到網頁中。
<html>
<body>
<h2>Using the <i>template string literals</i> to add HTML to the document.</h2>
<div id = "output"> </div>
</body>
<script>
var output = document.getElementById('output');
let HTMLString = `<ul> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Five </li> </ul>`;
output.innerHTML = HTMLString;
</script>
</html>
使用者學習瞭如何在 JavaScript 中使用模板字串字面量。我們已經瞭解瞭如何建立多行字串、變數和表示式替換、新增引號以及使用模板字串字面量建立行 HTML。
199 次檢視
