ES6 标记模板实用性

问题描述 投票：0回答：3

我了解 ES6 标记模板的语法。我没有看到的是实际可用性。什么时候比传递一个对象参数更好，比如 jQuery 的 AJAX 中的设置？ 

$.ajax('url', { /*this guy here*/ })

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

javascript ecmascript-6 template-strings tagged-templates
3个回答
10
投票

您可以使用标记模板来构建比常规函数调用更具表现力的 API。

例如，我正在开发一个概念验证库，用于 JS 数组上的 SQL 查询：

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') })

这个示例只是一个有趣的副项目，但我认为它显示了标记模板的一些好处。

另一个可能更明显的例子是 i18n - 标记模板可以插入输入的区域设置敏感版本。

8
投票

参见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}`;

标记模板字符串可用于很多事情，例如安全性、本地化、创建您自己的域特定语言等。

4
投票

它们很有用，因为该函数可以（几乎）完全定义其中文本的含义（几乎 = 除了占位符之外）。我喜欢使用 Steven Levithan 的 

XRegExp
库 的示例。使用定义为字符串的正则表达式很尴尬，因为您必须对事物进行两次转义：一次用于字符串文字，一次用于正则表达式。这是我们在 JavaScript 中使用正则表达式文字的原因之一。

例如，假设我正在网站上进行维护，我发现了这个：

const isSingleUnicodeWord = /^\w+$/;

...这意味着检查字符串是否只包含“字母”。两个问题：A）人类语言领域有成千上万个 

\w
无法识别的“单词”字符，因为它的定义是以英语为中心的； B) 它包括 
_
，许多人（包括 Unicode 联盟）认为这不是一个“字母”。

假设在我的工作中我已将 

XRegExp
引入了代码库。因为我知道它支持 
\pL
（
\p
表示 Unicode 类别，
L
表示“字母”），我可能会快速将其替换为：

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

然后我想知道为什么它不起作用，*捂脸*，然后返回并转义反斜杠，因为它被字符串文字消耗了：

const isSingleUnicodeWord = XRegExp("^\\pL+$");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

多么痛苦啊。假设我可以编写实际的正则表达式而不必担心双重转义？

我可以：使用标记模板函数，并在模板函数中使用模板字符串的

raw
版本（这样像
\n
或
\$
这样的转义符就不是转义符，它们只是一个反斜杠后面跟着另一个字符）。我可以将其放入我的标准库中：

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

然后我就可以愉快地写下：

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

示例：

// My tag function (defined once, then reused)
function xrex({raw}, ...values) {
    let result = "";
    for (let i = 0; i < raw.length; ++i) {
        result += raw[i];
        if (i < values.length) { // `values` always has one fewer entry than `raw`
            result += values[i];
        }
    }
    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>

我现在唯一要记住的是 

${...}
很特别，因为它是一个占位符（而 
\${...}
很特别，因为它不是 占位符，它是一个反斜杠后跟一个美元符号等）。一般来说，我不必担心转义（包括 \$
，当它不只是在
{...}
 之前，那么它并不特殊），但我确实必须考虑占位符。在这种特定情况下，这不是问题，我不太可能想要将量词 (
{
) 应用于输入结束断言 (
$
)，但这是特定于该用例的巧合。 .

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.