The JavaScript Template Literal

One thing I find fascinating about my industry is that no matter how much I think I know or thought I knew, sometimes going back to basics can teach you a new trick.

For example, recently I was watching a series of beginner JavaScript videos to see if they would be helpful for my son to learn JavaScript and learned about something that, despite casually hacking at JavaScript for years, I had not used before: the template literal.

Now if you’ve come up to speed on JavaScript in the last decade, this string type is probably old hat to you. However, I’ve been plugging away at JavaScript for several years and I never really realized the power of it and just thought of it as another way to define a string.

The Template Literal

The template literal is really just a fancy name for a string that allows you to do string interpolation (which itself is just a fancy term for allowing you to substitute variables into strings).

For example, a statement like this:

const name = 'Framnk'
console.log('Hello, ' + name + '.  Pleased to meet you!');

Would turn into this using the template literal:

const name = 'Framnk'
console.log(`Hello, ${name}.  Pleased to meet you!`);

As you can see in this example, the template literal requires surrounding the string using the backquote character and anything surrounded by ${<symbol>} is interpolated when the string is used.

So What?

Okay, so how is this useful you might be thinking, after all, the examples above are not that difficult to understand. Well, first of all, imagine a more complicated example. For instance, let’s say you had to build a path using input variables:

const root = 'c:'
const programs = 'program files'
const appfolder = 'my application'

console.log('The path is \'' + root + '\\' + programs + '\\' + appfolder + '\'');

versus:

const root = 'c:'
const programs = 'program files'
const appfolder = 'my application'

console.log(`The path is '${root}\\${programs}\\${appfolder}'`);

This starts to look more natural using the template literal and it’s easier to see how things like quotes and spaces might end up in your output string.

Another nice feature is that strings interpolated by the template literal can themselves be template literal strings:

const name = 'Framnk'
const greeting = `Hello, ${name}.  Pleased to meet you!`;

console.log(`Computer says: ${greeting}`);

Computer says: Hello, Framnk.  Pleased to meet you!

You can also write expressions inside the template literal:

const a = 5;
const b = 1;
const c = 13;

console.log(`The perimeter of the triangle is: ${a + b + c}`);

The perimeter of the triangle is: 19

Multi-line Strings

The true power of the template literal becomes obvious when dealing with multi-line strings. When you write a multi-line string in JavaScript, you either have to concatenate each line by closing the string or using backslash:

console.log('Please enter your choice: \
1. Pepperoni \
2. Sausage \
3. Mushroom \
');

And even when using this format, it might not print the way you expected, looking at this example, I might expect each choice to be on its own line but you would actually see:

Please enter your choice: 1. Pepperoni 2. Sausage 3. Mushroom

Using the template literal, I can write this example as:

console.log(`Please enter your choice:
1. Pepperoni
2. Sausage
3. Mushroom
`);

Which writes the output to my console exactly as I would expect by looking at it:

Please enter your choice:
1. Pepperoni
2. Sausage
3. Mushroom

This is just a brief introduction to the power of the template literal. There are many more uses and examples you can find in the Mozilla documentation.