模板字符串是什么#

在 JavaScript 里，模板字符串用 **反引号 “**表示，而不是单引号或双引号。

基本用法：嵌入变量

1
const name = "Alice";
2
const msg = `Hello, ${name}!`;
3

4
console.log(msg); // Hello, Alice!

支持表达式

1
const a = 5;
2
const b = 3;
3

4
console.log(`Sum = ${a + b}`); // Sum = 8

支持多行字符串

1
const text = `第一行
2
第二行
3
第三行`;
4

5
console.log(text);

模板字符串的注意事项#

必须用反引号
${} 里可以写任意表达式（函数调用、运算等）
在模板字符串中，所有的空格、换行或者缩进都会保留到输出中

输出反引号和反斜杆，在前面写反斜杆

1
const info = `\\\``;
2
console.log(info);\\  输出：\`

模板字符串的应用#

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>模板字符串的应用</title>
6
    <style>
7
      body {
8
        padding: 50px 0 0 300px;
9
        font-size: 22px;
10
      }
11

12
      ul {
13
        padding: 0;
14
      }
15

16
      p {
17
        margin-bottom: 10px;
18
      }
19
    </style>
20
  </head>
21
  <body>
22
    <p>学生信息表</p>
23
    <ul id="list">
24
      <li style="list-style: none">信息加载中……</li>
25
    </ul>
26

27
    <script>
28
      // 数据
29
      const students = [
30
        {
31
          username: 'Alex',
32
          age: 18,
33
          sex: 'male',
34
        },
35
        {
36
          username: 'ZhangSan',
37
          age: 28,
38
          sex: 'male',
39
        },
40
        {
41
          username: 'LiSi',
42
          age: 20,
43
          sex: 'female',
44
        },
45
      ];
46

47
      const list = document.getElementById('list');
48

49
      let html = '';
50

51
      for (let i = 0; i < students.length; i++) {
52
        html += `<li>我的名字是：${students[i].username},${students[i].sex},${students[i].age}</li>`;
53
      }
54

55
      // console.log(html);
56
      list.innerHTML = html;
57
    </script>
58
  </body>
59
</html>