1. Home

JavaScript Template Literals

Synonyms

Back-Tics Syntax

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

Example

let text = `Hello World!`;

Try it Yourself »

Quotes Inside Strings

With template literals, you can use both single and double quotes inside a string:

Example

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

Try it Yourself »

Multiline Strings

Template literals allows multiline strings:

Example

let text =
`The quick
brown fox
jumps over
the lazy dog`;

Try it Yourself »

Interpolation

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

The method is called string interpolation.

The syntax is:

${...}

Variable Substitutions

Template literals allow variables in strings:

Example

let firstName = "John";
let lastName = "Doe";

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

Try it Yourself »

Automatic replacing of variables with real values is called string interpolation.

Expression Substitution

Template literals allow expressions in strings:

Example

let price = 10;
let VAT = 0.25;

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

Try it Yourself »

Automatic replacing of expressions with real values is called string interpolation.

HTML Templates

Example

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

Try it Yourself »

Browser Support

Template Literals is an ES6 feature (JavaScript 2015).

It is supported in all modern browsers:

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes
Template Literals is not supported in Internet Explorer.

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.

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US