Introduced in ES2015 (aka ES6), Template Literals offer a new and improved way to declare strings in JavaScript. In addition to providing a simple and concise syntax, Template Literals also come with a range of powerful features that make them a popular choice among developers. This guide will cover the following topics:

  • Introduction to Template Literals
  • Multiline strings
  • Interpolation
  • Template tags

Introduction to Template Literals

Template Literals are a feature introduced in ES2015/ES6 that allow you to work with strings in a more flexible and efficient way compared to traditional single or double quoted strings. The syntax is straightforward - instead of using quotes, you use backticks (`) to denote a Template Literal. For example:

const a_string = `something`;

Template Literals offer several advantages over normal strings, including:

  • Providing an elegant syntax for defining multiline strings
  • Allowing easy interpolation of variables and expressions within strings
  • Enabling the creation of Domain Specific Languages (DSLs) using template tags

Let’s explore each of these features in more detail.

Multiline strings

In pre-ES6 versions of JavaScript, creating a string that spans multiple lines required the use of backslashes () to indicate line continuation. For example:

const string =
 'first part \
second part'

This approach allows you to split the string into multiple lines but renders it as a single line when executed:

first part second part

To render the string on multiple lines, you need to explicitly add the newline character (\n) at the end of each line, like this:

const string =
 'first line\n \
second line'

Or, you can concatenate multiple strings using the plus (+) operator:

const string = 'first line\n' + 'second line'

Template Literals simplify the creation of multiline strings. When a Template Literal is opened with a backtick, you can simply press enter to create a new line without any special characters, and it will be rendered as is. For example:

const string = `Hey
this

string
is awesome!`

It’s important to note that white space is significant in Template Literals. For example, if you write:

const string = `First
 Second`

It will create a string with a leading space:

First
 Second

To avoid this issue, you can add an empty first line and use the trim() method to remove any leading or trailing white space, like this:

const string = `
First
Second`.trim()

Interpolation

Template Literals provide a convenient way to interpolate variables and expressions into strings. You can achieve this by using the ${...} syntax within a Template Literal.

For example:

const myVariable = 'test'
const string = `something ${myVariable}` //something test

Inside the ${}, you can include any valid JavaScript expression, allowing for sophisticated string concatenation. For instance:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

Template Literals provide a more concise and readable syntax for string interpolation compared to traditional concatenation or string formatting methods.

Template tags

Template tags are a feature of Template Literals that may seem less useful at first, but they are widely used in popular libraries like Styled Components and Apollo GraphQL to create powerful and flexible APIs.

In Styled Components, template tags are used to define CSS strings. An example is shown below:

const Button = styled.button`
 font-size: 1.5em;
 background-color: black;
 color: white;
`

In Apollo, template tags are used to define GraphQL query schemas. Here’s an example:

const query = gql`
 query {
 ...
 }
`

In both cases, the template tag (i.e., styled or gql) is simply a function that takes in the template literal parts (literals) and any interpolated expressions. The template tag function can perform any computation or processing on these values and return a final string.

For example, the gql template tag function could be implemented as follows:

function gql(literals, ...expressions) {
  // Process literals and expressions here...
  return processedString;
}

The literals parameter is an array containing the parts of the template literal (strings before and after each expression), while the expressions parameter contains the evaluated values of the interpolated expressions. The template tag function can use these values to construct the final string or perform any desired operations.

In summary, Template Literals offer a powerful and flexible way to work with strings in JavaScript. They provide a more intuitive syntax for handling multiline strings, variable interpolation, and advanced features like template tags. By leveraging these capabilities, you can write cleaner and more maintainable code.