jquery倾斜/卷曲引号混淆

时间:2016-05-26 11:52:17

标签: javascript jquery syntax quotation-marks

我刚刚看到这种变体附加了一个包含存储在变量中的值的字符串,这是我以前见过的。谁能帮我解释一下这里发生的事情?

这就是我遇到的情况:

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

2 个答案:

答案 0 :(得分:5)

自EcmaScript2015以来,反向划分的字符串文字是JavaScript中的一种语法添加:它们表示template literal

  

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

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

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

答案 1 :(得分:2)

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

请参阅this blog post from Mozilla了解相关信息。