Remember the time when you had to insert variables in a string and how awful it was? And how the times you had to use ‘ ’ and the sign +. You ran your code and the spacing between variables was off or, even worse, you forgot a + sign and the code didn’t work properly. 

There’s a solution implemented in ES6 called Template literals and here’s how it works.

What Is a Template Literal?

The MDN definition is “Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.”  Fancy definitions aside, a template is a preset format and a literal is a value written exactly as it’s meant to be interpreted. In JS terms a template literal is a way to concatenate strings while allowing embedded expressions and improving readability.

To write a template literal just use a back-tick instead of a single or double quotes, like this,

console.log(`Hello World`);
// "Hello World"

String Interpolation

Forget about the pain of interpolating strings and variables, template literal solves this issue with string interpolation. Just embed an expression like this “${expression}”. 

Take a look at the examples below,

const person = {
  name: 'Jurgen',
  age: 52,
 };
 // String concatenation
 console.log('My name is ' + person.name + ' and I\'m ' + person.age + ' years old.');
 
 // Template Literals
 console.log(`My name is ${person.name} and I'm ${person.age} years old`);
 // My name is Jurgen and I'm 52 years old

Analyzing these two examples, we can see that using template literals helps us have clean code and better readability.

Another area where template literals work like a charm is whenever there are line breaks,

console.log(`Heyooo
 this string 
 
       contains line breaks`);
 /* output
 * Heyooo
 * this string 
 *
 *      contains line breaks
 */

No more \n and all that nonsense that made our head hurt. Now let’s embed a function right into our template literal,

const championOfEurope = () => 'Liverpool';
let times = 6;
console.log(`Im ${championOfEurope()} and I've won the UCL ${times} times`);
// Im Liverpool and I've won the UCL 6 times

Here’s how you can use all of these features at once. Add HTML to a page using JavaScript and template literals,

const person = {
  name: 'Jurgen',
  lastName = 'Klopp',
  age: 52,
};
const championOfEurope = () => 'Liverpool';
const display = `
<div class="person">
  <h1>My name is ${person.name} and my last name is ${person.lastName}</h1>
  <p>I currently work as Manager of ${championOfEurope()} and I'm ${person.age} years old</p>
</div>
`
document.body.innerHTML = display;

Finally..

Template literals make our strings with variables and embedded expressions easier to write, and easier to identify errors.

They are powerful because they give you an interesting and easy way to use strings. It may be hard to get used to them but once you do, there’s no coming back.

Got any question or comment? Send me an email at  [email protected]