Javascript ES6模板文字与串联字符串

我有Ecma-Script-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.

这是小提琴。 我试着寻找确切的差别，但找不到， 我的问题是这两种说法有什么区别

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

及

---

我已经能够在这里将字符串

MyVar

与

person.name

连接起来，那么使用模板文本的场景是什么呢？

它更干净，正如注释中所述，这是其他语言的一个常见特性。 另一件我觉得很好的事情是换行符，在写字符串时非常有用

let person = {name: 'John Smith', age: 24, greeting: 'Cool!' };

let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
                   "<p>I am " + person.age + " old</p>\n" +
                   "<strong>\"" + person.greeting +"\" is what I usually say</strong>";


let newHtmlStr = 
 `<p>My name is ${person.name},</p>
  <p>I am ${person.age} old</p>
  <p>"${person.greeting}" is what I usually say</strong>`;


console.log(usualHtmlStr);
console.log(newHtmlStr);

let person={姓名：'John Smith'，年龄：24岁，问候语：'Cool！'；
让usualHtmlStr=“我的名字是“+person.name+”，
\n+
我是“+person.age+”old
\n+
“\”+person.greeting+“\”是我通常说的话；
设newHtmlStr=
` 我的名字是${person.name}

我是${person.age}岁

“${person.greeting}”是我通常说的话`；
console.log（通常为HTMLSTR）；
console.log（newHtmlStr）；

如果像问题示例中那样，仅将模板文本与占位符一起使用（例如，

`Hello${person.name}`

），则结果与仅串联字符串相同。从主观上看，它看起来更好，更容易阅读，特别是对于多行字符串或同时包含

“

和

”

的字符串，因为您不再需要转义这些字符

可读性是一个很好的特性，但模板最有趣的地方是：

在本例的第三行中，调用了一个名为

tag

的函数。模板字符串的内容被拆分为多个变量，您可以在

tag

function:literal部分的参数中访问这些变量（在本例中，

strArr[0]的值）
是
我的名字是
，
strArr[1]
的值是
！
）和替换（
John Smith
）。模板文本将被计算为
标记
函数返回的任何值

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

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

标记函数返回的值甚至不必是字符串。您可以创建名为
$
的标记函数，该函数计算字符串并将其用作查询选择器，以返回DOM节点的集合，如下所示：

ES6
提出了一种新类型的字符串文字，使用
`
反勾号作为分隔符。这些文字允许嵌入基本的字符串插值表达式，然后自动解析和计算这些表达式

let actor = {name: 'RajiniKanth', age: 68};

let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
  "<p>I am " + actor.age + " old</p>\n";

let newWayHtmlStr =
 `<p>My name is ${actor.name},</p>
  <p>I am ${actor.age} old</p>`;

console.log(oldWayStr);
console.log(newWayHtmlStr);

插值表达式

任何有效表达式都可以在插入字符串
中的
${..}
中出现，包括函数调用、内联函数表达式调用，甚至其他插入字符串文本

function upper(s) {
 return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
// A very WARM welcome
// to all of you READERS!

在这里，当我们将who变量与
“s”
字符串相结合时，内部${who}s``插值字符串文字比who+“s”更方便“。还要注意的是，插入的字符串文字在其出现的地方只是
词汇范围
，而不是
动态范围

function foo(str) {
 var name = "foo";
 console.log( str );
}
function bar() {
 var name = "bar";
 foo( `Hello from ${name}!` );
}
var name = "global";
bar(); // "Hello from bar!"

对HTML使用
模板文本
，通过减少烦扰，无疑更具可读性

朴素的老办法：

'<div class="' + className + '">' +
  '<p>' + content + '</p>' +
  '<a href="' + link + '">Let\'s go</a>'
'</div>';


您的字符串可以跨越多行
您不必转义引号字符
您可以避免像““>”这样的分组
您不必使用加号运算符

标记的模板文本

我们还可以标记
模板
字符串，当标记
模板
字符串时，将
文本
和替换传递给返回结果值的函数

function myTaggedLiteral(strings) {
  console.log(strings);
}

myTaggedLiteral`test`; //["test"]

function myTaggedLiteral(strings,value,value2) {
  console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// "Neat"
// 5

我们可以在这里使用
spread
操作符来传递多个值。第一个参数——我们称之为字符串——是所有普通字符串（任何插值表达式之间的内容）的数组

然后，我们使用
…gather/rest操作符
将所有后续参数收集到一个名为values的数组中，当然您也可以像上面
（value1、value2等）
那样将它们作为字符串参数后面的单独命名参数

参数
收集到我们的值数组中的是字符串文字中已计算的插值表达式的结果。
标记的字符串文字
类似于计算插值后但编译最终字符串值之前的处理步骤，允许您更多地控制从li生成字符串让我们看一个创建
可重用模板的示例

const Actor = {
  name: "RajiniKanth",
  store: "Landmark"
}

const ActorTemplate = templater`<article>
  <h3>${'name'} is a Actor</h3>
  <p>You can find his movies at ${'store'}.</p>

</article>`;

function templater(strings, ...keys) {
  return function(data) {
  let temp = strings.slice();
  keys.forEach((key, i) => {
  temp[i] = temp[i] + data[key];
  });
  return temp.join('');
  }
};

const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);

如您所见，字符串的
raw
版本保留了转义的\n序列，而字符串的处理版本将其视为未转义的真正新行。
ES6
附带了一个内置函数，可以用作字符串文字标记：
string.raw（…）
。它只需通过
字符串的原始版本
：

console.log( `Hello\nWorld` );
/* "Hello
World" */

console.log( String.raw`Hello\nWorld` );
// "Hello\nWorld"

然而，我的回答并没有直接解决这个问题。我想指出使用模板文本支持数组连接的一个缺点可能会有一些兴趣

假设我有

let patient1 = {firstName: "John", lastName: "Smith"};
let patient2 = {firstName: "Dwayne", lastName: "Johnson", middleName: "'The Rock'"};

因此，一些患者有中间名，而另一些患者没有

如果我想要一个代表患者全名的字符串

let patientName = `${patient1.firstName} ${patient1.middleName} ${patient1.lastName}`;

然后这将成为“约翰·史密斯未定义”

function myTaggedLiteral(strings) {
  console.log(strings);
}

myTaggedLiteral`test`; //["test"]

function myTaggedLiteral(strings,value,value2) {
  console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// "Neat"
// 5

function myTaggedLiteral(strings,...values) {
  console.log(strings);
  console.log(values);    
}

let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
// ["test ", " ", ""]
// ["Neat", 5]

const Actor = {
  name: "RajiniKanth",
  store: "Landmark"
}

const ActorTemplate = templater`<article>
  <h3>${'name'} is a Actor</h3>
  <p>You can find his movies at ${'store'}.</p>

</article>`;

function templater(strings, ...keys) {
  return function(data) {
  let temp = strings.slice();
  keys.forEach((key, i) => {
  temp[i] = temp[i] + data[key];
  });
  return temp.join('');
  }
};

const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);

function showraw(strings, ...values) {
 console.log( strings );
 console.log( strings.raw );
}
showraw`Hello\nWorld`;

console.log( `Hello\nWorld` );
/* "Hello
World" */

console.log( String.raw`Hello\nWorld` );
// "Hello\nWorld"

let patient1 = {firstName: "John", lastName: "Smith"};
let patient2 = {firstName: "Dwayne", lastName: "Johnson", middleName: "'The Rock'"};

let patientName = `${patient1.firstName} ${patient1.middleName} ${patient1.lastName}`;

let patientName = [patient1.firstName, patient1.middleName,  patient1.lastName].join(" ");