Javascript · Strings
Template Literals
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What are Template Literals?
Template literals (used with`` ` ``) have a special superpower: they let you insert variables directly into your string using
${}
. This is called interpolation.
// Old way with concatenation
let codemonName = "Aquachu";
let greeting1 = "Hello, " + codemonName + "!";
console.log(greeting1);
// New way with template literals
let codemonName = "Aquachu";
let greeting2 = `Hello, ${codemonName}!`;
console.log(greeting2);
Both ways produce the same result, but template literals are cleaner and easier to read!
Exercise 2 — How to Use ${} Interpolation
The syntax for template literal interpolation is simple:
1. Use backticks
`
instead of quotes
2. Put
${}
where you want to insert a variable
3. Place your variable name inside the
{}
let codemonName = "Pyrochu";
let codemonLevel = 25;
// Using template literals
let message = `Your ${codemonName} is level ${codemonLevel}!`;
console.log(message);
Notice how the variables are automatically converted to strings and inserted exactly where you placed the
${}
. No more messy
+
signs everywhere!
Don't forget the $
A common mistake is writing
{codemonName}
instead of
${codemonName}
. You need BOTH the dollar sign $ and the curly braces {}!
Exercise 3 — Your First Template Literal
Complete the code to create a template literal that displays your Codémon's name.
let codemonName = "Florachu";
let message = ____Welcome, ____________________;
console.log(message);
Options: ` $ { codemonName } ` " ' codemon_name
Hint : Template literals use backticks `````` ` `````` and the interpolation syntax is ```${variableName}```. Make sure to close the string with another backtick!
Exercise 4 — Which Syntax is Correct?
Which of the following correctly uses template literal interpolation?
Options
• ```let msg = `` `Hello ${name}!`` `;```
• ```let msg = "Hello ${name}!";```
• ```let msg = `` `Hello {name}!`` `;```
• ```let msg = 'Hello ${name}!';```
Hint : Template literals require backticks `` ` `` and the interpolation uses ```${}``` with the variable name inside the braces.
Exercise 5 — Predict the Output
What will the following code output?
let codemonType = "water";
let power = 85;
let message = `Type: ${codemonType}, Power: ${power}`;
console.log(message);
Options
• ```Type: water, Power: 85```
• ```Type: ${codemonType}, Power: ${power}```
• ```Type: codemonType, Power: power```
• ```Type: water Power: 85```
Hint : Template literals replace ```${variableName}``` with the actual value of the variable.
Exercise 6 — Expressions Inside ${}
Here's something cool: you can put any JavaScript expression inside
${}
, not just variables! This includes calculations, method calls, and more.
Let's start with calculations:
let codemonLevel = 15;
// You can do calculations inside ${}
let message = `Next level in ${(codemonLevel + 1) * 100 } XP`;
console.log(message);
You can also use properties like
.length
inside
${}
:
let codemonName = "Pyrochu";
// Using .length property inside ${}
let message = `${codemonName} has ${codemonName.length} letters in its name`;
console.log(message);
The code inside
${}
is evaluated (run) first, and then the result is converted to a string and inserted into your template literal.
Keep it readable
While you can put complex expressions in
${}
, it's best to keep them simple for readability. If your expression is very long, consider calculating it in a variable first, then using that variable in the template literal.
Exercise 7 — Match Code with Output
Match each template literal with what it would output. Assume:
let name = "Aquachu"; let level = 20;
Items to match
• `${name} is level ${level}`
• `Level: ${level + 1}`
• `${name.length} letters`
• `Next level: ${level + 5}`
Definitions
• Aquachu is level 20
• Level: 21
• 8 letters
• Next level: 25
Exercise 8 — Convert to Template Literals
Rewrite these concatenated strings using template literals instead!
Starter code
let name = "Pyrochu";
let type = "fire";
let level = 25;
// Rewrite these using template literals:
let profile = "Name: " + name + ", Type: " + type;
let info = "Level " + level + " " + type + " type";
console.log(profile);
console.log(info);