JavaScript 樣板字面值（Template Literals）

發表於 分類於
這篇筆記強調樣板字面值（Template Literals）的好處，特別是在處理多行字串和變數插入時，避免傳統寫法中繁瑣的 + 和 \ 使用，使得代碼更加清晰易懂，減少錯誤的可能性。

傳統的寫法

在傳統的寫法中，我們需要使用 + 和 \ 來分隔字串和變數，以及處理換行，這樣容易導致錯誤或遺漏。

1
2
3
4
5
6
7
8
9
10
11
12
13
const people = [
  { name: '小明', friends: 2 },
  { name: '阿姨', friends: 999 },
  { name: '杰倫', friends: 0 }
];

let originUl = '<ul>\
  <li>我叫做 ' + people[0].name + '</li>\
  <li>我叫做 ' + people[1].name + '</li>\
  <li>我叫做 ' + people[2].name + '</li>\
</ul>';

console.log(originUl);

template literals previous

樣板字面值的寫法

使用樣板字面值（Template literals），我們可以用反引號 ` 將字串包起來，這樣就能夠更簡潔地插入變數和換行。

1
2
3
4
5
6
7
8
9
let New1 = `
<ul>
  <li>我叫做 ${people[0].name}</li>
  <li>我叫做 ${people[1].name}</li>
  <li>我叫做 ${people[2].name}</li>
</ul>
`;

console.log(`我是New1 ${New1}`);
  • 結果如下圖：

template literals

使用迴圈生成列表

我們也可以使用 map 方法來迴圈生成列表，這樣能夠更靈活地處理資料。

1
2
3
4
5
6
7
8
9
10
11
// 使用 map 跑迴圈，
// 如果沒有加 join('')，每個 <li> 之後會出現逗號。
// 所以要用 join('') 移除逗號，避免出現多餘的符號。

let New2 = `
<ul>
  ${people.map(i => `<li>我叫做 ${i.name}</li>`).join('')}
</ul>
`;

console.log(`我是New2 ${New2}`);
  • 結果如下圖：

template literals loop

join 補充

join 方法的預設分隔符是逗號 ","，可以使用空字串 '' 來替代，以便獲得想要的結果。

更多關於 join 的信息可以參考 MDN 文檔。