ES6 JavaScript 模板文字 - 他们能做什么和不能做什么答案

【问题标题】：ES6 JavaScript template literals - What they can and can't doES6 JavaScript 模板文字 - 他们能做什么和不能做什么
【发布时间】：2017-09-25 10:08:00
【问题描述】：

模板文字使字符串操作更容易。然而：

与 mustache 和 handlebars 等模板库相比，它们能做什么和不能做什么？
我发现很难找到这些问题的答案：他们可以处理条件吗？他们可以处理循环吗？他们能处理函数吗？

【问题讨论】：

找到答案的最佳方式是阅读documentation。
我查看了 MDN 和微软的 JS 文档。两者都根本没有提到这个话题。他们没有关于使用带有条件、循环和函数的模板文字的能力的信息。
你在说什么“条件”？模板文字可以包含任何返回 ${...} 中的值的单行表达式
啊哈。这是我一直在寻找的答案。我不明白为什么它可以处理一些功能，例如映射内联条件，但不能处理“常规条件”。无论如何，您的注释和投票建议我没有查看文档或搜索网络，但事实并非如此。
ES6 tagged templates practical usability, template literals are string interpolation, not "templates"

标签： javascript templates ecmascript-6

【解决方案1】：

这个名字有点含糊，但是模板字面量并不能代替模板引擎。它们的作用只是提供更方便的语法来处理字符串。事实上，我们的目标是像 CoffeeScript 一样将字符串插值引入核心 JavaScript，以及干净的多行字符串的可能性。

这段代码...

let foo = 'Foo',
    bar = 'Bar',
    baz = 'Baz';

console.log(`${foo} ${bar} ${baz}`);

...比这个更容易维护：

var foo = 'Foo',
    bar = 'Bar',
    baz = 'Baz';

console.log(foo + ' ' + bar + ' ' + baz);

另外，这段代码……

let str = `Foo
Bar
Baz`;

...比这个更具可读性：

var str = 'Foo\n\
Bar\n\
Baz';

即使它们不替换模板引擎，模板文字也可能对预处理字符串有用（请参阅标记的模板文字）。有了这个功能，我们可以使用自定义的htmlentities 函数来转义字符串：

function htmlentities(raw) {
  let str = raw[0];
    
  return str.replace(/&/g, '&amp;')
            .replace(/>/g, '&gt;')
            .replace(/</g, '&lt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&apos;');
}
    
console.log(htmlentities`&><\"\'`);

在底层，带标签的模板文字是众所周知的字符串操作实践的语法糖，sprintf 在许多编程语言中体现了这一实践：

let foo = 'Foo',
    bar = 'Bar';

function htmlentities(raw, ...args) {
  console.log('String pieces:');
  console.log(raw);
  console.log('String arguments:');
  console.log(args);
  
  return 'Cool, isn\'t it?';
}

console.log(htmlentities`Hello, ${foo} and ${bar}!`);

【讨论】：

标记模板更加强大，因为它们不必返回字符串。
是的，这是一个很棒的功能。 :)

【解决方案2】：

ES6 模板字面量和模板库（例如把手）之间的根本区别在于 ES6 模板字面量只是语言的一部分，而模板语言/引擎是提供更高级别 API 的有用的库用于制作大而复杂的字符串，例如 HTML 页面，而无需在 JavaScript 中参与低级别的字符串操作。换句话说，它们解决了不同的问题。

ES6 模板文字可以更准确地被认为是处理 var str = "This is some text with "+someContent+" inserted into it." 或 "This is some text with "+someFunction(param, param2)+" inserted into it." 之类的语法糖

从好的方面来说，您可以在 JavaScript 中执行的任何逻辑，您都可以使用模板字面量来执行，而在不利方面，它不会为您提供更高级别的 API。它只是让 JavaScript 字符串处理更流畅一些，就像在 Python 和 Ruby 等其他一些语言中一样。

【讨论】：

【解决方案3】：

与标准字符串文字相比，JavaScript 模板语言将为您提供一组不同的表达式和选项。它们没有可比性。模板语言可以在表达式中使用 字符串文字/模板字符串 - 但字符串文字只是普通的 JavaScript。

var message = "Hello, " + name + ". How are you doing today? The room is " + (width * height) + " square feet.";

var message = `Hello, ${name}. How are you doing today? The room is ${width * height} square feet.`;

所以，数学 - 以及所有 a * b 等的工作方式相同 - 但只是为您提供了更通用的语法。

车把助手（作为“模板语言”的示例）由一组注册的函数支持/来自标准库或在其之上构建。

//一些数据

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

// 注册一个“助手”

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";

  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }

  return out + "</ul>";
});

// 使用助手

{{#list people}}
  {{firstName}} {{lastName}}
{{/list}}

或者类似的来自图书馆的东西

{{moment-from-now (now interval=1000)}} // interval is in ms`

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

【讨论】：