小编典典

ES6模板文字与串联字符串

javascript

我有以下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,那么使用模板文字的情形将是什么?


阅读 295

收藏
2020-05-01

共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}/']`
2020-05-01