ES6引入了模板字面量(Template Literals),对字符串的操作进行了增强。
- 多行字符串:真正的多行字符串
- 字符串占位符:可以将变量或JavaScript表达式嵌入占位符中并将其作为字符串的一部分输出到结果中
3.2.1 多行字符串
模板字符串的基础语法就是用反引号(`)替换字符串的单、双引号。例如:
let message = `Hello World`;
如果想要在字符串种使用反引号,使用反斜杠(\)将它转义即可。例如:
let message = `Hello \` World`;
ES5中,如果一个字符串字面量要分为多行书写,那么可以采用两种方式来实现:在一行结尾的时候添加反斜杠(\)表示承接下一行的代码,或者使用加号(+)来拼接字符串。代码如下所示:
let message = "Hello \
world";
let greeting = "welcome"
+ " you";
console.log(message);
console.log(greeting);
ES6中,使用模板字面量语法,可以实现多行字符串的创建。如果需要在字符串种添加新的一行,只需要在代码中直接换行即可。例如:
let message = `Hello
World`;
console.log(message); // Hello World
3.2.2 字符串占位符
在一个模板字面量中,可以将JavaScript变量或任何合法的JavaScript表达式嵌入占位符并将其作为字符串的一部分输出到结果中。
占位符由一个左侧的“${”和右侧的“}”f符号组成,中间可以包含变量或者JavaScript表达式。例如:
let name = "张三";
let message = `Hello ${name}`; // Hello 张三
模板字面量本身也是JavaScript表达式,因此也可以在一个模板字面量中嵌入另一个模板字面量。代码如下:
let name = "张三";
let message = `Hello ${
`my name is ${name}`
}`;
console.log(message); // Hello my name is 张三