前言：關於「拼貼」的惡夢
假想你正坐在小學時的美勞課教室裡，美術老師發給全班每位同學各一張畫紙，並且要求製作一張「自我介紹」的海報。內容的製作方式規定用最原始的剪貼方法完成，海報內容的製作過程大概是這樣的：
- 先在報紙找到並剪下「我」這個字
- 拿起膠水把「我」這個字貼到畫紙
- 接著再剪下「叫做」這個字，貼上去
- 找不到合適的字，就改用彩色筆寫上自己的名字「王小明」
- 然後繼續剪下「，今年」這幾個字……
這種製作過程鐵定弄得滿手都是膠水不說，如果不小心貼歪了、或者字與字中間忘記留空白，整張海報就毀了。在 2015 年之前的 JavaScript 世界（ES5 時代），程式設計師處理文字（String）的方式，就很類似這種原始的剪貼方式，這種技巧被稱之為「字串串接（String Concatenation）」。
自從 ES6 版本發布後，JavaScript 獲得一項神級裝備：Template Literals（樣板字面值），俗稱樣板字串。它就像是一張設計好的「數位表單」，你只需要在空格裡填字，其他的格式電腦自動幫你處理好。我們就用大學生的日常情境，來聊聊這個讓 Web 開發者從地獄飛升到天堂的語法。
第一章：認識新朋友「反引號」
1. 鍵盤上的邊緣人
首先，我們要尋找開啟魔法的鑰匙。 低頭看看鍵盤左上角 Esc 鍵的下面、數字 1 鍵的左邊，有一個長得像毛毛蟲的符號 ~，在那個鍵上，還存在著一個不起眼的小撇號 `。這個小撇號有個英文名字叫做 Backtick，中文則叫它「反引號」。
- 舊時代的字串：使用單引號 ‘ ‘ 或雙引號 ” “
- 新時代的樣板字串：必須使用反引號 ` ` 包起來
2. 為什麼要換符號
我自己當初是蠻好奇：「單引號用得好好的，幹嘛多學一個符號？」深入研究才逐漸地理解因為單引號和雙引號在處理「文字裡的引號」時很痛苦，假設你要在螢幕上印出這句話：I’m a student at “NTU”.
如果你用單引號寫：
JavaScript
// 錯誤示範
let str = 'I'm a student...'; // 程式爆掉！電腦讀到 I 後面的單引號，就會以為字串結束了，後面的 m 會被當成亂碼。你必須用反斜線 \ 來轉譯（Escape），寫成 ‘I\’m a student…’。
但如果你用反引號：
JavaScript
// 完美示範
let str = `I'm a student at "NTU".`;在反引號的世界裡，單引號和雙引號都是普通的文字，完全不需要特殊處理。這就像是給了文字一個專屬的 VIP 包廂，外面怎麼吵都影響不了裡面。
第二章：填空遊戲的藝術「變數嵌入 (Interpolation) 」
這是 Template Literals 最強大的功能，也是它被稱為「樣板」的原因。
1. 舊時代的「加號」地獄
假設你在寫一則社群網站的歡迎訊息，內容包含兩個變數：name 和 count（代表通知數量）。
舊寫法：
JavaScript
const name = "傑哥";
const count = 5;
// 注意那個 '+' 和裡面無數個引號
const msg = "哈囉，" + name + "！您目前有 " + count + " 則新通知。";這種寫法有幾個致命缺點：
- 容易寫錯： 你很容易忘記加空格，變成 哈囉，傑哥！您目前有5則新通知。（黏在一起）
- 閱讀困難： 程式碼被切得支離破碎，很難一眼看出這句話原本長怎樣
- 手很酸： 你要一直按 Shift 鍵輸入雙引號或加號
2. 新時代的 ${} 魔法
讓我們看看樣板字串怎麼做？其實有點像是在玩填字遊戲。
新寫法：
JavaScript
const name = "傑哥";
const count = 5;
// 乾淨、直觀
const msg = `哈囉，${name}！您目前有 ${count} 則新通知。`;看到那個 ${} 了嗎？這就是魔法所在。
- 規則： 在反引號 `…` 的範圍內，只要看到 ${…}，電腦就會自動把花括號裡面的變數「算出來」，然後把結果填進去。
這就像是你在寫一張邀請卡：「親愛的 ________，誠摯邀請您參加…」，你不需要把紙剪開再黏貼名字，只需要在橫線上填寫名字就好。這讓程式碼的可讀性提升了一個檔次，你寫的程式碼長得就跟輸出的結果一模一樣。
第三章：詩人的救贖「多行字串 (Multi-line Strings) 」
1. 舊時代的 \n
想像你要在網頁上印出一首唐詩或者一段分行的地址。在以前，JavaScript 的字串是不允許直接換行的。如果你在程式碼裡按下 Enter 鍵，程式會報錯，你必須使用特殊的換行符號 \n (Newline)：
JavaScript
// 舊寫法：醜陋且難以排版
const poem = "床前明月光，\n" +
"疑是地上霜。\n" +
"舉頭望明月，\n" +
"低頭思故鄉。";這種用法就像從使用打字機寫詩保留下來的習慣，每次換行都要手動推一下機器，非常不直覺。
2. 新時代：想換行就換行
Template Literals 完全保留程式碼中的排版，如果你在反引號裡按下了 Enter，輸出的字串裡就會真的有一個 Enter。
JavaScript
// 新寫法：所見即所得
const poem = `
床前明月光，
疑是地上霜。
舉頭望明月，
低頭思故鄉。
`;這對於程式開發者寫 HTML 結構或是 SQL 查詢語句時非常有用，你可以把程式碼排版得漂漂亮亮，不用擔心被擠成一坨。
第四章：字串裡的微型計算機「表達式嵌入」
還記得剛剛說的 ${} 嗎？它不只能放變數，其實也可以放任何 JavaScript 的表達式（Expression）。
1. 什麼是表達式
簡單來說，只要能「算出一個值」的東西，都叫表達式，舉例：
- 1 + 1 是表達式（算出 2）
- age >= 18 是表達式（算出 true 或 false）
- Math.max(10, 20) 是表達式（算出 20）
2. 在字串裡算數學
假設你從網路買了 3 本書，每本 200 元，你想印出總價。
JavaScript
const price = 200;
const quantity = 3;
// 直接在 ${} 裡面做乘法！
const total = `您購買了 ${quantity} 本書，總金額是 ${price * quantity} 元。`;
console.log(total); // 印出：您購買了 3 本書，總金額是 600 元。你不需要先在外面宣告一個 let sum = price * quantity，直接在字串裡算就好，這就像是你的收據紙上內建了一台計算機。
3. 字串裡的邏輯判斷「三元運算子 (Ternary Operator) 」
三元運算子是一種進階撰寫技巧，在 Web 開發超級常用。假設你要顯示使用者的登入狀態，
JavaScript
const isLogin = true;
// 如果 isLogin 是 true，顯示「歡迎回來」；否則顯示「請先登入」
const status = `系統訊息：${ isLogin ? "歡迎回來" : "請先登入" }`;這讓你的文字具有了「智慧」，能根據狀況自動改變內容，而不用寫一大堆 if…else。
第五章：前端開發的神器「HTML 樣板」
HTML 樣板大概是 Template Literals 對 Web 開發貢獻最大的地方，假設你是系學會網站的管理員，打算把「幹部名單」顯示在網頁上。如果不使用現代網頁開發框架，只用原生 JavaScript 撰寫網頁的程式碼，你極有可能會寫到想哭出來。
舊寫法（字串拼接地獄）：
JavaScript
const member = { name: "小華", job: "公關長" };
const html = "<div class='card'>" +
" <h2>" + member.name + "</h2>" +
" <p>" + member.job + "</p>" +
"</div>";
// 只要少一個引號，網頁就破圖新寫法（樣板字串）：
JavaScript
const member = { name: "小華", job: "公關長" };
// 就像在寫真的 HTML 一樣！
const html = `
<div class="card">
<h2>${member.name}</h2>
<p>${member.job}</p>
</div>
`;看到差別了嗎？新寫法不僅保留 HTML 的縮排結構，讓我們一眼就能看出網頁長什麼樣子。而且，變數插入的位置也一目了然，這對於初學者理解「JavaScript 如何控制網頁」是非常好的寫作方法。
第六章：進階魔法「標籤樣板字面值 (Tagged Templates) 」
最後，我們來介紹一個聽起來很學術，但其實很有趣的功能：Tagged Templates。 這有點像是你把字串丟進一座「加工廠」裡，出來的東西會變不一樣，它的語法長這樣：
JavaScript
function highlight(strings, ...values) {
// 這裡可以寫邏輯來處理字串...
// 例如把變數都加上紅色的 HTML 標籤
}
const name = "小明";
const action = "睡過頭";
// 注意！highlight 後面直接接反引號，沒有括號！
const result = highlight`昨天 ${name} 又 ${action} 了`;雖然初學者可能暫時用不到這個，但如果你未來學習 React 這個熱門框架，你會看到一個很有名的套件叫 styled-components，它就是用這種魔法來寫 CSS 樣式的。
結語：從工具看見思維的轉變
JavaScript 的 Template Literals 不僅僅是一種「新語法」，也代表程式語言設計思維的轉變：從「配合電腦」轉向「配合人類」。
- 以前： 我們為了配合電腦的邏輯，把一句完整的話拆得支離破碎，用一堆加號黏起來。
- 現在： 電腦配合我們的閱讀習慣，讓我們用最自然的語氣、最直觀的排版來撰寫程式碼。
對於開發者來說，這就像是從手寫筆記進化到使用 Notion 或 iPad 筆記一樣。內容本質可能沒變，但工具的便捷性會讓你更願意去創作、去開發。下一次，當你在寫 JavaScript 或者試著做自己的個人網站時，看到那個要按 Shift 才能打出來的 + 號，請停下來想一想： 「是不是該按下鍵盤左上角的那個魔法鍵 ` 了？」
擁抱 Template Literals，讓你的程式碼像詩一樣優雅吧！
Leave a Reply