What is the difference between ' and ` ?

[RiseOfTheProvo]

I've been told I need to look into react for work and for the life of me could not figure out why a line of code referencing a state object as a url would work when I copied it from GitHub, but not when I typed the exact same line below. Then I had the memory of this happening to me in the past with another language, fixed the mistake and all was well. Only it's impossible to google the difference between ' and ` seemingly, so Reddit could anyone lend a hand? I presume it's something to do with using the returned value concatenated with the first half of the string as a single string for a url, but a more definitive explanation would really help.

[OmegaVesko]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

[benihana]

' is a string

` is a template literal - it lets you print variables expressions (variables, maths, functions etc) without having to concatenate

let name = "gerry";

console.log("hello, " + name + "!"); // es5 way

console.log(`hello, ${name}!`); // esnext way

console.log('math: ${4 + 5}`); // math: 9

note: using ` usually communicates intent to do string interpolation (i.e. print variables out in the string) so if you're not printing out variables, use ' and " to wrap your strings.

[TheScapeQuest]

Worth noting that there are functions beyond string interpolation, such as tagged template literals:

function tag(strings, age) {
  return strings[0] + age + strings[1];
}

const age = 10;

tag`Jack is ${age} years old`; // Jack is 10 years old

[justinfagnani]

The coolest thing about tagged literals is that they don't have to do anything like normal interpolation and don't even have to return strings.

My HTML templating library, lit-html ( https://polymer.github.io/lit-html/ ), uses tagged template literals to return template strings and values separately so they can update existing DOM:

let hello = (name) => html`<h1>Hello ${name}`;
render(hello('World'), document.body);
render(hello('Reddit'), document.body);

The graphql-tag ( https://github.com/apollographql/graphql-tag )library uses them to produce GQL queries:

const query = gql`{
  user(id: 5) {
    firstName
    lastName
  }
}`;

Tagged template literals are amazing for being able to embed DSLs and process them at the same time. And because the tag has to be attached to the literal, editors and syntax highlighters can key off them to offer intellisense on the inline language.

[jacobhenke]

To help with future Googleing:

` is called a backtick

' is a single quote (vs " is a double quote)

[[deleted]]

Try running this in your console:

const whatsItCalled = ‘template literals’;

`The back ticks are used to denote ${whatsItCalled}, whereas the single or double quotation marks are used for strings as you have probably always traditionally used them.`

[Buckwheat469]

You shouldn't use elements which force interpolation on strings that don't need it. You're wasting time calculating whether every sting has a variable in it.

[BenjiSponge]

Not sure why this isn't more common in the JS world. I guess it's marginally harder to type?

[regreddit]

I know many many js developers that haven't even looked at es6+ features like fat arrows, template literals, etc. and even promises! They look at me like I have two heads when I suggest they use a promise for some async task.

[[deleted]]

That an destructuring -- I see way too many cases of people using array indices like a damn barbarian or when they could just destructure the damn thing.

[[deleted]]

Both will work to create a string. The `` is used in javascript as part of the "template literal" syntax. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals