原文链接

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量（需要将变量名写在${}``之中）

  1. $('#result').append(`
  2.   There are <b>${basket.count}</b> items
  3.    in your basket, <em>${basket.onSale}</em>
  4.   are on sale!
  5. `);

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义，类似 \`Yo\` World!
${}``
大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性，甚至可以 调用函数。

  1. let x = 1;
  2. let y = 2;
  4. `${x} + ${y} = ${x + y}`

模板编译

主要是用于template的生成，此不做记录

标签模板

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数

  1. let a = 5;
  2. let b = 10;
  4. tag`Hello ${ a + b } world ${ a * b }`;
  5. // 等同于
  6. tag(['Hello ', ' world ', ''], 15, 50);

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推

  • 第一个参数：['Hello ', ' world ', '']

tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数

  • 第二个参数: 15

  • 第三个参数：50