ES6特性之：模板字符串
模板字符串为构造多行字符串和字符串拼接带来了更加方便的方式。
多行字符串
之前，我们如果要构造一个多行，我们需要在字符串中自己加入换行符\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]本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.01.12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录