← 返回目录

模板字符串

用反引号 ` 定义的字符串：可以直接换行，用 ${} 插入变量，不用再 + 拼接。

1. 字符串拼接对比

普通字符串（以前） 模板字符串（现在） 
let name = "大喇叭";
let s = "hello " + name + "!";
console.log(s);
// hello 大喇叭!

let name = "大喇叭";
let s = `hello ${name}!`;
console.log(s);
// hello 大喇叭!

2. 多行字符串

普通字符串 模板字符串 
let html = "<ul>\n" +
           "  <li>大哥</li>\n" +
           "  <li>二哥</li>\n" +
           "</ul>";

let html = `
<ul>
  <li>大哥</li>
  <li>二哥</li>
</ul>`;
// 直接换行，不用 \n

3. 插入表达式

普通字符串 模板字符串 
let a = 10, b = 20;
let s = "a + b = " + (a + b);
console.log(s);
// a + b = 30

let a = 10, b = 20;
let s = `a + b = ${a + b}`;
console.log(s);
// a + b = 30

4. 插入函数调用结果

普通字符串 模板字符串 
function sum(a, b) {
  return a + b;
}
let s = "结果是: " + sum(1, 2);
console.log(s);
// 结果是: 3

function sum(a, b) {
  return a + b;
}
let s = `结果是: ${sum(1, 2)}`;
console.log(s);
// 结果是: 3
反引号 ` 在键盘左上角（Esc 键下面）；以后拼接字符串都用模板字符串。