模板字面量的主要功能
- 多行字符串:一个正式的多行字符串的概念
- 基本的字符串格式化:将变量的值嵌入字符串的能力
- HTML转义 向HTML插入经过安全转换后的字符串的能力
基础语法
let message = `Hello world`;
模板字面量可以使用反斜杠(/),在模板字面量中不需要转义单,双引号
模板字面量可以很简洁的使用多行字符串
let message = `Hello
world`
- 在模板字面量中,可以把任何合法的javascript表达式嵌入到占位符中并将其作为字符串的一部分输出到结果中。
占位符有一个左侧的${和右侧的}符号组成,中间可以包含任意的javascript表达式
let name = 'Nicholas',
message = `Hello ${name}`
注意事项
模板字面量可以访问作用域中所有可访问的变量,而嵌入未定义的变量会抛出错误
可以在模板字面量中嵌入另外一个
let name = 'Nicholas',
message = 'Hello, ${
`my name is ${name}`
}.`;
标签模板
- 标签模板是在模板字面量第一个反撇号(`)前方标注的字符串
let message = tag`Hello world`
- 标签是一个函数,第一个参数是一个数组,包含JavaScript解释过后的字面量字符串,它之后的所有参数都是每一个站位符的解释值
function tag(literals,...substitutions) {
}
let a = 5,b = 10;
let tag = (s,v1,v2)=>{
console.log(s);
console.log(v1);
console.log(v2);
}
tag`Hello ${a+b} world ${a*b}`; //['Hello ',' world ','']
//15
//50
- 通过String.raw()标签可以访问到字符转义被转换成等价字符前的原声字符串
let message1 = `Multiline\nstring`;
let message2 = String.raw`Multiline\nstring`;
console.log(message1); //'Multiline
//string'
console.log(message2); //'Multiline\nstring'