ES6模板文字Vs串联字符串 [英] ES6 Template Literals Vs concatenated strings

问题描述

pre $ p $ $ $ $ $ $ c> let person = {name：'John Smith'};
let tpl =`我的名字是$ {person.name}。
让MyVar =我的名字是+ person.name +。;

console.log（template literal =+ tpl）;
console.log（my variable =+ MyVar）;

输出如下：

 模板文字=我的名字是约翰·史密斯。 
我的变量=我的名字是约翰·史密斯。 
  

这个是小提琴。
我尝试搜索确切的差异，但找不到它，
我的问题是这两个语句之间的区别，

  let tpl =`我的名字是$ {person.name}。 
  

和

  let MyVar =我的名字是+ person.name +。; 
  

我已经能够获取字符串 MyVar 连接到 person.name 这里，那么使用模板文字的场景是什么？

解决方案

如果您正在使用模板文字与占位符（例如 $ {expression} ），就像问题示例中那样，结果与只是连接字符串。主观上看起来更好，更容易阅读，特别是对于包含'和的多行字符串或字符串你不必再逃脱这些角色了。

可读性是一个很好的功能，但模板最有趣的是标记的模板字符串：

  let person = {name：'John Smith'}; 
 tag`我的名字是$ {person.name}。
  

在这个例子中，第二行调用一个名为标签的函数，内容的模板字符串被分成多个变量，你可以访问标签函数的参数：文字部分（在这个例子中，我的名字是和。）和替换（ John Smith ）。模板文字将是eva

标签 ECMAScript wiki中列出了一些用例，例如自动转义或本地化。您可以创建一个名为 msg 的标签函数，查找文本部分，如我的名字是，并将其替换为翻译当前语言环境的语言，例如德语：

  console.log（msg`我的名字是$ {person.name}。 `）//输出：Mein Name ist John Smith。 
  

标签函数返回的值甚至不必是字符串。此查询选择器示例应该返回一组DOM节点：

  $`a。$ {className} [href =〜 '// $ {domain} /']`
  

I have the following code for 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);

The output is as follows:

template literal= My name is John Smith.
my variable = My name is John Smith.

this is the fiddle. I tried searching for the exact difference but couldn't find it, My question is what is the difference between these two statements,

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

And

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

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 ?

解决方案

If you are using template literals only with placeholders (e.g. ${expression}) 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 strings:

let person = {name: 'John Smith'};   
tag `My name is ${person.name}.`

In this example, in the second line, 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 My name is and .) and substitutions (John Smith). The template literal will be evaluated to whatever the tag function returns.

The ECMAScript wiki lists some use cases, like auto escaping 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.

The value returned by the tag function doesn't even have to be a string. This query selector example is supposed to return a collection of DOM nodes:

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

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