Fraser Hamilton

String interpolation in JavaScript

July 01, 2020

No matter what you’re doing in JavaScript you’re going to have to deal with strings at some point. String interpolation makes working with them a hell of a lot easier so it’s a great tool to get a handle on.

There’s a few different ways that we can create string literals, with single quotes ':

const normalSingle = 'Hello World!'

with double quotes ":

const normalDouble = 'The Quick Brown Fox'

and finally with a backtick, this is the one we’re going to be focusing on in this article.

const templateLiteral = `The Quick Brown Fox`

Multi-line strings

When we enclose our string with backticks we refer to it as a template literal, added in ES6 they bring a lot to the table. For example using a normal string you would need to use this syntax to get a new line:

const normal = `The Quick Brown Fox /n jumped over the lazy dog`

You could achieve the same in a template literal like this:

const templateLiteral = `The Quick Brown Fox
                         jumped over the lazy dog`

Expression interpolation

This is where you’ll really start to see the power of this feature, embedding an expression inside a normal string might look like this:

const a = 7
const b = 2

const result = 'The result is ' + (a + b) + '.'
// The result is 9

Whereas with template literals we can make it more readable:

const a = 7
const b = 2

const result = `The result is ${a + b}.`
// The result is 9

It’s even possible to nest these template literals but we’ll save that for a future article.

Written by Fraser Hamilton a full stack developer based out of Edinburgh, Scotland.

© 2020, Fraser Hamilton