javascript - ES6 模板文字与串联字符串

Question

我有以下 ECMAScript 6 的代码模板字面量:

let person = {name: 'John Smith'};
let tpl = `My name is ${person.name}.`;
let MyVar = "My name is " + person.name + ".";

console.log("template literal= " + tpl);
console.log("my variable = " + MyVar);

输出如下:

template literal= My name is John Smith.
my variable = My name is John Smith.

This是 fiddle 。

我尝试寻找确切的差异，但找不到，以下两种说法有什么区别？

  let tpl = `My name is ${person.name}.`;

和

  let MyVar = "My name is "+ person.name+".";

我已经能够在此处获得与 person.name 连接的字符串 MyVar，那么使用模板文字的场景是什么？

Answer 1

如果您仅在问题示例中使用带有占位符的模板文字(例如 `Hello ${person.name}`)，则结果与仅连接字符串相同。主观上它看起来更好并且更容易阅读，特别是对于多行字符串或同时包含 ' 和 " 的字符串，因为您不必再​​转义这些字符。

可读性是一个很棒的功能，但模板最有趣的地方是Tagged template literals :

let person = {name: 'John Smith'}; 
let tag = (strArr, name) => strArr[0] + name.toUpperCase() + strArr[1];  
tag `My name is ${person.name}!` // Output: My name is JOHN SMITH!

在本例的第三行中，调用了一个名为 tag 的函数。模板字符串的内容被拆分为多个变量，您可以在 tag 函数的参数中访问这些变量:文字部分(在本例中为 strArr[0] 的值> 是 我的名字是 并且 strArr[1] 的值是 !) 和替换 (John Smith) .模板文字将被评估为 tag 函数返回的任何内容。

ECMAScript wiki列出了一些可能的用例，例如自动转义或编码输入，或本地化。您可以创建一个名为 msg 的标记函数，它会查找像 My name is 这样的文字部分，并将其替换为当前语言环境的语言的翻译，例如德语:

console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.

标签函数返回的值甚至不必是字符串。您可以创建一个名为 $ 的标记函数，它评估字符串并将其用作查询选择器以返回 DOM Node 的集合，如 example :

$`a.${className}[href=~'//${domain}/']`