Question

模板文字使字符串操作更容易。但是：

与小胡子和把手等模板库相比，他们能做些什么，有什么用呢？
我发现很难找到这些问题的答案：他们能处理条件吗？他们可以处理循环吗？他们可以处理功能吗？

Answer 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函数转义字符串：

＆＃13;

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`&><\"\'`);

＆＃13;

在引擎盖下，标记的模板文字是许多编程语言中由sprintf体现的众所周知的字符串操作实践的语法糖：

＆＃13;

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

＆＃13;

Answer 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等其他语言中一样。

Answer 3

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

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

VS

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

ES6 JavaScript模板文字 - 他们可以做什么，不能做什么

3 个答案: