一、多行字符串(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);

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

03-ES6语法：模板字面量(Template Literals)相关推荐

JavaScript模板字面量（Template literals）介绍
JavaScript模板字面量(Template literals)介绍模板字面量(Template literals)是什么? 简单地说,是允许嵌入表达式的字符串字面量.在反引号中可以直接使用单引 ...
【精讲】Javascript模板字面量
文章目录模板字面量是什么? 将模板字面量传入函数(带标签的模板字符串) 第一个参数其他参数如何将模板字面量输出为完整字符串呢? 模板字面量是什么? 模板字面量,是允许嵌入表达式的字符串字面量. ...
ECMAScript 6 模板字面量的常见用法
模板字面量可以理解成是字符串的一种,形式上用反引号 `` 将内容括起来. 目录特点一:模板字面量会保留反引号内部的空格.回车.tab,会将\n,\t翻译. 特点二:支持字符串插值特点三:和标签函数 ...
复合字面量(compound literals)详解
字面量是除了符号常量之外的常量.如,1是int型字面量,3.14是float型字面量,'C'是char型字面量,'Yudao'是字符串字面量.那么,数组和结构体是否也能有字面量来表示呢?如定义了这种& ...
模板字面量（模板字符串）
模板字面量是创建字符串的新字面量语法,使用反引号(`)来分界.有三种特性: 插值,多行和标记. 插值使用占位符${expression} 将动态值放入创建的字符串中. let name = &quo ...
C#语法浮点型字面量
C#语法浮点型字面量小数是生活中经常使用的一种数据表示形式.我们日常使用的5.5.0.6都是小数.在编程语言中,这种数据表示方式被称为浮点型数.浮点型数由整数部分.小数部分和小数点组成.浮点型字面量 ...
JS模板字面量标签函数
定义标签函数会接收被插值记号分隔后的模板和对每个表达式求值的结果. 标签函数本身是一个常规函数,通过前缀到模板字面量来应用自定义行为. 标签函数接收到的参数依次是原始字符串数组和对每个表达式求值 ...
工作84：模板字面量
c语言里字符串和字符串字面量,string literals（字符串字面量）
构造一个指定字符数组类型的未命名对象,用于需要在源代码中嵌入字符串时使用. 句法 " s-char-sequence "(1)u8 " s-char-sequence & ...
ES6—字符串模板引擎
字符串模板引擎 ES5中的字符串缺乏多行字符串.字符串格式化.HTML转义等特性. 而ES6通过模板字面量的方式进行了填补,模板字面量试着跳出JS已有的字符串体系,通过一些全新的方法来解决问题. 1 ...

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

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

二、模板字符串

03-ES6语法：模板字面量(Template Literals)相关推荐

最新文章

热门文章