ES6-樣板字串 (Template String)

發表於 | 分類於 ，

Template String 樣板字串

基本用法

新舊寫法比較
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const people = ["老大", "老二", "老么"];

//======================過去寫法======================
let oldUl =
  "<ul>" +
  "<li>我叫做 " +
  people[0] +
  "</li>" +
  "<li>我叫做 " +
  people[1] +
  "</li>" +
  "<li>我叫做 " +
  people[2] +
  "</li>" +
  "</ul>";

console.log(oldUl);
//"<ul><li>我叫做 老大</li><li>我叫做 老二</li><li>我叫做 老么</li></ul>"

//======================新的寫法======================
let newUl = `
  <ul>
    <li>我叫做 ${people[0]}</li>
    <li>我叫做 ${people[1]}</li>
    <li>我叫做 ${people[2]}</li>
  </ul>
`;
console.log(newUl);
//  <ul>
//    <li>我叫做 老大</li>
//    <li>我叫做 老二</li>
//    <li>我叫做 老么</li>
//  </ul>

甚至可以在 ${} 內使用函式 (${}裡再包\${})。

使用.map組字串(結果與上例一樣)
1
2
3
4
5
let newUl = `
  <ul>
    ${people.map(person => `<li>我叫做 ${person}</li>`).join("")}
  </ul>
`;

也可以在函式內增添更多的判斷式。

新增if判斷式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const people = [
  {
    name: "老大",
    friends: 2
  },
  {
    name: "老二",
    friends: 16
  },
  {
    name: "老么",
    friends: 0
  }
];

let newUl = `
  <ul>
    ${people
      .map(person => {
        if (person.friends) {
          return `<li>${person.name} 有 ${person.friends} 朋友</li>`;
        } else {
          return `<li>${person.name} 沒朋友</li>`;
        }
      })
      .join("")}
  </ul>
`;

console.log(newUl);
//  <ul>
//    <li>老大 有 2 朋友</li><li>老二 有 999 朋友</li><li>老么 邊緣人</li>
//  </ul>

巢狀 String Template

如同上述的方法 ${} 內可以加入函式及其更內層的 Template String，
所以也可以在 ${} 插入另一組的函式的 Template String。

在${}裡呼叫function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const travelers = {
  leader: "爸爸",
  partner: [
    {
      name: "老大",
      friends: 2
    },
    {
      name: "老二",
      friends: 16
    },
    {
      name: "老么",
      friends: 0
    }
  ]
};

function renderList(people) {
  return `
    <div>上車名單</div>
    <ul>
      ${people.map(person => `<li>${person.name}</li>`).join("")}
    </ul>
  `;
}

let template = `
  <div class="template">
  <h2>開車：${travelers.leader}</h2>
  ${renderList(travelers.partner)}
  </div>
`;

console.log(template);
// <div class=\"template\">
// <h2>開車：爸爸</h2>
//
//   <div>上車名單</div>
//   <ul>
//     <li>老大</li><li>老二</li><li>老么</li>
//   </ul>
//
// </div>

跳脫字元

如果有需要插入特殊字元，一樣可以使用 \ 反斜線來插入：

1
console.log(`\\`); // "\"

如果要計算字元數，或是需要將字串做額外處理，跳脫字元是不佔字符數的：

1
console.log(`\\`.length); // 1

要取得含特殊字元的字串可用 String.raw()：

1
console.log(String.raw`\\`.length); // 2

參考來源

邁向 JavaScript 勇者之路