271

I haven't seen anything here or on MDN. I'm sure I'm just missing something. There's got to be some documentation on this somewhere.

Functionally, it looks like it allows you to nest a variable inside a string without doing concatenation using the + operator. I'm looking for documentation on this feature.

Example:

var string = 'this is a string';

console.log(`Insert a string here: ${string}`);
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Darren Joy
  • 2,849
  • 2
  • 12
  • 10
  • 4
    [ECMAScript 2015 template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) –  Mar 07 '16 at 02:47
  • 11
    This isn't a bad question. It's a new feature, and I sure can't find a duplicate on SO, though an example of what exactly was seen would've been good. –  Mar 07 '16 at 02:51
  • @squint—agree, but sample code and reference to the source would have been helpful. – RobG Mar 07 '16 at 03:36
  • Example added. Reference was in a coding challenge but it was a given, as if it was something you just use. Hadn't seen anything on it and couldn't find anything either. (Over the last several years I've never had to ask a Q here. SO just seems to have almost everything now...) – Darren Joy Mar 07 '16 at 04:09

5 Answers5

278

You're talking about template literals.

They allow for both multiline strings and string interpolation.

Multiline strings:

console.log(`foo
bar`);
// foo
// bar

String interpolation:

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar
adiga
  • 34,372
  • 9
  • 61
  • 83
Rick Runyon
  • 4,204
  • 1
  • 17
  • 15
  • 93
    One thing that confused me for a long time is that template literals uses backtick, which is on the left of "1" on keyboard, instead of single quotation mark ('). – Sydney Jan 02 '17 at 09:37
  • 24
    Cool: You can even "inject" code: `console.log(\`Your array:\n ${arr.join('\n ')}\`)` – T4NK3R Sep 03 '17 at 07:28
  • 13
    It's weird that `Template Literal` is not supported in IE or maybe it's natural for IE not to support cool things. [Read more](https://stackoverflow.com/questions/42493557/javascript-backtick-multiline-string-not-working-in-internet-explorer) – Muhammad Musavi Apr 22 '19 at 06:16
  • 1
    Seems to be an alternative to string concatenation console.log("Let's meet at the "+foo); – user3015682 Aug 11 '20 at 13:40
  • 2
    @Sydney just wanted to let you know that i was so confused why my string interpolation wasn't working until i saw your comment about the backtick. THANK YOUUU!! – pozzy Nov 27 '20 at 18:17
26

As mentioned in a comment above, you can have expressions within the template strings/literals. Example:

const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3
Joel H
  • 920
  • 12
  • 12
  • Is it correct to say that template strings can be used to inject code into the string? – carloswm85 Apr 02 '20 at 16:31
  • You're injecting expressions and expressions are code. You can't inject any type of code, however, only JavaScript expressions. – Joel H Apr 02 '20 at 17:08
  • I will try to be more specific. When using string literals I can inject expressions like _obj.value_ INSIDE any string using the ${ } notation. Right? – carloswm85 Apr 02 '20 at 17:28
  • Yes, and you can try it out for yourself in the console, e.g. `hey ${obj.name}` – Joel H Apr 03 '20 at 13:20
9

You can also perform Implicit Type Conversions with template literals. Example:

let fruits = ["mango","orange","pineapple","papaya"];

console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya
Shalom Effiom
  • 396
  • 5
  • 10
1

It's used to reference a variable within string:

let someVar = "World!"
console.log(`Hello ${someVar}`); // Output is Hello World!
Sean Mickey
  • 7,618
  • 2
  • 32
  • 58
Khachik
  • 11
  • 2
-1

const firstName = 'Sachin'; const age = 16 alert(${firstName} is ${age} years old)

//Sachin is 16 years old

sachin g
  • 1