A guide to JavaScript Template Literals

Template literals are strings delimited by backticks:

const message = `Hello`

ES2015 added them with three main features:

• multiline strings
• interpolation with ${...}
• tagged templates

The MDN template literals reference documents the full syntax.

Multiline strings

Quoted strings need \n for a new line:

const message = 'First line\nSecond line'

Template literals keep real line breaks:

const message = `First line
Second line`

Whitespace inside the backticks is part of the string. Indentation is preserved:

const message = `
  First line
  Second line
`

Call .trim() when you want inner lines but not leading or trailing blank lines:

const message = `
First line
Second line
`.trim()

Interpolation

Put an expression inside ${...}:

const name = 'Flavio'
const message = `Hello, ${name}`

message //'Hello, Flavio'

Any expression works:

const price = 10
const quantity = 3

const message = `Total: ${price * quantity} euro`

The engine evaluates the expression, then converts the result to a string.

Escaping special syntax

Escape a backtick with ```:

const message = `Use the \`const\` keyword`

Escape ${ when you want those characters literally:

const message = `Write \${name} to interpolate a value`

Tagged templates

A tagged template calls a function with the static string parts and the expression values.

The function name sits right before the backticks:

const language = 'JavaScript'
const message = highlight`I am learning ${language}.`

JavaScript calls highlight before joining the parts. The tag can return a string, an object, or anything else.

How a tag function receives values

The first argument is an array of static string parts. The rest are the evaluated expressions:

function inspect(strings, ...values) {
  console.log(strings)
  console.log(values)
}

const item = 'book'
const price = 20

inspect`The ${item} costs ${price} euro`

Here strings is:

['The ', ' costs ', ' euro']

And values is:

['book', 20]

A small tag that wraps interpolated values:

function mark(strings, ...values) {
  let result = strings[0]

  for (let i = 0; i < values.length; i++) {
    result += `**${values[i]}**${strings[i + 1]}`
  }

  return result
}

const topic = 'template literals'
const message = mark`Learn ${topic} today`

message //'Learn **template literals** today'

Tagged templates do not escape unsafe input automatically. Security depends on what the tag does.

Raw strings

The strings array has a raw property with text before escape processing. String.raw returns that raw form:

const path = String.raw`C:\Users\Flavio`

path //'C:\\Users\\Flavio'

Template literals work anywhere a string works: object properties, function arguments, and return values. I reach for them any time a string mixes fixed text with live data.

For simple concatenation of two strings, + is fine. Once you need three or more pieces, backticks usually read cleaner.

Build a greeting with your name and today’s item count using one template literal, then log the result.