模板字符串为构造多行字符串和字符串拼接带来了更加方便的方式。
多行字符串
之前,我们如果要构造一个多行,我们需要在字符串中自己加入换行符\n,就像这样:
var lines = "text line one\ntext line two";
//"text line one
//text line two"
上面的看起来有点乱,让我们写的再好看直观一点:
var lines2 = "text line one\n"
+ "text line two";
可以再怎么写,总是觉得不是很优雅美观,尤其是文本内容比较多的时候。模板字符串的出现,极大的改善了这一痛点:
var lines = `
text line one
text line two
`
是不是干净整洁多了?
字符串拼接
模板字符串只所以叫“模板”,当然是因为它支持内嵌表达式,借助这一特性,我们可以很容易的实现字符串拼接:
var name = "Kevin";
var age = 18;
//老的做法:
var message = "Name: " + name + ", Age: " + age;
// Name: Kevin, Age: 18
//模板字符串的做法:
var message2 = `Name: ${name}, Age: ${age}`;
也可以做一些简单的计算:
var num1 = 10;
var num2 = 20;
var result = `${num1} + ${num2} = ${num1 + num2}`;
// 10 + 20 = 30
标签化模板
标签化模板(Tagged Template Literals)是一个高级特性,同一个模板字符串可以通过使用不同的标签,对模板进行进一步处理,输出不同的结果。
var name = "Kevin";
morning`Hello,${name}`; // Good morning, Kevin
evening`Hello,${name}`; // Good evening, Kevin
等一下!上面的程序是怎么回事?morning,evening做了什么?
其实,这里的morning,evening就是所谓的标签(Tag)了,它们其实就是一个函数:
function morning(strings, ...values) {
return "Good morning, " + values[0];
}
function evening(strings, ...values) {
return "Good evening, " + values[0];
}
- 标签函数的第一个参数是一个数组,它包含的值是模板字符串中除去表达式的那些部分:
var name = "Kevin";
var age = 18;
//比如我们有如下模板字符串
var template = `Name: ${name}, Age: ${age}`;
//则在标签函数中的第一个参数strings就为:
//strings为 ["Name: ", ", Age: ", ""]
- 标签函数的第二个参数是个可变参数,它包含了填充模板字符串的那些表达式的值,就按上面的代码例子,那我们的values参数值就为:
// values为 ["Kevin", 18]