模板字符串是 ECMAScript 2015(ES6)规划中新增的一种字符串表示方式。模板字符串是对普通字符串功能进行了增强,它可以像普通字符串一样使用,还有一些普通字符串之外的功能。它使用``
代替普通字符串中的单引号和双引号,并支持多行字符串表示、表达式插补、标签模板等特性。
1. 模板字符串
模板字符串使用``
代替普通字符串中的单引号和双引号,它有以下几种表示形式:
// 单行模板字符串 `string text` // 多行模板字符串 `string text line 1 string text line 2` // 带表示式的模板字符串 `string text ${expression} string text` // 标签模板字符串 tag `string text ${expression} string text`
模板字符串允许嵌入表达式,并且支持多行字符串和字符串插补特性。模板字符中可以包含特定的占位符${expression}
,占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来。
如果一个模板字符串由表达式开头(如,tag
),则该字符串被称为带“标签模板字符串”。这种情况下,标签表达式(通常是一个函数)会在模板字符串处理后被调用,在输出最终结果前,你都可以在通过该函数对模板字符串来进行操作处理。
2. 模板字符串特性
2.1 多行字符串
模板字符串可以用于定义多行文本,在新行中插入的任何字符都是模板字符串中的一部分。
在普通字符串,我们会像下面这样定义多行文本:
console.log("第 1 行字符串\n"+ "第 2 行字符串");
而在模板字符串,我们可以像下面这样定义多行文本:
console.log(`第 1 行字符串 第 2 行字符串`);
2.2 表达式插补
模板字符串支持嵌入表达式。在普通字符串中嵌入表达式时,需要使用以下语法:
var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and // not 20."
而在模板字符串中,我们可以用更优雅的方式来表示:
var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`); // "Fifteen is 15 and // not 20."
2.3 标签模板字符串
标签模字符串是模板字符串一种更高级的用法,它允许你通过标签函数修改模板字符串的输出。
标签函数中包含两个参数。第一个参数是一个包含字符串字量的数组(在本例中是"Hello"和"world")。第二个参数(第一个参数后的每个参数),是已经被处理好的替换表达式(本例中是"15"和"50")。标签函数的返回值是已经处理好的字符串。
var a = 5; var b = 10; function tag(strings, ...values) { console.log(strings[0]); // "Hello " console.log(strings[1]); // " world " console.log(values[0]); // 15 console.log(values[1]); // 50 return "itbilu.com"; } tag`Hello ${ a + b } world ${ a * b}`; // "itbilu.com"
2.4 原始字符串
在标签函数的第一个参数中存在一个特殊的属性:raw
,该属性用于访问模板字符串的原始字符串。
function tag(strings, ...values) { console.log(strings.raw[0]); // "string text line 1 \n string text line 2" } tag`string text line 1 \n string text line 2`;
此外,还可以使用String.raw()
方法来创建原始字符串,该方法创建与使用默认模板函数和字符串连接创建是一样的:
String.raw`Hi\n${2+3}!`; // "Hi\\n5!"