掌握 JavaScript 中的模板文字

JavaScript 中的模板文字

ES6 中引入的模板文字是在 JavaScript 中處理字串的現代方法。它們為字串插值、多行字串以及直接在字串中嵌入表達式提供了更簡單、更易讀的語法。

範本文字使用反引號 (`) 而不是引號（' 或 "）。

---

1.基本文法

範本文字用反引號 (`) 括起來。

範例：

const message = `Hello, world!`;
console.log(message); // Output: Hello, world!

---

2.字串內插

模板文字允許使用 ${} 語法直接在字串中嵌入表達式和變數。

範例：

const name = "Alice";
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Output: Hello, my name is Alice and I am 25 years old.

您也可以包含表達式：

const x = 10;
const y = 20;
console.log(`The sum of x and y is ${x + y}.`);
// Output: The sum of x and y is 30.

---

3.多行字串

範本文字可以輕鬆建立跨多行的字串，而無需轉義字元。

範例：

const multiLine = `This is a string
that spans multiple lines
using template literals.`;
console.log(multiLine);
// Output:
// This is a string
// that spans multiple lines
// using template literals.

---

4.嵌入函數與表達式

您可以在範本文字中嵌入函數或複雜表達式。

範例：

const add = (a, b) => a + b;
console.log(`The result of 5 + 10 is ${add(5, 10)}.`);
// Output: The result of 5 + 10 is 15.

---

5.標記模板

標記範本可讓您透過使用特殊函數處理範本文字來自訂範本文字的行為。

範例：

function tag(strings, ...values) {
  console.log(strings); // Array of string literals
  console.log(values);  // Array of expression values
  return "Custom output";
}

const result = tag`Hello, ${name}. You are ${age} years old.`;
console.log(result);
// Output:
// ["Hello, ", ". You are ", " years old."]
// ["Alice", 25]
// Custom output

標記範本對於國際化或清理使用者輸入等高階用例非常有用。

---

6.轉義反引號

您可以在範本文字中包含反引號，方法是使用反斜線 () 對其進行轉義。

範例：

const str = `Here is a backtick: \``;
console.log(str);
// Output: Here is a backtick: `

---

7.實際用例

A.動態 HTML 產生

範本文字簡化了動態 HTML 字串的建立：

const name = "Alice";
const html = `<div>
  <h1 id="name-s-Profile">${name}'s Profile</h1>
  <p>Welcome to the profile page of ${name}.</p>
</div>`;
console.log(html);
// Output:
// <div>
//   <h1 id="Alice-s-Profile">Alice's Profile</h1>
//   <p>Welcome to the profile page of Alice.</p>
// </div>

B.記錄除錯資訊

模板文字可以讓偵錯更具可讀性：

const x = 42;
console.log(`The value of x is: ${x}`);
// Output: The value of x is: 42

C.建構 SQL 查詢

範本文字有助於動態建立 SQL 查詢：

const message = `Hello, world!`;
console.log(message); // Output: Hello, world!

---

8.總結

• 模板文字使字串更加強大和可讀。
• 主要功能包括字串插值、多行字串和標記模板。
• 它們廣泛用於現代 JavaScript 中，用於動態內容產生和字串操作。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握 JavaScript 中的模板文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！