理解 ECMAScript 6：模板字符串

David Catuhe

0/5 (0投票)

2015 年 6 月 3 日

CPOL

4分钟阅读

8779

在本文中，我将根据我创建嵌入式表达式的个人经验，重点介绍模板字符串。

欢迎来到我的 ECMAScript 6 系列的第二部分！我最喜欢的新 Web 标准之一是 Microsoft Edge（我们在 Microsoft 构建的新浏览器渲染引擎），它对 ECMAScript 6 提供了广泛的支持。因此，我写了这个系列，将带你了解在使用 ECMAScript 6 为 Web 编写大型应用程序时，你可以做的一些很酷的事情。

在第一部分中，我介绍了类和继承。在本文中，我将根据我创建嵌入式表达式的个人经验，重点介绍模板字符串。

解决换行问题

在处理 babylon.js 时，我必须处理着色器代码，为了便于理解，这些代码可以看作是一大堆文本（看起来像 C 语言）。

你可以在这里找到一个示例。

在 JavaScript 中处理长文本时遇到的问题是换行。你有多少次写过这样的东西？

var myTooLongString = "A long time ago, in a galaxy far," +
                      "far away...." +
                      "It is a period of civil war." +
                      "Rebel spaceships, striking" +
                      "from a hidden base, have won" +
                      "their first victory against" + 
                      "the evil Galactic Empire.";

当需要处理 200 多行的着色器时，这很快就会变成一个真正的痛苦。

值得庆幸的是，ECMAScript 6 带来了新的模板字符串功能。除其他优点外，模板字符串直接支持多行字符串。

var myTooLongString = `A long time ago, in a galaxy far
far away....
It is a period of civil war.
Rebel spaceships, striking
from a hidden base, have won
their first victory against
the evil Galactic Empire`;

由于模板字符串中的所有字符都很重要，因此我无法添加前导空格。

现在，作为 JavaScript 开发人员，我们有 3 种定义字符串的方式。

- 使用 “”
- 使用 ‘’
- 使用 `` （也称为反引号或重音符）

那么模板部分又是什么呢？

多行支持不是模板字符串的唯一功能。实际上，你还可以使用模板字符串将占位符替换为变量值，就像你在 C/C++ 中使用 printf 或 C# 中使用 string.Format 所做的那样。

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = 100.5;

result.innerHTML = `You have ${items.length} item(s) in your basket for a total of $${total}`;

此代码产生以下输出：

你的购物车中有 3 件商品，总计 100.5 美元。

很方便，对吧？

回顾 ECMAScript 5 的方式

result.innerHTML = "You have " + items.length + " item(s) in your basket for a total of $" + total;

深入了解标签

模板字符串规范的最后阶段是向字符串本身添加一个自定义函数，以创建带标签的模板字符串。

var myUselessFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index < values.length; index++) {
        output += strings[index] + values[index];
    }

    output += strings[index]
    return output;
}

result.innerHTML = myUselessFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

这里的函数用于同时访问常量字符串部分以及已计算的变量值。

在前面的示例中，字符串和值如下：

strings[0] = “你的购物车中有”
values[0] = 3
strings[1] = “件商品，总计 $”
values[1] = 100.5
strings[2] = “”

正如你所见，每个 values[n] 都被常量字符串（strings[n] 和 strings[n + 1]）包围。

这使你可以控制最终输出字符串的构建方式。在前面的示例中，我只复制了模板字符串的基本行为，但我们可以做得更多，并对字符串进行一些很酷的处理。

例如，这里有一段代码可以阻止尝试注入自定义 DOM 元素的字符串。

var items = [];
items.push("banana");
items.push("tomato");
items.push("light saber");

var total = "Trying to hijack your site <BR>";

var myTagFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index < values.length; index++) {
        var valueString = values[index].toString();
        if (valueString.indexOf("<") !== -1) { // Far more complex tests can be implemented here :)
            return "String analyzed and refused!";
        }
        output += strings[index] + values[index];
    }

    output += strings[index]
    return output;
}

result.innerHTML = myTagFunction `You have ${items.length} item(s) in your basket for a total of $${total}`;

带标签的模板字符串可用于许多方面，例如安全性、本地化、创建自己的领域特定语言等。

原始字符串

标签函数在访问字符串常量时有一个特殊的选项：它们可以使用 strings.raw 来获取未转义的字符串值。例如，在这种情况下，“\n”不会被视为一个字符，而是实际的两个字符“\”和“n”。

主要目标是允许你访问输入时的字符串。

var myRawFunction = function (strings,...values) {
    var output = "";
    for (var index = 0; index < values.length; index++) {
        output += strings.raw[index] + values[index];
    }

    output += strings.raw[index]

    console.log(strings.length, values.length);
    return output;
}

result.innerHTML = myRawFunction `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

此代码生成以下输出：

你的购物车中有 3 件商品\n。总计 100.5 美元。

你还可以使用 String 的一个新函数：String.raw()。此函数是一个内置函数，其功能与我前面的示例完全相同。

result.innerHTML = String.raw `You have ${items.length} item(s) in your basket\n.For a total of $${total}`;

结论

Microsoft Edge 和最新版本的 Chrome（41+）、Opera（28+）和 Firefox（35+）支持模板字符串，你可以在此处跟踪 ECMAScript 6 的整体支持级别。因此，如果你以现代 Web 为目标，就没有理由不拥抱模板字符串。

要全面了解 Microsoft Edge 中有哪些新的 Web 标准和功能（例如 WebAudio），你可以在dev.modern.ie/platform/status 查看完整列表。

理解 ECMAScript 6：模板字符串

解决换行问题

那么模板部分又是什么呢？

深入了解标签

原始字符串

结论

更多关于 JavaScript 的实践