5

I just came across this variation of appending a string containing a value stored in a variable, that I haven't seen before. Can anyone help me explain whats going on here?

This is what I came across:

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

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

The slanted quotation marks seem to make a difference here, because this obviously doesn't do the trick:

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

It's probably something simple that I am not seeing right now. Can you explain to me, what's happening here? I couldn't find anything about these slanted quotation marks in Javascript/JQuery on the interwebs

Here is a simple Codepen to illustrate the issue:

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

lukastillmann
  • 419
  • 1
  • 3
  • 11

2 Answers2

9

The back-tick-delimited string literals are a syntax addition in JavaScript since EcmaScript2015: they indicate a 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.

Dollar signs and braces that occur within a template literal allow for "expression interpolation", which is what you see happening in your example.

Strings that are delimited by normal single or double quotes treat dollar signs and braces as literal characters; they do not support expression interpolation.

trincot
  • 317,000
  • 35
  • 244
  • 286
3

Those "slanted" quotation marks are often called backticks. This type of string is called a "template string", and was added in ECMAScript 6 (the standard that many browser's Javascript engines are working on implementing). Older browsers won't have support for it, but in newer browsers it can allow for that kind of interpolation of variables which can be useful.

See this blog post from Mozilla for an introduction.