详细的JavaｓｃｒｉｐｔES6模板字符串

在6，引入一个新的字符串字面量的模板字符串。除了使用反引号外，它们看起来不同于普通字符串，在最简单的情况下，它们是普通字符串：

context.filltext（` CECI n'est PAS UNE机会。`，x，y）；

context.filltext（` CECI n'est PAS UNE机会。`，x，y）；
它被称为模板字符串，因为模板字符串是JS，它引入了字符串插值的简单字符，也就是说，它可以方便地、优雅地将JS的值插入到字符串中。

在许多地方，您可以使用模板字符串来查看这个不显眼的错误消息：

函数授权（用户，动作）{
如果（！User.hasPrivilege（行动））{
抛出新错误（
不允许用户{用户名}执行{ }；
}
}

函数授权（用户，动作）{
如果（！User.hasPrivilege（行动））{
抛出新错误（
不允许用户{用户名}执行{ }；
}
}
在上面的代码中，用户名称}和{美元。美元{action}称为模板。Javaｓｃｒｉｐｔ将user.name和动作值到相应的位置，然后生成字符串，如用户jorendorff无权授权。

现在，我们看到了一个更优雅的语法比+运算符，这里是一些功能，你期待着：

模板占位符可以是任何Javaｓｃｒｉｐｔ表达式，因此函数调用和四操作都是合法的（甚至可以在一个模板字符串中嵌套另一个模板字符串）。

如果一个值不是一个字符串，将其转换为一个字符串。例如，如果动作是一个对象，然后the.tostring（）的对象将被转换为一个字符串。

如果你想在一个模板字符串中使用反引号，你需要使用反斜杠转义。

同样，如果你想输出在模板字符串，还需要使用转义字符： $ {或$ {。

模板字符串可以跨越多行：
$（#警告）。Html（`
看了！
未经授权的hockeying可能导致的处罚
高达{ maxpenalty }分钟。
`）；

$（#警告）。Html（`
看了！
未经授权的hockeying可能导致的处罚
高达{ maxpenalty }分钟。
`）；

模板字符串中的所有空格、行和缩进将导出到原始示例中的结果字符串中。

让我们看看模板字符串不做什么：

不自动转义特殊字符，为了避免XSS漏洞，你需要小心不可信的数据，这一点与普通的弦。

它不能与国际化的图书馆一起使用，也不能处理特殊语言格式的编号、日期等。

没有一个模板引擎的替代品（如胡子或nunjucks）。模板串不处理循环语法-你不能建立一个表（表）的数组。

为了解决这些限制，6提供了另一个模板标签模板的开发者和库的设计。

标签的模板语法简单，只有一个标签介绍在反引号的开始。看第一个例子：saferhtml，我们使用这个标签模板解决第一个限制：自动转义特殊字符。

需要注意的是，该方法不受saferhtml ES6标准库提供的重要的，我们需要实现它自己：

VaR消息=
saferhtml ` $ {撞墙。发送者}送给你`撞墙；

VaR消息=
saferhtml ` $ {撞墙。发送者}送给你`撞墙；
这里的saferhtml标签单标识，标签也可以是属性，如SaferHTML.escape，甚至调用方法：saferhtml.escape（{ unicodecontrolcharacters：假}）。准确地说，任何成员或调用ES6表达表达可以作为一个标签。

正如您所看到的，模板字符串只是字符串连接的语法糖，而标签模板实际上是一个完全不同的东西：函数调用。

因此，上面的代码相当于：

VaR消息=
SaferHTML（templatedata，撞墙。发送者）；

VaR消息=
SaferHTML（templatedata，撞墙。发送者）；
在templatedata是不可变的字符串数组的JS引擎源基于模板生成的字符串，数组包含两个元素，因为模板字符串分割后的占位符包含两个字符串，因此，templatedata是这样的：object.freeze

（事实上，有templatedata：templatedata.raw，另一个属性，本文不深入讨论。这个属性，这个属性的值是一个数组，其中包含所有的弦乐部分在标签模板，但字符串包含转义序列，这看起来更像是在源代码中的字符串，如。6内置的标签，string.raw，将使用这些字符串。）

这让saferhtml方法解析两个字符串时，有在一个置换

当你继续阅读的钱，你可能想知道如何实现saferhtml方法。

以下是实现（要旨）：

功能saferhtml（templatedata）{
var = templatedata { 0 }；
对于（var i = 1；i < arguments.length；i++）{
字符串（参数{ }）；

代换中的特殊字符。 /转义
S = arg.replace（ / / G ）
替换
替换；

不要转义模板中的特殊字符。
S = templatedata {我}；
}
返回的；
}

功能saferhtml（templatedata）{
var = templatedata { 0 }；
对于（var i = 1；i < arguments.length；i++）{
字符串（参数{ }）；

代换中的特殊字符。 /转义
S = arg.replace（ / / G ）
替换
替换；

不要转义模板中的特殊字符。
S = templatedata {我}；
}
返回的；
}

使用上面的方法，用户也可以安全地使用恶意用户名。

一个简单的例子不足以说明标签模板的灵活性。让我们重温上面列出的模板字符串的局限性，看看我们还能做些什么。

模板字符串不会自动转义特殊字符，但是我们可以通过标记模板来解决这个问题。事实上，我们可以写saferhtml更好。从安全的角度来看，SaferHTML是非常脆弱的，在HTML中，不同的地方需要不同的转移方式，并saferhtml不做一点思想，我们可以实现更灵活的saferhtml方法，可以逃脱任何一个HTML templatedata，知道这是纯HTML占位符；这是一个元素的属性，从而为'和'逃跑的需要；这是一个查询字符串的URL，并从需要使用转义URL的方法，而不是HTML转义等等。这似乎有点牵强，因为HTML效率不高。如是，标签的模板字符串保持不变，和saferhtml可以缓存已逃到提高效率的琴弦。

模板字符串没有内置的国际化功能，但我们可以通过标签模板添加此功能。Jack Hsu文章详细描述了实现过程，并查看了以下示例：
{姓名}美元国际化的`你好，你有$ {数量}：C（CAD）在您的银行帐户。`
喂她 / / = >鲍伯，有1.234,56 $ CA在Ihrem Bankkonto。

{姓名}美元国际化的`你好，你有$ {数量}：C（CAD）在您的银行帐户。`
喂她 / / = >鲍伯，有1.234,56 $ CA在Ihrem Bankkonto。

在上面的姓名和金额的例子是很好理解的，将由相应的字符串的JS引擎取代，但有一个看不见的占位符：：C（CAD），这将是国际化的标签处理，从国际化的文献表明：C（CAD）是加拿大美元货币价值量。

模板字符串不能代替模板引擎如胡子和nunjucks，部分是因为模板不支持循环和条件语句，我们可以写一个标签来实现这样的功能：
基于模板的假设模板语言
标记的模板。 / / ES6
无功libraryhtml = hashtemplate `

在我的书# } $ {
# {标题}的书。# {作者}的书。
#结束

`；
基于模板的假设模板语言
标记的模板。 / / ES6
无功libraryhtml = hashtemplate `

在我的书# } $ {
# {标题}的书。# {作者}的书。
#结束

`；

灵活性不止于此。需要注意的是，标签函数的参数不会自动转换成字符串，而参数可以是任意类型的，返回值也是一样的。您可以使用自定义标记来创建表示整个异步过程的正则表达式、DOM树、图片、承诺、js数据结构、GL着色器。

标签模板允许库设计人员创建强大的特定于域的语言。这些语言可能看起来不像JS，但它们可以无缝地嵌入到js中，并可以与其他语言交互。我不知道这个特性给我们带来了什么，但是各种各样的可能性是非常令人兴奋的。