JavaScript 模板字符串知识点归纳

参考链接：模板字符串

换行

console.log(`line 1
line 2`);

嵌入表达式

console.log(`10+3=${10+3}`);

嵌套模板

在模板字符串内的 ${ } 占位符中，可以直接使用 ` 符号而无需转义

const classes =
  `header
    ${
      isLargeScreen() ? '' : `icon-${item.isCollapsed ? 'expander' : 'collapser'}`
    }`;

在外层模板字符串内， header 后面的占位符内是一个三元运算符，这个三元运算符的第二个表达式又是一个模板字符串

带标签的模板字符串

以下面的代码为例，模板字符串前可以添加一个标签（ myTag ），该标签是一个函数，这个函数可以处理其右侧的模板字符串，并将处理结果返回（也可以无返回值）

function myTag(strings, a, b) {
  return a + strings[1] + b + ' is ' + (a * b);
}

console.log(myTag`${3} times ${6}`);

输出结果： 3 times 6 is 18

其中 myTag 的第一个形参 strings 是一个字符串数组，包含了模板字符串被占位符分割后的结果，第二个形参（ a ）是第一个占位符中表达式的计算结果（ 3 ），第三个形参（ b ）是第二个占位符的计算结果（ 6 ），以此类推。

需要注意，在上面这个例子中， strings[0] 和 string[2] 分别是占位符 ${3} 左侧和占位符 ${6} 右侧的字符串，它们都是空字符串 ''

原始字符串

标签函数的第一个参数有一个特殊属性 raw ，我们可以通过它来访问模板字符串的原始字符串

function myTag(strings) {
  return strings.raw;
}

console.log(myTag`${99} tim\nes ${99}`);

输出结果： Array ["", " tim\nes ", ""]

在上例中 strings.raw 与 strings 很相像，区别在于 strings.raw 中的字符串不会对转义字符进行处理

此外， JavaScript 内置了一个标签函数 String.raw ，该函数的行为与默认的模板字符串处理函数很相似，区别也在于 String.raw 不会处理转义字符