模板字符串核心優勢

  • ✅ 用 ` 包裹（不是單引號/雙引號！）
  • ✅ 支持 多行文本（直接回車換行）
  • ✅ 內插變量/表達式：用 ${} 直接塞內容
  • ✅ 代碼超清晰，再也不用寫 name + '你好' + age

🧪 代碼例子

1️⃣ 基礎內插（最常用！）

const name = "小明";
const age = 25;
const message = `你好，${name}！你今年${age}歲啦~`;

console.log(message); 
// 輸出：你好，小明！你今年25歲啦~

💡 為什麼好用？
普通寫法："你好，" + name + "！你今年" + age + "歲啦~" → 看着就頭大！

2️⃣ 多行文本（寫文檔/HTML超方便）

const blog = `
  <div class="post">
    <h2>今天天氣超好！</h2>
    <p>適合出去野餐～</p>
  </div>
`;

console.log(blog);
// 輸出（帶換行）：
//   <div class="post">
//     <h2>今天天氣超好！</h2>
//     <p>適合出去野餐～</p>
//   </div>

💡 對比普通字符串：
用雙引號寫多行得加 \n，看着像亂碼："<div>...<p>...</p></div>"

3️⃣ 內插表達式（高級玩法）

const price = 199;
const isDiscount = true;

const result = `商品價格：${price}元 ${
  isDiscount ? "（折扣中！）" : "原價" 
}`;

console.log(result); 
// 輸出：商品價格：199元 （折扣中！）

💡 小技巧：${} 裏可以放任何JS表達式，比如函數、三元運算符！

4️⃣ 和函數結合（真實場景）

function formatUser(name, age) {
  return `用户名：${name} | 年齡：${age}歲`;
}

console.log(formatUser("小紅", 30)); 
// 輸出：用户名：小紅 | 年齡：30歲

❓ 為什麼説它“拯救了程序員”？

傳統寫法

模板字符串

"Hello " + name + "! Today is " + date + "."

Hello ${name}! Today is ${date}.

需要轉義引號："He said \"Hello\""

He said "Hello"（直接寫！）

💡 小貼士（親測避坑）

  1. 反引號位置：鍵盤左上角 ~ 鍵（和ESC在同一個鍵上），不是單引號 '！
  2. 嵌套變量：const html = ${user.name}; ✅
  3. 別和jQuery混：這是純JS語法，和jQuery無關（但超好用！）