Flash cards
Review the key moves
What is the main idea behind React ES6 Template Strings?
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.
___ name = "John";Put the learning moves in the order that makes the concept easiest to apply.
Template Strings
Template strings allow you to write strings that span multiple lines and include embedded expressions:
Example
const name = "John";
const age = 30;
const message = "Hello, " + name + "!\n" + "You are " + age + " years old.";Example
const name = "John";
const age = 30;
const message = `Hello, ${name}! You are ${age} years old.`;Template strings use backticks (`) instead of quotes and can include:
- Multiple lines without \n
- Expressions inside ${}
- Quotes without escaping
Example
const html = `
<div> <h1>Title</h1> <p>Paragraph</p> </div> `;Note
The indentation in multi-line strings becomes part of the string.
Example
const x = `
John: Hello, how are you? Jane: I'm fine, thanks! `;Expression Interpolation
You can include any valid JavaScript expression inside ${} in a template string:
Example
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;Example
let price = 10;
let quantity = 5;
let total = `Total: ${price * quantity}`;mapExample
const isAdmin = true;
const message = `Status: ${isAdmin ? 'Admin' : 'User'}`;Tagged Templates
You can also use template strings with a function (called a tag) to modify the output.
Note
Tagged templates are an advanced feature. You might not need them in most cases.
The function takes the text and the expression(s) as arguments.
Example
function highlight(strings, fname) {
let x = fname.toUpperCase();
return strings[0] + x + strings[1];
}
let name = "John";
let text = highlight`Hello ${name}, how are you?`;Example Explained
The function name is highlight , you can name it whatever you want.
The first argument holds the text between the expressions, as an array. The array items are splitted by the expression. In this example strings[0] holds "Hello " and strings[1] holds " how are you?".
The second argument holds the expressions. In this example fname holds "John".
Inside the function you can use the arguments to create the final string, and return it.
Note
If the template string contains multiple expressions, the text will still be held in the first argument, but the expressions will either be held in multiple arguments, or as an array in the second argument.
Example
function highlight(strings, fname1, fname2) {
let x = fname1.toUpperCase();
let y = fname2.toUpperCase();
return strings[0] + x + strings[1] + y + strings[2];
}
let name1 = "John";
let name2 = "Jane";
let text = highlight`Hello ${name1} and ${name2}, how are you?`;Example
function highlight(strings, ...fname) {
let x = fname[0].toUpperCase();
let y = fname[1].toUpperCase();
return strings[0] + x + strings[1] + y + strings[2];
}
let name1 = "John";
let name2 = "Jane";
let text = highlight`Hello ${name1} and ${name2}, how are you?`;