我有以下Ecma-Script-6代码 template literals
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了,那么使用模板文字的方案是什么?
MyVar
person.name
如果Hello ${person.name}像问题示例中那样仅将模板文字与占位符(例如)一起使用,则结果与串联字符串相同。从主观上讲,它看起来更好并且更易于阅读,特别是对于多行字符串或包含这两者的字符串',"因为您不必再转义那些字符了。
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函数返回的值进行评估。
tag
strArr[0]
My name is
strArr[1]
!
John Smith
在ECMAScript的维基列出了一些可能的使用情况下,如自动转义或编码输入,或定位。您可以创建一个名为的标记函数msg,该函数查找类似的文字部分My name is,并用当前语言环境的语言(例如德语)的翻译替换它们:
msg
console.log(msg`My name is ${person.name}.`) // Output: Mein Name ist John Smith.
标记函数返回的值甚至不必是字符串。您可以创建一个名为tag的标记函数$,该函数对字符串进行求值并将其用作查询选择器以返回DOM节点的集合,如本例所示:
$
$`a.${className}[href=~'//${domain}/']`