03-ES6语法：模板字面量(Template Literals)

ES6引入了模板字面量（Template Literals），对多行字符串和字符串占位符的操作进行了增强。下面我们分别进行说明和演示。

下面是简单的屏幕分享，不爱看文字的同道中人可以看视频。-_-

一、多行字符串(Multi-line Strings)

首先我们来看下ES5中是如何表示多行字符串的，示例代码如下：

// ES5中的写法。
var content = '君不见黄河之水天上来，奔流到海不复回。 \n'
    + '君不见高堂明镜悲白发，朝如青丝暮成雪。'
    + '人生得意须尽欢，莫使金樽空对月。'
    + '天生我材必有用，千金散尽还复来。'
    + '烹羊宰牛且为乐，会须一饮三百杯。'
    + '岑夫子，丹丘生，将进酒，杯莫停。'
    + '与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)'
    + '钟鼓馔玉不足贵，但愿长醉不愿醒。(不足贵 一作：何足贵；不愿醒 一作：不复醒)'
    + '古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)'
    + '陈王昔时宴平乐，斗酒十千恣欢谑。'
    + '主人何为言少钱，径须沽取对君酌。'
    + '五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。'
console.info(content);

虽然在代码中，每行字符串都已经换行了，但是控台上输出的内容却没有换行，如下图所示：

 如果要想控制台输出的内容也能进行换行的话，需要在每行字符串的后面增加换行符号(\n)，如下面的代码所示：

// ES5中的写法。
var content = '君不见黄河之水天上来，奔流到海不复回。 \n'
    + '君不见高堂明镜悲白发，朝如青丝暮成雪。\n'
    + '人生得意须尽欢，莫使金樽空对月。\n'
    + '天生我材必有用，千金散尽还复来。\n'
    + '烹羊宰牛且为乐，会须一饮三百杯。\n'
    + '岑夫子，丹丘生，将进酒，杯莫停。\n'
    + '与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)\n'
    + '钟鼓馔玉不足贵，但愿长醉不愿醒。(不足贵 一作：何足贵；不愿醒 一作：不复醒)\n'
    + '古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)\n'
    + '陈王昔时宴平乐，斗酒十千恣欢谑。\n'
    + '主人何为言少钱，径须沽取对君酌。\n'
    + '五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。'
console.info(content);

请注意上述每行字符串的后面我们都增加了一个换行字符\n。这样一来，控制台输出的字符串效果就可以正常换行了。如下图所示：

如果将上述的代码修改为下面的格式则代码编辑器就直接报错提醒了，当然这样的代码也是不能被执行的。如下图所示：

那么，使用ES6的语法会怎么弄呢？示例代码如下：

var content = `君不见黄河之水天上来，奔流到海不复回。
    君不见高堂明镜悲白发，朝如青丝暮成雪。
    人生得意须尽欢，莫使金樽空对月。
    天生我材必有用，千金散尽还复来。
    烹羊宰牛且为乐，会须一饮三百杯。
    岑夫子，丹丘生，将进酒，杯莫停。
    与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)
    钟鼓馔玉不足贵，但愿长醉不愿醒。(不足贵 一作：何足贵；不愿醒 一作：不复醒)
    古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)
    陈王昔时宴平乐，斗酒十千恣欢谑。
    主人何为言少钱，径须沽取对君酌。
    五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。`;
console.info(content);

看着是不是简单了许多。直接在整个字符串的开头和结尾使用了2个反引号就OK了，而且控制台输出的内容也自动就出现了换行，如下图所示：

不过，如果你留意观察上面的输出结果，会发现虽然换行了，但是前面好像带的有空白字符，这样的效果也不是我们想要的。我们想要的是下面的效果：

可以将代码调整为如下的格式就能达到上图的效果：

处理的办法很简单，就是把每行字符串前面的空白都删除了。只是，这么一做，我们的代码版式看起来就不那么优美了。就这样吧，看个人喜好哈！-_-

二、模板字符串

如果想在输出的字符串中包含变量的话，又该怎么做呢？我们还是先来看看ES5中是如何做的，如下面的示例代码：

var firstName = "Jim";
var lastName = "Green";
var message = "My name is " + firstName + " " + lastName;
console.info(message);

可以看到是通过连接符+将字符串和变量连接到一起的。上述代码在控制台中输出的结果如下图所示：

那么，在ES6中如果要实现上面的字符串输出功能的话，可以怎么做呢？下面是示例代码：

var firstName = "Jim";
var lastName = "Green";
var message = `My name is ${firstName} ${lastName}`;
console.info(message);

上面的代码就是使用ES6字符串占位符的机制，提供了简单的字符串插值功能，直接在输出的字符串中使用${NAME}占位符语法，其中花括号{}里面的NAME可以是变量、JS表达式和函数。特别需要注意的是：字符串用的是反引号，而不是单引号或者双引号，后2种输出的内容是原汁原味的，而没有用实际的内容替换掉占位符。

有了这些基本的知识，差不多就可以使用ES6的字符串插值功能了。如果你想了解更多的内容，可以继续往下。

1、模板占位符中的代码可以是任意JS表达式，所以函数调用、算数运算等这些都可以作为占位符使用，你甚至可以在一个模板字符串中嵌套另一个。

比如下面的代码是函数调用：

function getName() {
    return "Jim Green";
}
var message = `My name is ${getName()}`;
console.info(message);

需要留意的是：不能少了函数名后面的括号()，否则输出的插值内容就是函数代码了，如下图所示：

我们再来看一个模板字符串嵌套另一个模板字符串的示例：

var firstName = "Jim";
var lastName = "Green";
var fullName = `${firstName} ${lastName}`;
var message = `My name is ${fullName}`;
console.info(message);

看完上述的代码，是不是感觉着所谓的嵌套另外一个模板字符串，听起来挺高级的，本质上不过就是一个JS的变量而已。-_-

2、如果你需要在模板字符串中书写反撇号，你必须使用反斜杠将其转义：`\``等价于"`"。 同样地，如果你需要在模板字符串中引入字符$和{。无论要实现什么样的目标，都需要用反斜杠转义每一个字符：`\$`和`\{`。

3、与普通字符串不同的是，模板字符串可以多行书写：

var content = `君不见黄河之水天上来，奔流到海不复回。
    君不见高堂明镜悲白发，朝如青丝暮成雪。
    人生得意须尽欢，莫使金樽空对月。
    天生我材必有用，千金散尽还复来。
    烹羊宰牛且为乐，会须一饮三百杯。
    岑夫子，丹丘生，将进酒，杯莫停。
    与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)
    钟鼓馔玉不足贵，但愿长醉不愿醒。(不足贵 一作：何足贵；不愿醒 一作：不复醒)
    古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)
    陈王昔时宴平乐，斗酒十千恣欢谑。
    主人何为言少钱，径须沽取对君酌。
    五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。`;
console.info(content);

这是我们前面的示例代码，需要注意的是：模板字符串中所有的空格、新行、缩进，都会原样的输出在生成的字符串中。