javascript - jquery 倾斜/ curl 引号混淆

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

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

Answer 1

反引号分隔的字符串文字是自 EcmaScript2015 以来 JavaScript 中添加的语法:它们表示 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.

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

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