JavaScript String Templates
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 Strings allow variables in strings.
Template strings provide an easy way to interpolate variables in strings.
Syntax
${...}
Example
Variable Substitutions:
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
Expression Substitution
Template Strings allow interpolation of expressions in strings:
Example
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
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.
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.
