ES6-樣板字串 (Template String)

發表於 | 分類於 ， | 0 comments

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
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
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
45
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 勇者之路