ES6标记模板实用性

Question

我理解ES6 标记模板的语法.我看不到的是实用性.什么时候比传递一个对象参数更好,比如jQuery的AJAX中的设置？$.ajax('url', { /*this guy here*/ })

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

Answer 1

您可以使用标记模板来构建比常规函数调用更具表现力的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 - 标记的模板可以插入输入的区域设置敏感版本.

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

标记的模板字符串可用于许多事情,如安全性,本地化,创建自己的特定于域的语言等.