${}（美元符号和花括号）在 Javascript 中的字符串中是什么意思？答案

【问题标题】：What does ${} (dollar sign and curly braces) mean in a string in JavaScript?${}（美元符号和花括号）在 Javascript 中的字符串中是什么意思？
【发布时间】：2016-06-20 12:12:34
【问题描述】：

我没有在这里或在 MDN 上看到任何东西。我确定我只是错过了一些东西。一定有一些关于这方面的文档吗？

从功能上讲，它似乎允许您将变量嵌套在字符串中，而无需使用 + 运算符进行连接。我正在寻找有关此功能的文档。

例子：

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);

【问题讨论】：

ECMAScript 2015 template literals
这不是一个坏问题。这是一项新功能，我肯定无法在 SO 上找到重复项，但如果能提供一个确切看到的示例就好了。
@squint——同意，但示例代码和对源代码的引用会有所帮助。
添加了示例。参考是一个编码挑战，但它是给定的，就好像它是你刚刚使用的东西。没有看到任何东西，也找不到任何东西。（在过去的几年里，我从来没有在这里问过问题。所以现在似乎几乎什么都有了......）

标签： javascript string variables concatenation

【解决方案1】：

你说的是template literals。

它们允许多行字符串和字符串插值。

多行字符串：

console.log(`foo
bar`);
// foo
// bar

字符串插值：

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar

【讨论】：

让我困惑很久的一件事是模板文字使用了反引号，它在键盘上“1”的左侧，而不是单引号（'）。
酷：你甚至可以“注入”代码：console.log(`Your array:\n ${arr.join('\n ')}`)
在 IE 中不支持 Template Literal 很奇怪，或者 IE 不支持很酷的东西是很自然的。 Read more
似乎可以替代字符串拼接 console.log("Let's meet at the "+foo);
@Sydney 只是想让你知道我很困惑为什么我的字符串插值不起作用，直到我看到你关于反引号的评论。谢谢你！！

【解决方案2】：

正如上面评论中提到的，您可以在模板字符串/文字中包含表达式。示例：

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3

【讨论】：

说模板字符串可以用来给字符串注入代码对吗？
您正在注入表达式，而表达式就是代码。您不能注入任何类型的代码，但只能注入 JavaScript 表达式。
我会尽量说得更具体一些。使用字符串文字时，我可以使用 ${ } 表示法在任何字符串中注入像 obj.value 这样的表达式。对吗？
是的，您可以在控制台中自己尝试一下，例如hey ${obj.name}

【解决方案3】：

您还可以使用模板文字执行隐式类型转换。示例：

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya

【讨论】：