Table of Contents

URL: https://www.progressiverobot.com/js-template-literals-es6/

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