ES6 模板文本与串联字符串

Question

我有以下ECMAScript 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}.`;

和

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

我已经能够在这里获得与< code>person.name连接的字符串< code>MyVar,那么在什么场景中使用模板文字呢？

Answer 1

它要干净得多，正如评论中所述，这是另一种语言的常见特性。我发现另一个不错的地方是换行符，在写字符串时非常有用。

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);

Answer 2

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

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);

如您所见，我们在一系列字符周围使用了…"，这些字符被解释为字符串文字，但${…}形式的任何表达式都会立即内联解析和评估。

内插字符串文字的一个非常好的好处是允许它们拆分为多行：

var Actor = {"name" : "RajiniKanth"};

var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
// Now is the time for all good men
// to come to the aid of their
// country!

插值表达式

任何有效的表达式都允许出现在 ${..} 的内插字符串 lit-eral 中，包括函数调用、内联函数表达式调用，甚至其他插行字符串文字！

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使用< code>template literal,通过减少麻烦，可读性肯定更好。

简单的老方法：

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

对于ES6:

`<div class="${className}">
  <p>${content}</p>
  <a href="${link}">Let's go</a>
</div>`

• 字符串可以跨越多行。
• 您不必转义引号字符。
• 您可以避免以下分组：“”

标记模板文字

我们还可以标记< code>template字符串，当标记< code>template字符串时，< code >文字和替换被传递给返回结果值的函数。

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运算符传递多个值。第一个参数-我们称之为字符串-是所有普通字符串的数组（任何插值表达式之间的内容）。

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

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);

原始字串

我们的标记函数接收我们称为＜code＞字符串＜/code＞的第一个参数，它是＜code＞数组＜/code＞。但还有一部分数据包括在内：所有字符串的原始未处理版本。您可以使用＜code＞访问这些原始字符串值。raw属性，如下所示：

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

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

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

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

Answer 3

如果像问题示例中那样，仅使用带有占位符的模板文字(例如< code > ` hello $ { person . name } `)，则结果与仅连接字符串相同。从主观上看，它看起来更好，更容易阅读，特别是对于多行字符串或同时包含< code>'和< code>"的字符串，因为您不必再对这些字符进行转义。

可读性是一个很好的特性，但关于模板最有趣的是标记模板文字：

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!

在本例的第三行中，调用了一个名为标签的函数。模板字符串的内容被分成多个变量，您可以在标签函数的参数中访问这些变量：文字部分（在本例中，strArr[0]的值是My name is的值是！）和替换（John Smith）。模板文字将被计算为标签函数返回的任何值。

ECMAScript wiki列出了一些可能的用例，如自动转义或编码输入或本地化。您可以创建一个名为msg的标记函数，查找像我的名字是这样的文字部分，并将它们替换为当前语言的翻译，例如德语：

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

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

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