ES6之模版字符串如何使用

ES6之模版字符串如何使用

在ES6（ECMAScript 2015）中，模版字符串（Template Literals）是一種新的字符串表示方式，它提供了更強大、更靈活的字符串處理能力。模版字符串使用反引號（`）包裹，而不是傳統的單引號或雙引號。本文將詳細介紹模版字符串的使用方法及其優勢。

1. 基本用法

模版字符串的基本用法與普通字符串類似，但有一些顯著的區別。首先，模版字符串可以跨行，而不需要使用換行符（\n）或字符串拼接。

const str = `這是一個
多行字符串`;
console.log(str);

輸出結果：

這是一個
多行字符串

2. 嵌入表達式

模版字符串最強大的功能之一是可以在字符串中嵌入表達式。通過使用 ${} 語法，可以將變量、表達式或函數調用直接嵌入到字符串中。

const name = "Alice";
const age = 25;
const greeting = `你好，我的名字是 ${name}，我今年 ${age} 歲。`;
console.log(greeting);

輸出結果：

你好，我的名字是 Alice，我今年 25 歲。

2.1 嵌入表達式示例

const a = 10;
const b = 20;
const result = `a + b 的結果是 ${a + b}`;
console.log(result);

輸出結果：

a + b 的結果是 30

2.2 嵌入函數調用

function getFullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

const firstName = "John";
const lastName = "Doe";
const fullName = `我的全名是 ${getFullName(firstName, lastName)}`;
console.log(fullName);

輸出結果：

我的全名是 John Doe

3. 標簽模版

標簽模版（Tagged Templates）是模版字符串的另一種高級用法。通過在模版字符串前添加一個函數名，可以將模版字符串作為參數傳遞給該函數。這個函數可以對模版字符串進行處理，并返回處理后的結果。

3.1 基本用法

function tag(strings, ...values) {
  console.log(strings); // 輸出模版字符串的靜態部分
  console.log(values);  // 輸出嵌入的表達式部分
  return "處理后的字符串";
}

const name = "Alice";
const age = 25;
const result = tag`你好，我的名字是 ${name}，我今年 ${age} 歲。`;
console.log(result);

輸出結果：

["你好，我的名字是 ", "，我今年 ", " 歲。"]
["Alice", 25]
處理后的字符串

3.2 實際應用

標簽模版在實際開發中有很多應用場景，例如國際化、HTML模板生成、SQL查詢等。

3.2.1 國際化

function i18n(strings, ...values) {
  const translations = {
    "Hello, my name is": "你好，我的名字是",
    "and I am": "，我今年",
    "years old.": "歲。"
  };
  let result = "";
  strings.forEach((string, i) => {
    result += translations[string] || string;
    if (values[i] !== undefined) {
      result += values[i];
    }
  });
  return result;
}

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

輸出結果：

你好，我的名字是 Alice，我今年 25 歲。

3.2.2 HTML模板生成

function htmlEscape(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    result += values[i]
      .toString()
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
    result += strings[i + 1];
  }
  return result;
}

const userInput = "<script>alert('XSS')</script>";
const safeHTML = htmlEscape`<div>${userInput}</div>`;
console.log(safeHTML);

輸出結果：

<div>&lt;script&gt;alert(&#039;XSS&#039;)&lt;/script&gt;</div>

4. 多行字符串與縮進

模版字符串可以輕松處理多行字符串，但在處理縮進時需要注意。模版字符串會保留所有的空格和換行符，因此在編寫多行字符串時，縮進可能會影響最終輸出。

4.1 多行字符串示例

const html = `
  <div>
    <h1>標題</h1>
    <p>段落內容</p>
  </div>
`;
console.log(html);

輸出結果：

  <div>
    <h1>標題</h1>
    <p>段落內容</p>
  </div>

4.2 去除縮進

為了去除多余的縮進，可以使用 trim() 方法或自定義函數。

const html = `
  <div>
    <h1>標題</h1>
    <p>段落內容</p>
  </div>
`.trim();
console.log(html);

輸出結果：

<div>
  <h1>標題</h1>
  <p>段落內容</p>
</div>

5. 總結

模版字符串是ES6中引入的一項強大功能，它不僅簡化了字符串的拼接和格式化，還提供了嵌入表達式和標簽模版等高級特性。通過合理使用模版字符串，可以顯著提高代碼的可讀性和可維護性。

在實際開發中，模版字符串常用于以下場景：

• 動態生成HTML模板
• 國際化處理
• SQL查詢拼接
• 日志記錄

掌握模版字符串的使用方法，將有助于你在JavaScript開發中更加高效地處理字符串操作。