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

160

在这里或MDN上我什么都没看到。我确定我只是想念一些东西。在某处必须有一些文档？

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

例：

var string = 'this is a string';

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

展开摘要

— 达伦·乔伊
source

您可以为所要询问的内容提供一些背景信息吗？这个问题在书面上还不清楚。

— 山姆·汉利

3

ECMAScript 2015模板文字

5

这不是一个坏问题。这是一项新功能，尽管确实可以很好地看到一个示例，但我肯定无法在SO上找到重复项。

@squint-同意，但是示例代码和对源的引用会有所帮助。

— RobG'3

添加示例。参考是在编码方面的挑战，但它是给定的，就好像您只是在使用它一样。没有看到任何东西，也找不到任何东西。（在过去的几年中，我从来没有在这里问过Q。所以现在似乎几乎已经有了所有东西...）

— Darren Joy

192

您正在谈论模板文字。

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

多行字符串：

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

展开摘要

字符串插值：

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

展开摘要

— 里克·鲁尼恩
source

67

很长一段时间以来让我感到困惑的一件事是模板文字使用反引号，它位于键盘上“ 1”的左侧，而不是单引号（'）。

— 悉尼

19

酷：您甚至可以“注入”代码：console.log(`Your array:\n ${arr.join('\n ')}`)

— T4NK3R

5

Template LiteralIE不支持这很奇怪，或者IE不支持很酷的东西是很自然的。阅读更多

— Mohammad Musavi '19

12

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

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

展开摘要

— 乔尔·H
source

可以使用模板字符串将代码注入字符串中是否正确？

— carloswm85

您正在注入表达式，而表达式是代码。您不能注入任何类型的代码，但是只能注入JavaScript表达式。

— Joel H

我将尝试更具体。使用字符串文字时，我可以使用$ {}表示法将obj.value之类的表达式插入任何字符串中。对？

— carloswm85

是的，您可以在控制台中自己尝试一下，例如hey ${obj.name}

— Joel H

0

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

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

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

— 沙洛姆·大卫（Shalom David）
source