初學者指南:深入了解 JavaScript 模板字串(Template Literals)

更新日期: 2024 年 10 月 16 日

在學習 JavaScript 時,字串操作是非常常見的任務。

傳統的字串連接方式使用加號(+)或 concat() 方法,這可能導致程式碼冗長且難以閱讀。

ES6 引入了模板字串(Template Strings),也稱為模板字面量(Template Literals),為字串操作提供了更簡潔、更強大的方式。

本文將為新手詳細介紹 JavaScript 中的模板字串。


什麼是模板字串?

模板字串是使用反引號(`)包裹的字串,它允許在字串中嵌入表達式和多行文本。

與傳統的單引號(')或雙引號(")字串相比,模板字串具有以下優勢:

  • 字串插值:可以在字串中直接嵌入變數或表達式。
  • 多行字串:支援直接書寫多行文本,無需使用換行符 \n
  • 嵌入表達式:可以在字串中執行函式或運算。

基本語法

定義模板字串

使用反引號定義模板字串:

const message = `這是一個模板字串`;

字串插值

在模板字串中,可以使用 ${expression} 語法嵌入變數或表達式。

範例:

const name = '小明';
const age = 20;
const greeting = `你好,我是${name},我今年${age}歲。`;

console.log(greeting);

輸出:

你好,我是小明,我今年20歲。

解釋:

  • ${name} 會被替換為變數 name 的值。
  • ${age} 會被替換為變數 age 的值。

多行字串

模板字串支援直接書寫多行文本,無需特殊字符。

範例:

const poem = `靜夜思
床前明月光,
疑是地上霜。
舉頭望明月,
低頭思故鄉。`;

console.log(poem);

輸出:

靜夜思
床前明月光,
疑是地上霜。
舉頭望明月,
低頭思故鄉。

解釋:

  • 直接在模板字串中換行,輸出時會保留換行符。

嵌入表達式

除了變數,模板字串還可以嵌入任意的 JavaScript 表達式。

範例:

const a = 5;
const b = 10;
console.log(`五加十等於${a + b}`);
console.log(`今天的日期是:${new Date().toLocaleDateString()}`);

輸出:

五加十等於15
今天的日期是:2024/10/16 (根據當前日期)

解釋:

  • ${a + b} 計算表達式的結果並插入到字串中。
  • ${new Date().toLocaleDateString()} 調用函式並插入返回值。

嵌套模板字串

可以在模板字串中嵌套模板字串,實現更複雜的字串構建。

範例:

const person = { name: '小紅', age: 18 };
const introduction = `大家好,我叫${person.name}${person.age >= 18 ? '我是成年人' : '我還未成年'}`;

console.log(introduction);

輸出:

大家好,我叫小紅,我是成年人。

解釋:

  • 使用三元運算子 ${person.age >= 18 ? '我是成年人' : '我還未成年'} 進行條件判斷。

標籤模板(高級用法)

標籤模板是一種高級用法,可以對模板字串進行自訂處理。

範例:

function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        return `${result}${str}<span>${values[i] || ''}</span>`;
    }, '');
}

const name = '小李';
const hobby = '程式設計';

const result = highlight`姓名:${name},愛好:${hobby}`;

console.log(result);

輸出:

姓名:<span>小李</span>,愛好:<span>程式設計</span>。

解釋:

  • highlight 函式對模板字串進行處理,將變數部分用 <span> 標籤包裹。
  • 標籤模板的第一個參數是字串陣列,後面的參數是所有的變數。

注意事項

  • 反引號使用:模板字串必須使用反引號(`),不能使用單引號或雙引號。
  • 安全性:在嵌入使用者輸入時,需注意防範 XSS 攻擊,避免直接將不可信的資料插入到 HTML 中。
  • 相容性:模板字串是 ES6 語法,需確保執行環境支援,或者使用編譯工具(如 Babel)進行轉換。

總結

模板字串為 JavaScript 的字串操作帶來了極大的便利:

  • 簡化了字串串接的語法。
  • 提高了程式碼的可讀性和可維護性。
  • 支援多行字串和嵌入表達式。

對於新手來說,掌握模板字串將有助於編寫更簡潔、高效的程式碼。建議在日常編碼中多加練習和使用。


參考資料

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *