ES6标签模板实际可用性ES6标签模板实际可用性(ES6 tagged templates prac

我明白ES6的语法标记的模板。我不明白的是踏实的可用性。当它比传递对象参数，如在设置好jQuery的AJAX ？ $.ajax('url', { /*this guy here*/ })

现在，我只看到了棘手的语法，但我不明白为什么我需要/使用它。我还发现，打字稿团队选择了之前其他重要功能来实现它（1.5英寸）。什么是背后的标签字符串模板的概念？

Answer 1:

您可以使用标签模板，以建立比普通函数调用更有表现力的API。

例如，我工作的一个验证的概念库对SQL查询的JS数组：

let admins = sql`SELECT name, id FROM ${users} 
                 WHERE ${user => user.roles.indexOf('admin') >= 0}`

注意它无关路线插值; 它使用标签模板的可读性。这将是很难建立的东西，与普通的函数调用的直观读取 - 我想你有这样的事情：

let admins = sql("SELECT name, id FROM $users WHERE $filter",
  { $users: users, $filter: (user) => user.roles.contains('admin') })

这个例子仅仅是一个有趣的一面项目，但我认为这显示了一些带标签的模板的好处。

另外一个例子，也许更加明显，国际化是 - 一个标签模板可以将您输入的语言环境敏感的版本。

Answer 2:

见SitePoint的解释 ：

模板字符串规范的最后阶段是如何添加自定义函数字符串本身之前创建一个标签模板字符串。
...
例如，下面是一段代码来阻止字符串，尝试注入定制的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}`; 
标签模板字符串可以用于很多事情，如安全性，本土化，创建自己的领域特定语言，等等。

Answer 3:

他们是有用的，因为该功能可以（几乎）完全定义它里面的文本（几乎比=占位符等）的意思。我喜欢用史蒂芬Levithan的的例子XRegExp库。这是难以使用定义为字符串的正则表达式，因为你要双逃逸的事情：一旦字符串文字，以及一次正则表达式。这是我们在JavaScript中的正则表达式文字的原因之一。

举例来说，假设我的网站上做保养，我觉得这一点：

var isSingleUnicodeWord = /^\w+$/;

......这是为了检查是否字符串只包含“字母”。两个问题：A）有成千上万的跨越人类语言的境界“字”字符\w不承认，因为它的定义是英语为中心; 和B）它包括_ ，其中许多（包括Unicode联盟）会认为是不是一个“字母”。

假设在我的工作，我已经介绍XRegExp代码库。因为我知道它支持\pL （ \p对于Unicode类别，以及L的“字母”），我可能会很快交换这：

var isSingleUnicodeWord = XRegExp("^\pL+$"); // WRONG

然后，我想知道为什么它没有工作，*捂脸*，回去和逃避反斜杠，因为它是由字符串字面量消耗：

var isSingleUnicodeWord = XRegExp("^\\pL+$");
// ---------------------------------^

什么是痛苦。假设我可以写的实际正则表达式，而不用担心双转义？

我可以：带标签的模板功能。我可以把这个在我的标准库：

function xrex(strings, ...values) {
    const raw = strings.raw;
    let result = "";
    for (let i = 0; i < raw.length; ++i) {
        result += raw[i];
        if (i < values.length) { // `values` always has one fewer entry
            result += values[i];
        }
    }
    return XRegExp(result);
}

或者交替，这是一个有效的使用情况reduce了，我们可以在参数列表中使用解构：

function xrex({raw}, ...values) {
    return XRegExp(
        raw.reduce(
            (acc, str, index) => acc + str + (index < values.length ? values[index] : ""),
            ""
        )
    );
}

然后，我可以高兴地写：

const isSingleUnicodeWord = xrex`^\pL+$`;

例：

 // My tag function (defined once, then reused) function xrex({raw}, ...values) { const result = raw.reduce( (acc, str, index) => acc + str + (index < values.length ? values[index] : ""), "" ); console.log("Creating with:", result); return XRegExp(result); } // Using it, with a couple of substitutions to prove to myself they work let category = "L"; // L: Letter let maybeEol = "$"; let isSingleUnicodeWord = xrex`^\p${category}+${maybeEol}`; function test(str) { console.log(str + ": " + isSingleUnicodeWord.test(str)); } test("Русский"); // true test("日本語"); // true test("العربية"); // true test("foo bar"); // false test("$£"); // false

 <script src="https://cdnjs.cloudflare.com/ajax/libs/xregexp/3.2.0/xregexp-all.min.js"></script>

我现在要记住的唯一的事情就是${...}是特殊的，因为它是一个占位符。在这种特殊情况下，这不是一个问题，我不太想量词应用到终端的输入断言，但是这是一个巧合？

文章来源: ES6 tagged templates practical usability