jquery slanted/curly 引号混淆

jquery slanted/curly quotation marks confusion

我刚刚遇到这种附加字符串的变体,该字符串包含存储在变量中的值,这是我以前从未见过的。谁能帮我解释一下这是怎么回事?

这是我遇到的:

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 来说明这个问题:

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

反引号分隔的字符串文字是 JavaScript 自 EcmaScript2015 以来的语法添加:它们表示 template literal:

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 / ES6 specification.

出现在模板文字中的美元符号和大括号允许 "expression interpolation",这就是您在示例中看到的情况。

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

那些 "slanted" 引号通常称为反引号。这种类型的字符串称为 "template string",并添加到 ECMAScript 6(许多浏览器的 Javascript 引擎正在努力实现的标准)中。较旧的浏览器不支持它,但在较新的浏览器中,它可以允许对变量进行插值,这很有用。

有关介绍,请参阅 this blog post from Mozilla