Back

Activity 1.6: String Interpolation

divider

Activity 1.6

String Interpolation

Key Concepts

Template Literals

Interpolation

Backtick Strings

Strings can also be written with backticks (`) instead of quotes. On their own, they work exactly the same way.

console.log(`Pizza Hut > Dominos. Fight me.`);

The Problem

Printing a variable alongside text with multiple arguments works, but the spacing gets awkward.

console.log("You scored", score, "%.");

Output: You scored 95 %. — notice the extra space before the %.

Template Literals

A backtick string becomes a template literal the moment you drop a variable inside${ }.

console.log(`You scored ${score}%.`);

Output: You scored 95%. — exactly the spacing you wrote.

Interpolating Expressions

${ } isn't just for variables — it can hold any expression, like a calculation.

console.log(`I am 35 years old, which is ${35 * 12} months.`);

Today's Objectives

  • Writing template literals with backticks
  • Interpolating variables into a string with ${ }
  • Interpolating expressions into a string

Key Terms

Template Literal
A backtick-quoted string that can have values dropped directly inside it.
Interpolation
Inserting a variable or expression's value directly into a string.

'F' → Fullscreen

divider

Build

Create a new JavaScript file named 1-6-interpolation.js.


Task 1: Interpolate a Variable

  • Declare a score variable.
  • Print it once with multiple console.log() arguments, and once with a template literal.
1-6-interpolation.js
let score = 95;
console.log("You scored", score, "%.");
console.log(`You scored ${score}%.`);

Task 2: Interpolate Multiple Variables

  • Declare name and age variables.
  • Interpolate both into a single template literal.
1-6-interpolation.js
let score = 95;
console.log("You scored", score, "%.");
console.log(`You scored ${score}%.`);
let name = "Ada";
let age = 16;
console.log(`${name} is ${age} years old.`);

Task 3: Interpolate an Expression

  • Write a template literal that interpolates an arithmetic expression directly, not just a variable.
1-6-interpolation.js
let score = 95;
console.log("You scored", score, "%.");
console.log(`You scored ${score}%.`);
let name = "Ada";
let age = 16;
console.log(`${name} is ${age} years old.`);
console.log(`If I take out a $1000 loan, and pay $25 each month, I will pay it off in ${1000 / 25} months.`);
console.log(`A woodchuck could chuck ${32 * 60} wood panels every hour.`);
divider

Checkpoint

Verify your program works correctly.

Example Output
You scored 95 %.
You scored 95%.
Ada is 16 years old.
If I take out a $1000 loan, and pay $25 each month, I will pay it off in 40 months.
A woodchuck could chuck 1920 wood panels every hour.
divider

Reflection

Answer the following questions before submitting your work.

  1. What symbol turns a normal backtick string into a template literal with a value inside it?
  2. Why did the multi-argument console.log() version have an extra space that the template literal version didn't?
  3. Besides a plain variable, what else can go inside ${ }?
divider

Submit

Submit the required files to the appropriate dropbox.

Activity Complete