第九章-模板字符串

[zhoujunpeng]

与其他变成语言相比，JavaScript对字符串的操作的全面性非常不足。模板字符串引入了新的语法，可以创建领域特定语言DSL（domain-specific languages）以相对安全的方式处理内容。模板字符串的简单介绍如下：

This scheme extends ECMAScript syntax with syntactic sugar to allow libraries to provide DSLs that easily produce, query, and manipulate content from other languages that are immune or resistant to injection attacks such as XSS, SQL Injection, etc.

ES6的模板字符串可以解决目前JavaScript语言面临的一些问题：

1. 多行字符串。JavaScript目前并没有多行字符串的概念；
2. 基本字符串格式。使用字符串替代变量值的能力；
3. HTML转义。将字符串转义成安全的HTML格式。

模板字符串并不是对现有JavaScript字符串的功能扩展，它是一种全新的方式。

9.1 基本语法

模板字符串的语法与普通字符串类似，只不过使用一对撇号代替双/单引号。如下：

let message = `Hello world!`;

console.log(message);               // "Hello world!"
console.log(typeof message);        // "string"
console.log(message.length);        // 12

上述代码中变量message是一个普通的字符串，模板字符串的语法只是用来创建了一个普通的字符串，并赋值给message。

如果你想在字符串中带有撇号，需要使用反斜杠\将撇号转义：

let message = `\`Hello\` world!`;

console.log(message);               // "`Hello` world!"
console.log(typeof message);        // "string"
console.log(message.length);        // 14

另外，模板字符串中的单/双引号并不需要转义。

9.2 多行字符串

自JavaScript语言面世以来，开发者们尝试了各种创建多行字符串的途径。使用单/双引号创建字符串时，所有的字符必须包裹在一行内。JavaScript一直存在着一个语法bug：使用反斜杠\实现多行字符串。如下：

let message = "Multiline \
string";

console.log(message);       // "Multiline string"

然而输出的字符串并没有换行，因为反斜杠被认为是一种表示继续的标志，而不是换行符。如果想以多行的形式输出结果，必须要将换行转义\n加入到字符串中。如下：

let message = "Multiline \n\
string";

console.log(message);       // "Multiline
//  string"

尽管大多数JavaScript引擎都支持以上形式，但是这种语法是一个bug，并不推荐使用。

除了以上途径，还可以通过数组和字符串拼接来实现多行字符串：

let message = [
    "Multiline ",
    "string"
].join("\n");

let message = "Multiline \n" +
    "string";

开发者们对多行字符串实现途径孜孜不倦地探索，表明多行字符串是一种迫切需要规范支持的模式。

模板字符串提供了创建多行字符串的支持，并且方式非常简单，并没有很复杂的语法，你只需要在想换行的位置换行输入即可。如下：

let message = `Multiline
string`;

console.log(message);           // "Multiline
//  string"
console.log(message.length);    // 16

包含在对称撇号内部的所有空白都被认为是字符串的一部分，所以必须谨慎使用缩进排版。如下：

let message = `Multiline
               string`;

console.log(message);           // "Multiline
//                 string"
console.log(message.length);    // 31

上述代码中，第二行首部的所有空白都被当做字符串的一部分。如果你想令代码的排版更加易读，可以考虑将第一行完全空白，在创建完毕之后再去除前后的空白。如下：

let html = `
<div>
    <h1>Title</h1>
</div>`.trim();

上述代码的第一行完全空白，排版更加贴近HTML标签的缩进模式。随后在模板字符串创建完毕之后，使用trim()函数去除第一行的空白。

模板字符串也可以使用换行转义\n实现换行：

let message = Multiline\nstring;
console.log(message); // "Multiline 
// string"
console.log(message.length); // 16

9.3 置换

模板字符串并不仅仅用来定义字符串，它与常规字符串最大的区别在于模板字符串的置换功能。置换功能可以在模板字符串中内嵌任意的JavaScript表达式，并且输出运算后的结果字符串。