ES6 模板字面量与连接字符串 [英] ES6 template literals vs. concatenated strings

问题描述

我有以下代码用于 ECMAScript 6 模板文字:

I have the following code for ECMAScript 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.

这个是小提琴.

我试图寻找确切的区别，但我找不到，以下两种说法有什么区别?

I tried searching for the exact difference, but I couldn't find it, What is the difference between the following two statements?

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

和

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

我已经能够在此处获得与 person.name 连接的字符串 MyVar，那么使用模板文字的场景是什么?

I am already able to get the string MyVar concatenated with person.name here, so what would be the scenario to use the template literal in?

推荐答案

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

If you are using template literals only with placeholders (e.g. `Hello ${person.name}`) like in the question's example, then the result is the same as just concatenating strings. Subjectively it looks better and is easier to read, especially for multi-line strings or strings containing both ' and " since you don't have to escape those characters any more.

可读性是一个很棒的特性，但模板最有趣的地方是 标记模板文字:

Readability is a great feature, but the most interesting thing about templates are Tagged template literals:

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] 是 My name is 并且 strArr[1] 的值是 !) 和替换 (John Smith).模板文字将被评估为 tag 函数返回的任何内容.

In the third line of this example, a function named tag is called. The content of the template string is split into multiple variables, that you can access in the arguments of the tag function: literal sections (in this example the value of strArr[0] is My name is and the value of strArr[1] is !) and substitutions (John Smith). The template literal will be evaluated to whatever the tag function returns.

ECMAScript wiki 列出了一些可能的用例，例如自动转义或编码输入，或本地化.您可以创建一个名为 msg 的标记函数，它会查找诸如 My name is 之类的文字部分，并将它们替换为当前区域设置语言的翻译，例如德语:

The ECMAScript wiki lists some possible use cases, like automatically escaping or encoding input, or localization. You could create a tag function named msg that looks up the literal parts like My name is and substitutes them with translations into the current locale's language, for example into German:

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

标签函数返回的值甚至不必是字符串.您可以创建一个名为 $ 的标记函数，它会评估字符串并将其用作查询选择器来返回 DOM 节点的集合，例如 示例:

The value returned by the tag function doesn't even have to be a string. You could create a tag function named $ which evaluates the string and uses it as a query selector to return a collection of DOM nodes, like in this example:

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

这篇关于ES6 模板字面量与连接字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！