在JavaScript中，字符串中的${}（美元符号和花括号）表示模板字面量中的占位符，可以用于插入变量或表达式的值。

Question

我在这里和MDN上都没有看到相关的内容。我确信我只是错过了某些东西。一定有一些关于此的文档。

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

示例：

var string = 'this is a string';

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

- Darren Joy

---

ECMAScript 2015 模板字面量（template literals）是一种允许 JavaScript 开发者使用字符串插值和多行字符串的语法。用反引号（`）包裹的模板字面量可包含占位符，占位符被 ${} 包裹，并可以在运行时被动态替换为变量或表达式的值。此外，模板字面量也可以跨越多行而无需使用转义字符。 - user1106925

这是个不错的问题。这是一个新功能，在SO上我确实找不到重复的内容，但提供具体看到的内容会更好。请注意，我的翻译可能略微超过原文长度限制。 - user1106925

@squint - 我同意，但提供示例代码和引用来源会更有帮助。 - RobG

在过去的几年中，我从未在这里提出过问题。现在似乎SO几乎拥有了所有东西... 在编程挑战中引用了一个给定的参考，好像它是你只需使用的东西。我没有看到任何关于它的内容，也找不到任何信息。 - Darren Joy

Answer 1

你在谈论模板字面量。

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

多行字符串：

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

字符串插值：

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

- Rick Runyon

---

有一件事情让我感到困惑已久，那就是模板字面量使用的反引号键，在键盘上位于数字1的左侧，而不是单引号（'）。请您为我翻译这句话。 - Sydney

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

“模板字面量”在IE中不被支持，这很奇怪，或许是因为IE不支持酷炫的东西。阅读更多 - Muhammad Musavi

似乎是字符串拼接的替代方案 console.log("让我们在 "+foo+" 见面"); - user3015682

@Sydney，我想让你知道，在看到你关于反引号的评论之前，我一直很困惑为什么我的字符串插值不起作用。非常感谢你！！ - pozzy

Answer 2

如上方评论所述，您可以在模板字符串/文字中使用表达式。例如：

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

- Joel H

---

使用模板字符串将代码注入到字符串中，这种说法正确吗？ - carloswm85

你正在注入表达式，而表达式就是代码。然而，你只能注入JavaScript表达式，而不能注入任何类型的代码。 - Joel H

我会尽量更具体地说明。当使用字符串字面值时，我可以使用 ${ } 符号将表达式（如 _obj.value_）嵌入到任何字符串中。对吗？ - carloswm85

是的，您可以在控制台中尝试自己的代码，例如 hey ${obj.name}。 - Joel H

Answer 3

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

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

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

- Shalom Effiom

Answer 4

它用于在字符串内引用变量：

let someVar = "World!"
console.log(`Hello ${someVar}`); // Output is Hello World!

- Khachik

Answer 5

它被用作变量插值 ${variable_name}

- Abdulfattah

Answer 6

const firstName = 'Sachin'; const age = 16 alert(${firstName}今年${age}岁了)

//Sachin今年16岁

- sachin g