1. javascript
  2. /es6
  3. /template-literals

Template Literals in ES6 JavaScript

Getting Started

Imagine being able to declare strings that can span multiple lines and still retain their formatting, or even being able to embed expressions directly into your strings. That's exactly what Template Literals allow us to do.

Quotes to Code by

Before the introduction of Template Literals, there were two ways to declare strings in JavaScript: single quotes ('') and double quotes (""). Both worked, but they had their quirks. For example, if you wanted to include a quote within a string, you had to escape it, like so:

const stringWithSingleQuote = 'This string contains a single quote (\'), which can be a bit of a pain.';
const stringWithDoubleQuote = "This string contains a double quote (\").";

Instead of using quotes, Template Literals use backticks (``). Not only do they eliminate the need for escaping quotes, but they also bring a whole new set of features to the table.

Multi-line Strings

One of the most significant benefits of Template Literals is the ability to create multi-line strings. In pre-ES6 JavaScript, creating a multi-line string required concatenating multiple strings or using the escape character (\n) to indicate a line break:

const multiLineString = 'This is line one\n' +
                        'This is line two\n' +
                        'This is line three';

With Template Literals, it's as simple as including line breaks within the backticks:

const multiLineString = `This is line one
This is line two
This is line three`;

Even though both have the same output, the latter is much more convenient.

This is line one
This is line two
This is line three

Variables & Template Literals

Another advantage of Template Literals is the ability to embed variables directly into your strings. In pre-ES6 JavaScript, you would have to use string concatenation:

const name = 'Brendan';

const greet = 'Hello, ' + name + '!';

With Template Literals, it's as easy as including the variable within the backticks and wrapping it in curly braces ({}):

const name = 'Brendan';
const greet = `Hello, ${name}!`;
//Output: Hello, Brendan!

Ways of Interpolating Strings

We're not limited to just embedding variables within Template Literals. It's also possible to include any valid JavaScript expression within the curly braces. This includes functions, operations, and even other Template Literals:

const a = 10;
const b = 20;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
//Output: The sum of 10 and 20 is 30.

Being "Expressive"

One of the most instrumental applications of Template Literals is their use in expressions. With Template Literals, you can build more dynamic and expressive code, such as constructing URLs for API requests:

Note: These just showcase examples as the actual data would look a bit different.

const endpoint = 'users';
const id = 123;
const url = `https://api.example.com/${endpoint}/${id}`;

Another practical example is in constructing authentication headers, such as OAuth. By using Template Literals, you can easily include the necessary strings and expressions in your functions:

const oauthToken = 'abcdefghijklmnopqrstuvwxyz';
const authHeader = `Bearer ${oauthToken}`;

Final Thoughts

Template Literals in ES6 JavaScript bring a new level of expressiveness to the language. They make it easier to declare strings that can span multiple lines, embed variables and expressions, and construct dynamic and expressive code.

If you're new to the concept, it doesn't take much time to get used to it. Plus, the benefits they bring to the table are well worth it.

Extra Resources

Add a splash of color to your strings and play around with other interesting JavaScript snippets.