javascript - jquery 倾斜/弯引号混淆

Question

我刚刚遇到了这种附加字符串的变体，该字符串包含存储在变量中的值，这是我以前从未见过的。谁能帮我解释一下这里发生了什么？

这就是我遇到的：

var fruit = "banana"; 
$main = $('.main');

$main.append(`<p>${fruit} is a fruit.</p>`);
=> 'banana is a fruit.'

倾斜的引号在这里似乎有所作为，因为这显然不能解决问题：

$main.append('<p>$(fruit) is a fruit.</p>');
=> '$(fruit) is a fruit.'

这可能是我现在没有看到的简单的东西。你能给我解释一下，这里发生了什么吗？我在互联网上的 Javascript/JQuery 中找不到关于这些倾斜引号的任何信息

这是一个简单的 Codepen 来说明这个问题：

score 7 · Accepted Answer

反引号分隔的字符串文字是自 EcmaScript2015 以来 JavaScript 中的语法添加：它们表示模板文字：

模板文字是允许嵌入表达式的字符串文字。您可以使用多行字符串和字符串插值功能。在 ES2015 / ES6 规范的早期版本中，它们被称为“模板字符串”。

模板文字中出现的美元符号和大括号允许“表达式插值”，这就是您在示例中看到的情况。

由普通单引号或双引号分隔的字符串将美元符号和大括号视为文字字符；它们不支持表达式插值。

score 2 · Accepted Answer

那些“倾斜”的引号通常称为反引号。这种类型的字符串称为“模板字符串”，是在 ECMAScript 6（许多浏览器的 Javascript 引擎正在努力实现的标准）中添加的。较旧的浏览器不支持它，但在较新的浏览器中，它可以允许这种有用的变量插值。

有关介绍，请参阅Mozilla的这篇博文。

2 回答 2