JavaScript Template Strings
String Templates
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:
Quotes Inside Strings
Template Strings allow both single and double quotes inside a string:
Multiline Strings
Template Strings allow multiline strings:
Interpolation
Template String provide an easy way to interpolate variables and expressions into strings.
The method is called string interpolation.
The syntax is:
${...}
Variable Substitutions
Template Strings allow variables in strings:
Example
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
Automatic replacing of variables with real values is called string interpolation.
Expression Substitution
Template Strings allow expressions in strings:
Example
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
Automatic replacing of expressions with real values is called string interpolation.
HTML Templates
Example
let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
Browser Support
Template Strings is an ES6 feature (JavaScript 2015).
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 |
Template Strings 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.
