JavaScript ES6 模板字符串

 2016年09月17日    107     声明


模板字符串是 ECMAScript 2015(ES6)规划中新增的一种字符串表示方式。模板字符串是对普通字符串功能进行了增强,它可以像普通字符串一样使用,还有一些普通字符串之外的功能。它使用``代替普通字符串中的单引号和双引号,并支持多行字符串表示、表达式插补、标签模板等特性。

  1. 模板字符串
  2. 模板字符串特性

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!"