JavaScript String Templates

Beloved child has many names

Template Strings

Template Literals

Beloved child has many names

Back-Tics Syntax

Template Strings use back-ticks (``) rather than the quotes ("") to define a string:

Example

Example Code

javascript

Try it Yourself

let text = `Hello World!`;

Quotes Inside Strings

Template Strings allow both single and double quotes inside a string:

Example

Example Code

javascript

Try it Yourself

let text = `He's often called "Johnny"`;

Multiline Strings

Template Strings allow multiline strings:

Example

Example Code

javascript

Try it Yourself

let text =

`The quick

brown fox

jumps over

the lazy dog`;

Interpolation

Template Strings allow variables in strings.

Template strings provide an easy way to interpolate variables in strings.

Syntax

Example Code

javascript

Try it Yourself

${...}

Example

Example Code

javascript

Try it Yourself

let firstName = "John";

let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

Expression Substitution

Template Strings allow interpolation of expressions in strings:

Example

Example Code

javascript

Try it Yourself

let price = 10;

let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

HTML Templates

Example

Example Code

javascript

Try it Yourself

let header = "Template Strings";

let tags = ["template strings", "javascript", "es6"];

let html = `

## ${header}

- ${x}

`;

Browser Support

Template Strings is an ES6 feature.

ES6 is fully supported in all modern browsers since June 2017:


Chrome 51	Edge 15	Firefox 54	Safari 10	Opera 38
May 2016	Apr 2017	Jun 2017	Sep 2016	Jun 2016

Complete String Reference > For a complete String reference, go to our: > Complete JavaScript String Reference. > The reference contains descriptions and examples of all string properties and methods.