I Literally Can't With Template Literals: 3 Ways to Use Them

As someone who is still working on my coding-fu, certain fancy-schmancy syntaxes can make me panic a little bit when I see them. One Javascript technique that has given me this kind of trouble in the past is the template literal with its sophisticated backticks and dollar signs.

In this article, my goal is to boil the concept down into the simplest explanation that makes sense to me. And if you, internet stranger, also struggle to remember how and when to use template literals, I hope it makes sense to you, too.

The first thing you need to know is that template literals are surrounded with backticks (`), instead of the usual double or single quotes that you would use for strings.

Let's focus on three uses of the template literal: multi-string lines, string interpolation, and tagged templates.

Multi-string Lines

With a template literal, you can easily make a string that includes multiple lines.

If you're using a normal string and you want multiple lines, you have to do something like this:

But with the magic of template literals, you can achieve this in a much more elegant way:

Pretty simple, right?

String Interpolation

This one is so useful. Before learning about template literals, if I wanted to include a variable value or an expression in a string, I would have to concatenate the variable or expression with the string(s) using the addition operator (+). This can be time consuming and it looks messy.

Enter string interpolation! This means that you can embed expressions directly into strings. By wrapping an expression with ${}, you can insert the result of the expression directly into the string. Doing it this way is so much easier on the hands and the eyes.

Here's an example.

This:

Becomes this:

String interpolation is way quicker than concatenating, especially when you're dealing with multiple variables/expressions.

Tagged Templates

This one is more complex and trickier to understand initially, but still very useful. Tagged template literals (aka tagged templates) allow you to parse a template literal with a function called a tag function.

For example, you can pass the template literal to the tag function and have it return just the interpolated values (the results of the expressions surrounded by ${}) from the template literal.

You can also return an array of strings, split up by the interpolated values. In other words, everything BUT the interpolated values.

Note: The rest parameter (...) was used in this example. If this is unfamiliar to you, you can read more about it here.

There are more applications of template literals in JavaScript, but I think this is a good starting point. It's worth taking the time to get a basic grasp on this stuff, considering the time you will save yourself in the long run. And who doesn't want to be able to write fancy-schmancy code?