js模板字符串

资料与笔记

资料原文
作者笔记pdf

定义

模板字面量(模板字符串): 允许在其中嵌入表达式的字符串字面量

• 属于字符串字面量

• 允许将表达式嵌入其中(字符串插值)

• 可以是多行字符串

主要功能:

​ 字符串插值(使用混合常量、变量、字面量和表达式的字符串字面量构造新 String值)

---

语法形式

• 单行简单字符串

  ` string text`
  

• 多行简单字符串

  `string text line1
   string text line2`
  

• 带占位符

  `string text ${expression} string text`
  

• 带标签

  tag`string text string text`
  

• 以上几种的混合

  tag `string text ${expression} string text`
  

---

模板字符串特征(反引号,占位符,标签)

• 反引号:

  • 普通字符串字面量: 用单引号或双引号标识
  • 模板字符串字面量: 用反引号(``)标识
  • 引号转义问题:
    • 普通字符串字面量内使用单双引号: 需要反斜杠\转义
    • 模板字符串内使用反引号:
      • 模板字符串嵌套: 无需转义
      • 其他: 需要反斜杠\转义

• 占位符: 形如 ${expression}的语法结构

  ​ 占位符中表达式会和周围的文本一起被传递给一个默认的函数, 该函数负责将所有的部分连接起来,返回最终组合的新字符串的值.

• 标签

  • 模板字符串若由表达式开头,该表达式被称为标签

  • 标签通常是一个函数(或者最终值为函数类型的复杂表达式)

  • 标签函数会在模板字符串处理完毕,形成最终输出之前被调用

    (各占位符表达式的值和前后其他普通字符串 被当做参数传给该标签函数)

---

字符串插值示例

• 不使用模板字符串:

  var a = 5;
  var b = 10;
  console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
  // "Fifteen is 15 and
  // not 20."
  

• 模板字符串

  var a = 5;
  var b = 10<