JavaScript 模板字面量：初学者的友好指南

你好啊，有抱負的程式設計師！今天，我們將踏上一段令人興奮的旅程，探索 JavaScript 模板字面量的世界。別擔心如果你完全不懂程式設計——我會成為你的友好導師，逐步解析一切。那麼，我們就開始吧！

JavaScript - Template Literals

模板字面量是什麼？

在我們深入細節之前，先從一個簡單的問題開始：你有沒有嘗試過在 JavaScript 中建立一個複雜的字串？如果你有，你可能會遇到一堆引號和加號的混亂。嗯，模板字面量來拯救我們的日子！

模板字面量是 JavaScript 中的一種特殊類型的字串，讓我們這些程式師的生活變得更加輕鬆。它們在 ES6（ECMAScript 2015）中被引入，並從那時起讓字串變得更易於管理。

基础

讓我們從一個基本的例子開始：

let name = "Alice";
console.log(`Hello, ${name}!`);

輸出：

Hello, Alice!

在這個例子中，我們使用反引號 () 而不是引號來創建我們的字串。${name}的部分被稱為佔位符。JavaScript 將它替換為name` 變量的值。

把它想像成 Mad Libs 遊戲——我們在字串中留出空白，然後 JavaScript 為我們填滿！

為什麼使用模板字面量？

現在，你可能會想，「我為什麼要在意模板字面量？」讓我告訴你它們為什麼這麼棒：

多行字串：使用模板字面量，創建多行字串簡直是小菜一碟。
表達式插入：你可以輕鬆地在你的字串中插入 JavaScript 表達式。
可讀性：它們讓你的代碼變得更加易於閱讀和理解。

讓我們看一些例子，以看到這些好處在實際應用中的效果。

模板字面量的實際應用例子

多行字串

記得上個使用 '\n' 换行的日子嗎？那些日子已經过去了！

let poem = `
玫瑰是紅的，
紫羅蘭是藍的，
模板字面量很棒，
你也是！
`;

console.log(poem);

輸出：

玫瑰是紅的，
紫羅蘭是藍的，
模板字面量很棒，
你也是！

看起來多麼容易？不需要連接或轉義字符！

表達式插入

模板字面量不僅僅是變量——你可以在佔位符中使用任何 JavaScript 表達式。

let a = 5;
let b = 10;
console.log(`數字 ${a} 和 ${b} 的總和是 ${a + b}。`);
console.log(`數字 ${a} 大於 ${b} 嗎？${a > b ? '是' : '不是'}.`);

輸出：

數字 5 和 10 的總和是 15。
數字 5 大於 10 嗎？不是。

在第二行中，我們甚至在使用佔位符時使用了三元運算符。這多有型！

HTML 模板

模板字面量非常適合創建 HTML 模板：

let user = {name: "John", age: 30, job: "Developer"};

let html = `
<div class="user-card">
<h2>${user.name}</h2>
<p>年齡: ${user.age}</p>
<p>職業: ${user.job}</p>
</div>
`;

console.log(html);

輸出：

<div class="user-card">
<h2>John</h2>
<p>年齡: 30</p>
<p>職業: Developer</p>
</div>

這讓創建動態 HTML 變得如此容易！

JavaScript 嵌套模板字面量

現在，讓我們將事情提升一個層次，使用嵌套的模板字面量。是的，你可以在其他模板字面量內部放置模板字面量！

let fruits = ['apple', 'banana', 'orange'];

let html = `
<ul>
${fruits.map(fruit => `<li>${fruit}</li>`).join('')}
</ul>
`;

console.log(html);

輸出：

<ul>
<li>apple</li><li>banana</li><li>orange</li>
</ul>

在這裡，我們使用 map 函數為每種水果創建一個列表項，然後將它們連接成一個單一字串。這就像模板字面量的套娃！

模板字面量的方法

雖然模板字面量本身沒有方法，但有一個強大的功能叫做「標簽模板」，它允許你定義一個函數來處理模板字面量。以下是一些常見用例的表格：

方法	描述	示例
原始字符串	讀取原始字符串內容	`String.raw\`Hello\n\tWorld``
自定標簽	為模板字面量定義自定義處理	`myTag\`Hello ${name}``
國際化	創建多語言字符串	`i18n\`Hello``
样式化	生成 CSS-in-JS	`styled.div\`color: red;``

結論

好了，各位！我們一起穿越了模板字面量的土地，從基本使用到嵌套模板。這些強大的字符串工具可以讓你的代碼更乾淨、更易於閱讀和更靈活。

記住，編程就是讓你的生活變得更容易，而模板字面量正是這樣做的。它們就像 JavaScript 字符串中的瑞士軍刀——多用途、方便，一旦你開始使用它們，你會想知道沒有它們你如何生活！

所以，勇往直前，實驗這些概念在你自己的代碼中。在你意識到之前，你將會成為模板字面量的專家，輕鬆地創建美麗、動態的字符串。

快樂編程，願你的字符串總是完美地模板化！

Credits: Image by storyset