將在新分頁開啟
TECHNICAL ARTICLES

JavaScript Template Literals 教學:用反引號與 ${} 取代 + 字串串接

Template literals(模板字面值)是 JavaScript 中用反引號(`)包住字串、並用 ${…
2026-09-08
技術文章

Template literals(模板字面值)是 JavaScript 中用反引號(`)包住字串、並用 ${變數} 直接插入變數值的語法,用來取代傳統用 + 號串接字串的寫法。 它能讓程式碼更好讀、支援多行字串,也能降低串接字串時漏字、格式跑掉的機率。

什麼是字串串接?為什麼需要 Template Literals?

在網頁開發中,我們常常需要把變數(例如姓名、年齡、商品名稱)組合進一段文字或 HTML 裡,顯示給使用者看。這個「把文字和變數拼在一起」的動作,就叫做字串串接。

在 Template Literals 出現以前,JavaScript 開發者經常使用 + 運算子來串接字串。這種寫法在變數一多、內容一長的時候,會變得很難維護。ES6(2015 年)之後,JavaScript 新增了 template literals,用反引號取代雙引號/單引號,搭配 ${} 插入變數,大幅改善了這個問題。

壞範例:用 + 串接 HTML 字串

以下是一個常見的新手寫法,用 + 號一段一段拼出 HTML:

function introduce(name, age) {
  var html = '<div class="intro">' +
    '<h2>' + name + '</h2>' +
    '<p>年齡:' + age + ' 歲</p>' +
    '<p>你好,我是' + name + ',今年' + age + '歲!</p>' +
    '</div>';
  return html;
}

這種寫法的痛點

  • 可讀性差:一堆 + 和引號交錯,很難一眼看出最後產出的 HTML 長怎樣。
  • 符號一多就容易出錯:少一個 +、引號沒對齊,很多情況會直接產生語法錯誤(SyntaxError);就算沒報錯,也容易出現漏加空格、內容黏在一起等不易察覺的輸出問題。
  • 多行字串很痛苦:輸出多行 HTML 時,得不斷用 + 換行串接,或手動塞 \n。
  • 改動成本高:要在字串中間插入新變數,得重新計算引號和 + 的位置。

好範例:用 Template Literals 改寫

Template literals 用反引號(`)包住整段字串,變數則用 ${變數名} 直接寫在該出現的位置:

function introduce(name, age) {
  return `
    <div class="intro">
      <h2>${name}</h2>
      <p>年齡:${age} 歲</p>
      <p>你好,我是${name},今年${age}歲!</p>
    </div>
  `;
}

console.log(introduce('小明', 25));

Template Literals 解決了什麼

項目+ 串接Template Literals
變數插入方式‘文字’ + 變數 + ‘文字’文字${變數}文字
多行字串需要額外用 \n 或多個 + 處理直接按 Enter 換行即可
可讀性符號較多,要在腦中拼湊結構接近最終輸出結果
維護性字串一長就難修改插入或調整變數位置較清楚

兩種寫法的輸出結果完全一樣,差別在於程式碼好不好讀、好不好維護。

基礎語法快速對照

範例中出現的幾個關鍵字,先用一句話理解意思,細節之後會有獨立文章拆解:

語法一句話理解
const / let / var宣告變數(存資料的容器)。const 不能重新賦值,let 可以,var 是較舊的寫法。
function 名稱(參數) { }定義一個函式,像一台機器:丟進參數 → 內部處理 → 產出結果。
return函式的出口,把處理結果交還給呼叫它的地方。
console.log(…)把變數或運算結果印在瀏覽器主控台或終端機,方便檢查。

以這篇範例來說:

function introduce(name, age) {
  return `你好,我是${name},今年${age}歲!`;
}

console.log(introduce('小明', 25));
// ① 呼叫 introduce,傳入 '小明' 和 25
// ② 函式內部:name = '小明', age = 25
// ③ 組出字串 "你好,我是小明,今年25歲!"
// ④ return 把字串交出來
// ⑤ console.log 印在畫面上

輸出結果:

你好,我是小明,今年25歲!

想更深入了解 const/let/var 的差異、function 與 return 的運作原理,可以參考後續獨立整理的 JavaScript 新手系列文章。

網站製作情境:Template Literals 什麼時候會用到?

在實際網站開發中,我們常常需要根據資料動態產生一段 HTML,例如作品集卡片、商品清單、留言列表等。這時 Template Literals 可以讓 HTML 結構保持清楚,同時把 JavaScript 變數插入指定位置:

const title = '網站設計';
const url = '/portfolio';

const html = `
  <a href="${url}" class="portfolio-card">
    <h2>${title}</h2>
  </a>
`;

${} 裡面不是只能放變數,也可以放運算式,例如直接做數學運算:

const price = 100;
console.log(`總價:${price * 2} 元`);
// 總價:200 元

這種寫法在需要用 JavaScript 動態組出畫面內容時非常常見,是從「靜態頁面」進階到「互動式網站」很關鍵的一步。

動手練習

試著把 introduce(‘小明’, 25) 改成你自己的名字和年齡,在瀏覽器主控台跑一次,確認自己能說出最後印出的字串是什麼。接著可以挑戰:在 introduce 函式裡再多加一個參數(例如 city),並用 ${city} 把它放進輸出的句子中。

常見問題(FAQ)

Template Literals 一定要用反引號嗎?

是。單引號 ‘ 和雙引號 ” 無法使用 ${} 進行變數插值,只有反引號 ` 支援這個語法。

${} 裡面只能放變數嗎?

不是,也可以放 JavaScript 運算式,例如 總價:${price * 2} 元,${} 裡的內容會先被計算出結果,再插入字串中。

Template Literals 可以寫 HTML 嗎?

可以,這是它很常見的用途之一。不過要注意:如果把使用者輸入的內容直接插入 HTML 字串中,可能產生 XSS(跨站腳本攻擊)風險,實務上需要額外做資料過濾或跳脫處理。

小結

  • Template literals 用反引號 + ${} 取代 + 串接,語法更接近最終輸出結果,也支援多行字串與運算式插值。
  • 在網站開發中,常用於根據資料動態組出 HTML 結構。
  • 想完整看懂範例中的 const/function/return 等基礎語法,建議搭配 JavaScript 新手系列文章一起閱讀。

文章目錄