ES6 模板字面量

时间:2021-11-18 17:36:03

模板字面量 解决的问题

  1.多行字符串  一个正式的多行字符串的概念

  2.基本的字符串格式化  将变量的值嵌入字符串的能力

  3.HTML转义    向HTML插入安全转换后的字符串的能力

(1)基础语法

  ES6 模板字面量

相当于使用` ` 反撇号代替了单/双引号,和普通字符串无差异

(2)多行字符串

ES6之前换行:

在新行最前方添加反斜杠(\)承接上一行的代码,

ES6 模板字面量

但是字符串并没有换行显示,因为反斜杠只是代表该行的延续,这是JavaScript的一个语法bug

如果想输出新的一行,需手动加换行符

ES6 模板字面量

\n 后面的反斜杠依然代表该行延续;但由于这是JavaScript的bug,不推荐使用

数组或字符串拼接换行

ES6 模板字面量

ES6 模板字面量

ES6 中简化多行字符串

ES6 模板字面量使用反撇号修饰,只需要直接换行就行,在反撇号中所有空白符为字符串一部分,message长度为16

也可以使用\n来指明插入新行的位置

let message = `Multiline\nstring`;

字符串占位符

在模板字面量中,可以把任何合法的JavaScript表达式嵌入到占位符并将其作为字符串的一部分输出到结果中

占位符由一个左侧的${ 和右侧的 } 符号组成,中间可以包含任意的JavaScript表达式

ES6 模板字面量

模板字面量可以访问作用域中所有可访问的变量,无论在严格模式还是非严格模式下,嵌入未定义的变量都会抛出错误

ES6 模板字面量嵌入模板字面量

标签模板

标签指的是在模板字面量的第一个反撇号(`)前方标注的字符串

标签可以是一个函数

接收参数:

首先是一个literals数组,包含以下元素:

(1)第一个占位符前的空字符串("

(2)第一、二个占位符之间的字符串

(3)第二个占位符后面的字符串,

之后所有的参数都是每一个占位符的解释值。

在模板字面量中使用原始值String.raw

ES6 模板字面量获取\n的原生形式"\\n"  (反斜杠与n字符,n字符需要\转义)