1. 模板字符串使用反引号 来代替普通字符串中的用双引号和单引号。
  2. 模板字符串可以包含特定语法${变量名}的占位符。
  3. 占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来,
    1. 如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,
    2. 该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,
    3. 你都可以通过该函数来对模板字符串进行操作处理。
  4. 在模版字符串内使用反引号(`)时,需要在它前面加转义符(\)。

    多行字符串

    1. console.log(`string text line 1
    2. string text line 2`);
    3. //可以不用加换行的转译字符

    插入表达式

    1. var a = 5;
    2. var b = 10;
    3. console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
    4. //"Fifteen is 15 and not 20."
    5. //直接插入变量计算

    嵌套模板

  • 在某些时候,嵌套模板是具有可配置字符串的最简单也是更可读的方法。
  • 在模板中,只需在模板内的占位符 ${ } 内使用它们,就可以轻松地使用内部反引号。
  • 例如,如果条件 a 是真的,那么返回这个模板化的文字。

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

    带标签的模板字符串

  • 更高级的形式的模板字符串是带标签的模板字符串。

  • 标签使您可以用函数解析模板字符串。
  • 标签函数的第一个参数包含一个字符串值的数组。
  • 其余的参数与表达式相关。
  • 最后,你的函数可以返回处理好的的字符串 ``javascript var person = 'Mike'; var age = 28; function myTag(strings, personExp, ageExp) { var str0 = strings[0]; // "that " var str1 = strings[1]; // " is a " var ageStr; if (ageExp > 99){ ageStr = 'centenarian'; } else { ageStr = 'youngster'; } return str0 + personExp + str1 + ageStr; } var output = myTagthat ${ person } is a ${ age }`; console.log(output);

```

原始字符串

  • 在标签函数的第一个参数中,存在一个特殊的属性 raw ,
  • 我们可以通过它来访问模板字符串的原始字符串,而不经过特殊字符的替换。
  • 使用 String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。