JavaScript Template Literals
Synonyms:
Template Literals
Template Strings
String Templates
Back-Tics Syntax
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.
★
+1
Reference: https://www.w3schools.com/js/js_string_templates.asp