Flash cards
Review the key moves
What is the main idea behind JavaScript String Templates?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ text = `Hello World!`;Put the learning moves in the order that makes the concept easiest to apply.
Template Literals
Beloved child has many names
Back-Tics Syntax
Template Strings use back-ticks (``) rather than the quotes ("") to define a string:
Example
let text = `Hello World!`;Quotes Inside Strings
Template Strings allow both single and double quotes inside a string:
Example
let text = `He's often called "Johnny"`;Multiline Strings
Example
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
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 |