ES6模板文字与串联字符串

Question

我有以下Ecma-Script-6代码 template literals

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.





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

和

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

我已经能够在此处将字符串MyVar串联起来person.name，那么使用模板文字的情形将是什么？

Answer 1

如果Hello${person.name}像问题示例中那样仅将模板文字与占位符（例如）一起使用，则结果与串联字符串相同。从主观上讲，它看起来更好并且更易于阅读，尤其是对于多行字符串或包含这两者的字符串'，"因为您不必再​​转义那些字符了。

可读性是一个很棒的功能，但是关于模板最有趣的是Tagged模板文字：

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]isMynameis的值和strArr[1]is的值!）和替代项（JohnSmith）。模板文字将根据tag函数返回的值进行评估。

在ECMAScript的维基列出了一些可能的使用情况下，如自动转义或编码输入，或定位。您可以创建一个名为的标记函数msg，该函数查找类似的文字部分Myname is，并用当前语言环境的语言（例如德语）的翻译替换它们：

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

标记函数返回的值甚至不必是字符串。您可以创建一个名为tag的标记函数$，该函数对字符串进行求值并将其用作查询选择器以返回DOM节点的集合：

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