In contrast to ES5 and earlier, the new ES2015/ES6 feature known as Template Literals enables you to work with strings in a novel manner.

A template literals is a special kind of string literal that allows us to embed expressions within them. This makes it possible to dynamically generate text based on data values. It is similar to using an inline function call with the function keyword.

At first appearance, the syntax appears to be fairly straightforward; simply use backticks in place of single or double quotes:

const a_string = `something`

They stand out because they offer many characteristics that standard strings constructed with quotations do not, namely:

• They provide a fantastic syntax for defining multiline strings.
• They offer a simple method for interpolating variables and expressions in strings.
• They enable the creation of DSLs with template tags (DSL stands for domain specific language; for instance, Styled Components in React utilise it to define CSS for a component).

Let's examine each of these in more depth.

Multiline strings

Before ES6, you had to use the character at the end of a line to generate a string that covered two lines:

const string =
  'first part \
second part'

This enables a string to be created on two lines, although it is only displayed on one line:

first part second part

You need to manually put n at the end of each line to render the string on several lines as well, as in the following example:

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

Multiline strings are significantly easier when using template literals.

In order to add a new line to a template literal after it has been opened using the backtick, simply hit enter without using any special characters.

const string = `Hey
this

string
is awesome!`

Remembering that space has significance, do the following:

const string = `First
                Second`

will result in a string that looks like this:

First
                Second

Having an empty first line and adding the trim() method directly after the closing backtick, which will remove any space before the first character, is a simple remedy for this issue:

const string = `
First
Second`.trim()

Interpolation

It is simple to interpolate variables and expressions into strings using template literals.

The ${?} syntax is used to accomplish this:

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

You can include anything, including expressions, inside the ${} symbol:

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

Template tags

One feature that may seem less useful to you at first is tagged templates, but it's actually utilised by several widely used libraries, like Styled Components and Apollo, the GraphQL client/server library, so it's crucial to grasp how it functions.

In Styled Components, CSS strings are defined using template tags:

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

A GraphQL query schema in Apollo is defined by template tags:

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

The gql template tag and styled.button tags that are highlighted in those examples are merely functions:

function gql(literals, ...expressions) {}

This function outputs a string that can represent the outcome of any calculation.

The content of the template literals tokenized by the interpolations of the expressions are contained in the array literals.

All interpolations are contained in expressions.

let's take and above example : 

const string = `something ${1 + 2 + 3}`

literals is a two-item array. The first is something, the string up until the first interpolation, and the second is nothing, the space between the first interpolation's finish (there is only one) and the string's conclusion.

expressions in this instance are a single item array with the value 6.

One that is more intricate is:

const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`

Here, literals is an array with the following initial item:

;`something
another `

the second is:

;`
new line `

and the third is:

;`
test`

expressions in this instance consist of a two-item array, x and 6.

The power of this type of feature lies in the fact that the function to which those values are supplied can do anything with them.

The simplest illustration is to combine literals and expressions to mimic what the string interpolation does:

const interpolated = interpolate`I paid ${10}?`

likewise, here's how interpolation functions:

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions.entries()) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

We hope that you found these tips helpful! We?d love to hear what you think about them. Please leave any comments below or contact us directly at