ES6模板文字与串联字符串

ES6模板文字与串联字符串

如果

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]

is

My name is

的值和

strArr[1]

is 的值

!

）和替代项（

John Smith

）。模板文字将根据

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}/']`