Template Literals — JavaScript Strings on Steroids

One of the hidden gems that came with ES2015 is template literals. While ES2015 is widely used around the web, whenever I show template literals to developers I meet I get the same reaction — “I didn’t know we can do that”. This is why I decided to write this post.

What are Template Literals?

Template literals are string literals that allow us, the developers, to embed expressions inside a string. In order to use a template literal, instead of using single (‘) or double quotes (“) to wrap a string, you will use back-ticks syntax — `. The following code shows a template literal example:

let str = `A template literal`;

Multi Line Template Literals

Regular JavaScript strings don’t allow multi line and the only way to use them as multi line is by concatenation. For example:

let multiLineStr = "first line " + 
"second line";

Template literals change that annoying concatenation by allowing multi line inside the template. Here is a multi line usage example:

let multiLineStr = `template literal line 1
template literal line 2`;

This is very helpful from time to time when you have long sentences that you want to break into different lines.

Template Literals Expressions

One of the things that I used a lot in other programming languages is string format functions. Those functions enabled me to embed expressions inside strings and later on to interpolate them. In JavaScript in every app I wrote I added a format function to string prototype to enable that functionality. Out of the box JavaScript only had string concatenation.

Template literals include the option to write expressions which later on will interpolate into strings. The template literal can includes placeholders marked by ${expression}. That expression will be replace during runtime with the interpolation of the expression. For example:

let a = 5;
let b = 1;
console.log(`${a + b} equals six`); // 6 equals six

Another example but with an variable instead of expression:

let price = 30;
console.log(`${price} pounds`); // 30 pounds

No need to add a format function to string prototype any more.

Tagged Template Literals

Tagged template literals allow developers to parse template literals with a predefined function. The function receives a strings arguments which is array of all the string values that is divided by expressions. All the other arguments that the function receives will be used as expressions in the order it receive them. For example, here is a tagged template literal function:

function vat(strings, price) {
const VAT = 1.17;
return strings[0] + price * TAX_RATE + str[1];
}

The function will receive a template literal and it will add the vat to the price. As you can see, you can name the function in any name you like and implement your formatting functionality inside the function. If you want to use the previously defined function, all you have to do is call it with a template literal. For example:

let price = 25;
let messageWithVat = vat`The gift costs ${anotherPrice} pounds`
console.log(messageWithTax); // The gift costs 29.25 pounds

Summary

In this post I introduced template literals which is a cool addition to the JavaScript language. This feature is supported by all the new browsers so you can definitely start using it even today. If you still need to support old browsers, transpilers such as TypeScript and Babel also support template literals.

Show your support

Clapping shows how much you appreciated Gil Fink’s story.