JavaScript template text guide

The Template Literals introduced in ES2015 (also known as ES6) provide a new way of declaring strings, as well as some interesting new constructs that are already popular.

Introduction to template text

Template text is a new feature of ES2015/ES6. Compared with ES5 and below, you can use strings in novel ways.

At first glance, the syntax is very simple, just use backticks instead of single or double quotes:

const a_string = `something`

They are unique because they provide many features that ordinary strings constructed with quotation marks do not have, especially:

  • They provide an excellent syntax for defining multi-line strings
  • They provide an easy way to interpolate variables and expressions in strings
  • They allow you to create a DSL using template tags (DSL stands for domain-specific language, for example, used in React by Styled Components to define CSS for components)

Let us study each of them in detail.

Multi-line string

In versions prior to ES6, to create a string that spans two lines, you must use\Characters at the end of the line:

const string =
  'first part \
second part'

This allows a string to be created on two lines, but only rendered on one line:

first part second part

To render the string on multiple lines at the same time, you explicitly need to add\nAt the end of each line, it looks like this:

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

or

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

Template literals make multi-line strings easier.

After opening the template text with backticks, you can just press Enter to create a new line without any special characters, and it will be rendered as it is:

const string = `Hey
this

string
is awesome!`

Remember that space is meaningful, so do the following:

const string = `First
                Second`

Will create a string like this:

First
                Second

an easy way to fix this problem is by having an empty first line, and appending the trim() method right after the closing backtick, which will eliminate any space before the first character:

const string = `
First
Second`.trim()

Interpolation

Template literals provide an easy way to interpolate variables and expressions into strings.

You do so by using the ${...} syntax:

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

inside the ${} you can add anything, even expressions:

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

Template tags

Tagged templates is one feature that might sound less useful at first for you, but it’s actually used by lots of popular libraries around, like Styled Components or Apollo, the GraphQL client/server lib, so it’s essential to understand how it works.

In Styled Components template tags are used to define CSS strings:

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

In Apollo template tags are used to define a GraphQL query schema:

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

The styled.button and gql template tags highlighted in those examples are just functions:

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

this function returns a string, which can be the result of any kind of computation.

literals is an array containing the template literal content tokenized by the expressions interpolations.

expressions contains all the interpolations.

If we take an example above:

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

literals is an array with two items. The first is something, the string until the first interpolation, and the second is an empty string, the space between the end of the first interpolation (we only have one) and the end of the string.

expressions in this case is an array with a single item, 6.

A more complex example is:

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

in this case literals is an array where the first item is:

;`something
another `

the second is:

;`
new line `

and the third is:

;`
test`

expressions in this case is an array with two items, x and 6.

The function that is passed those values can do anything with them, and this is the power of this kind feature.

The most simple example is replicating what the string interpolation does, by joining literals and expressions:

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

and this is how interpolate works:

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

More js tutorials: