javascript - ES6 JavaScript 模板文字——它们能做什么和不能做什么

Question

模板文字使字符串操作变得更加容易。然而:

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

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

function htmlentities(raw) {
  let str = raw[0];
    
  return str.replace(/&/g, '&')
            .replace(/>/g, '>')
            .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}!`);