// Tutorial //

Template Literals in JavaScript (ES6 / ES2015)

Published on October 11, 2016
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Template Literals in JavaScript (ES6 / ES2015)

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

The ECMAScript 2015 specification (ES6) brings us template literals for string interpolation and multiline strings. You may also have heard of them as template strings. The character used to define template literals is the backtick (`), which is located to the right of the 1 on most keyboard layouts.

Here’s an example of string interpolation with template literals:

function greeting(firstName, lastName) {
  let message = `Hello ${firstName} ${lastName}`;
  return message;
}

And here’s an example of a multiline string:

console.log(`Right now
  is the perfect time to
  learn JavaScript`);

And here’s yet another example of the power of string interpolation and multiline strings with template literals:

var user = { name: "Joe", email: "joe@example.com" };
var item = { quantity: 3, price: 4.99 };

var message = `Name: ${user.name}
Email: ${user.email}

Total price: ${item.quantity * item.price}`;

Here’s the message that will be logged to the console from the above example:

Name: Joe
Email: joe@example.com
-----
Total price: 14.97

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!