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中找不到关于这些倾斜引号的任何内容

下面是一个简单的代码笔来说明这个问题：

http://codepen.io/lukastillmann/pen/MegXwQ

Answer 1

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

模板文本是允许嵌入表达式的字符串文本。您可以将多行字符串和字符串插值功能与它们一起使用。它们在ES2015/ES6规范的先前版本中被称为"模板字符串"。

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

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

Answer 2

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

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