此页面由 Cloud Translation API 翻译。

使用 ES6 模板字符串获取字面量

Addy Osmani

Twitter GitHub

JavaScript 中的字符串历来受到限制，缺乏 Python 或 Ruby 等语言可能具有的功能。ES6 模板字符串（Chrome 41 及更高版本提供）从根本上改变了这一点。它们引入了一种使用域特定语言 (DSL) 定义字符串的方法，带来了更好的效果：

字符串插值
嵌入式表达式
没有技巧的多行字符串
字符串格式
用于实现安全 HTML 转义、本地化等的字符串标记。

与我们目前熟知的字符串填充不同功能，“模板字符串”引入了一种完全不同的方法解决这些问题，而不是将另一种功能填充到字符串中。

语法

模板字符串使用反引号 (``)，而不是我们通常用于常规字符串的单引号或双引号。因此，模板字符串可以按如下方式编写：

var greeting = `Yo World!`;

到目前为止，模板字符串没有比普通字符串提供更多的信息。让我们来修改一下这一点。

字符串替换

它们的第一个真正优势之一是字符串替换。通过替换，我们可以采用任何有效的 JavaScript 表达式（包括添加变量），并且在模板字面量中，结果将作为同一字符串的一部分输出。

模板字符串可以包含用于使用 ${ } 语法进行字符串替换的占位符，如下所示：

// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);

// => "Yo, Brendan!"

由于模板字符串中的所有字符串替换都是 JavaScript 表达式，因此我们可以替换的不只是变量名称。例如，我们可以使用表达式插值来嵌入某些可读的内联数学运算：

var a = 10;
var b = 10;
console.log(`JavaScript first appeared ${a+b} years ago. Wow!`);

//=> JavaScript first appeared 20 years ago. Wow!

console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.

它们对于表达式内的函数也非常有用：

function fn() { return "I am a result. Rarr"; }
console.log(`foo ${fn()} bar`);
//=> foo I am a result. Rarr bar.

${} 适用于任何类型的表达式，包括成员表达式和方法调用：

var user = {name: 'Caitlin Potter'};
console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);

// => "Thanks for getting this into V8, CAITLIN POTTER";

// And another example
var thing = 'template strings';
console.log(`Say hello to ${thing}.`);

// => Say hello to template strings

如果需要在字符串中使用反引号，可以使用反斜杠字符 \ 对其进行转义，如下所示：

var greeting = `\`Yo\` World!`;

多行字符串

在一段时间内，JavaScript 中的多行字符串需要一些黑客手段。目前针对它们的解决方案要求字符串单行存在，或者在每个换行符前使用 \（反斜杠）将字符串拆分为多行字符串。例如：

var greeting = "Yo \
World";

虽然这种方法在大多数现代 JavaScript 引擎中都应该可以正常运行，但其行为本身仍是有点黑客攻击。您也可以使用字符串串联来模拟多行支持，不过这同样也有待改进：

var greeting = "Yo " +
"World";

模板字符串可显著简化多行字符串。只需在需要的地方添加换行符即可。示例如下：

反引号语法中的所有空格也会被视为字符串的一部分。

console.log(`string text line 1
string text line 2`);

带标记的模板

到目前为止，我们已经了解了如何使用模板字符串替换字符串和创建多行字符串。他们引入的另一个强大功能是带标记模板。标记模板通过在模板字符串前放置函数名称来转换模板字符串。例如：

fn`Hello ${you}! You're looking ${adjective} today!`

带标记模板字符串的语义与普通模板字符串有很大不同。实质上，它们是一种特殊类型的函数调用：上面的“脱糖”

fn(["Hello ", "! You're looking ", " today!"], you, adjective);

请注意，第 (n + 1) 个参数与字符串数组中第 n 到 (n + 1) 个条目之间发生的替换值相对应。这在很多方面都非常有用，但最直接的方法之一是自动转义所有插值变量。

例如，您可以编写一个 HTML 转义函数，以便...

html`<p title="${title}">Hello ${you}!</p>`

用于返回一个字符串，其中替换了适当的变量，但会替换所有 HTML 不安全的字符。那就开始吧。我们的 HTML 转义函数将采用两个参数：用户名和注释。两者都可能包含 HTML 不安全的字符（即 '、"、<、> 和 &）。例如，如果用户名是“Domenic Denicola”，注释为“& is a fun tag”，我们应输出以下内容：

<b>Domenic Denicola says:</b> "&amp; is a fun tag"

因此，我们的带标记模板解决方案可以编写如下：

// HTML Escape helper utility
var util = (function () {
    // Thanks to Andrea Giammarchi
    var
    reEscape = /[&<>'"]/g,
    reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
    oEscape = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
    },
    oUnescape = {
        '&amp;': '&',
        '&#38;': '&',
        '&lt;': '<',
        '&#60;': '<',
        '&gt;': '>',
        '&#62;': '>',
        '&apos;': "'",
        '&#39;': "'",
        '&quot;': '"',
        '&#34;': '"'
    },
    fnEscape = function (m) {
        return oEscape[m];
    },
    fnUnescape = function (m) {
        return oUnescape[m];
    },
    replace = String.prototype.replace
    ;
    return (Object.freeze || Object)({
    escape: function escape(s) {
        return replace.call(s, reEscape, fnEscape);
    },
    unescape: function unescape(s) {
        return replace.call(s, reUnescape, fnUnescape);
    }
    });
}());

// Tagged template function
function html(pieces) {
    var result = pieces[0];
    var substitutions = [].slice.call(arguments, 1);
    for (var i = 0; i < substitutions.length; ++i) {
        result += util.escape(substitutions[i]) + pieces[i + 1];
    }

    return result;
}

var username = "Domenic Denicola";
var tag = "& is a fun tag";
console.log(html`<b>${username} says</b>: "${tag}"`);
//=> <b>Domenic Denicola says</b>: "&amp; is a fun tag"

其他可能的用途包括自动转义、格式设置、本地化以及通常更复杂的替换：

// Contextual auto-escaping
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${message}')" style="color: ${color}">${message}</a>`;

// Localization and formatting
l10n`Hello ${name}; you are visitor number ${visitor}:n! You have ${money}:c in your account!`

// Embedded HTML/XML
jsx`<a href="${url}">${text}</a>` // becomes React.DOM.a({ href: url }, text)

// DSLs for code execution
var childProcess = sh`ps ax | grep ${pid}`;

摘要

Chrome 41 Beta 版及更高版本、IE Tech Preview、Firefox 35+ 和 io.js 支持使用模板字符串。实际上，如果您想要在生产环境中使用它们，主要 ES6 转译器（包括 Traceur 和 6to5）均支持。如果您想试用，请参阅 Chrome 示例代码库中的模板字符串示例。您可能还对 ES5 中的 ES6 等效项感兴趣，其中演示了如何使用 ES5 实现一些加糖模板字符串。

模板字符串为 JavaScript 带来了许多重要功能。其中包括以更好的方式执行字符串和表达式插值、多行字符串以及创建您自己的 DSL。

他们带来的最重要的功能之一是标记模板，这是编写此类 DSL 的关键功能。它们接收模板字符串的各个部分作为参数，然后您可以决定如何使用字符串和替代内容来确定字符串的最终输出。

使用 ES6 模板字符串获取字面量

语法

字符串替换

多行字符串

带标记的模板

摘要

延伸阅读