Template Literals (Template Strings) in JavaScript

3 min read.

Template literals are like strings on steroids. In this video, we’ll look at the main benefits of template literals including string interpolation and multiline strings.

Video

Post

In this post we’ll be covering the joys of ES6’s “Template Literals” feature. Specifically, we’ll talk about how template literals improve the experience around string interpolation and multiline strings.

You’ve probably run into the scenario before. You have a function whose sole purpose is to return a string after it’s concatenated a few variables together. Something like this welcomeMessage function

function welcomeMesssage (firstName, lastName, email) {
  return "Hello, " + firstName + " " + lastName + ". The email you used to sign up is " + email;
}

Now, what if we wanted to add quotes around the email address to emphasize it more? We’d have to change our function to looks like this,

function welcomeMesssage (firstName, lastName, email) {
  return "Hello, " + firstName + " " + lastName + ". The email you used to sign up is \"" + email + "\"";
}

It’s not the worst thing in the world, but the collection of plus signs, quotations, and escape characters makes for a harder than neccessary task.

This is where you can start to see the benefits of template literals come into play. Whenever you want to concatenate a variable onto a string, with template literals, instead of playing the + "" game, you wrap your whole string in backticks (``) then you wrap your variables in ${}. So the welcomeMessage function above would get tranformed into this

function welcomeMesssage (firstName, lastName, email) {
  return `Hello, ${firstName} ${lastName}. The email you used to sign up is "${email}"`;
}

Not only is that a whole lot easier, but more importantly, it’s easier to read.

Now that we’ve seen how template literals help with string interpolation, let’s see how they help with multiline strings as well.

Say instead of having a welcomeMessage function, we wanted a welcomeTemplate function that will return us a template string so that we can spit that into the DOM. That function would look something like this,

function welcomeTemplate (firstName, lastName, email) {
  return "<div><h1>Hello, " + firstName + " " + lastName + ".</h1><i>The email you used to sign up is \"" + email + "\"</i></div>";
}

Perfect, except for the fact that not only is it terribly hard to write, but it’s even harder to read since now we’ve lost even our indentation. The ES5 way of fixing this would be doing something like this,

function welcomeTemplate (firstName, lastName, email) {
  return "<div>" +
    "<h1>Hello, " + firstName + " " + lastName + ".</h1>" +
    "<i>The email you used to sign up is \"" + email + "\"</i>" +
  "</div>";
}

Well, we’ve placed a nice ugly bandaid over the problem but it is marginally better.

Now that we understand the pain points, again, let’s see how template literals fix this issue.

function welcomeTemplate (firstName, lastName, email) {
  return `
    <div>
      <h1>Hello, ${firstName} ${lastName}.</h1>
      <i>The email you used to sign up is "${email}"</i>
    </div>
  `;
}

Much, much better. Since template literals support multiline strings, everything Just Works™.

Liked this post? Share it 🕺

Newsletter

Listen, I get it, newsletters are the worst.

But, as Louis from Colorado says, "This newsletter sucks less than the others".

We only send spam. That's a joke.