Template Literals

Syntax used inside backticks to embed a variable or expression directly into a string.

Part of: JavaScript Coding without HTML and CSS — Module 8, ACARA Digital Technologies Years 7–8 — Programming with Control Structures and Functions (JavaScript) — Module 21, ACARA Digital Technologies Years 9–10 — Modular and Object-Oriented Programming (JavaScript) — Module 3

Understanding Template Literals in JavaScript

What it does: Backticks mark the start and end of a template literal. This syntax inserts the current value of score into the string. Template literals are wrapped in backticks (`), not single or double quotes. This correctly wraps text in backticks and embeds name with ${}. Interpolation requires curly braces: ${name}, not $name alone. Template literals can mix plain text and ${expression} freely. Expressions like a+b are evaluated inside ${} and inserted as text. The ${name} part embeds the variable's current value.

Common mistakes: Single quotes don't support ${} interpolation - use backticks. Use ${} not () for interpolation inside template literals.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Template Literals to a class →

This module's key terms are also in a printable crossword (Modules 1–10) and word search (Modules 1–29).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Do template literals use backticks instead of quotes?

YesNo

Matches

'Hi ${name}'

↓

Wrong - single quotes don't support ${} interpolation

Applying

Meanings

Term

${}

Meaning

Syntax used inside backticks to embed a variable or expression directly into a string.

Practice

let name = "Ada";

Testing

Gaps

let msg = Hello, ${name}!`;

Check Answer

Spots

1let a = 'Hi ${name}';

2let b = `Hi ${name}`;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Do template literals use backticks instead of quotes?

A. No

B. Yes ✓

Template literals are wrapped in backticks (`), not single or double quotes.

2. Does ${} let you embed a variable inside a template literal?

A. Yes ✓

B. No

${} inserts the value of a variable or expression directly into the string.

3. Can single quotes interpolate a variable with ${}?

A. No ✓

B. Yes

Only backticks support ${} interpolation, not single or double quotes.

4. Is Hi ${name} valid template literal syntax?

A. Yes ✓

B. No

This correctly wraps text in backticks and embeds name with ${}.

5. Does Hi $name (without braces) interpolate the variable name?

A. Yes

B. No ✓

Interpolation requires curly braces: ${name}, not $name alone.

Match the Pairs

`Hi ${name}!` → A template literal that inserts the value of name

`Total: ${price + tax}` → A template literal that calculates and inserts an expression

Wraps a string in backticks instead of quotes → `Hello!`

Embeds a variable's value directly inside a string → ${score}

'Hi ${name}' → Wrong - single quotes don't support ${} interpolation

`Hi $name` → Wrong - missing curly braces around name

Key Term

${}

Syntax used inside backticks to embed a variable or expression directly into a string.

Fill in the Blanks

1. let msg = `Hello, ${name}!`;

Hint: Type the symbol that opens a template literal.

2. let msg = `Hello, ${name}!`;

Hint: Type the symbol that closes a template literal.

3. let msg = `Hello, ${name}!`;

Hint: Type the symbol that starts an embedded expression inside a template literal.

4. let msg = `Hello, ${name}!`;

Hint: Type the symbol that closes an embedded expression.

5. let greeting = `Total: ${price + tax}`;

Hint: Type the symbol that starts an embedded expression inside a template literal.

Spot the Error

Question 1

A let a = 'Hi ${name}';

B let b = `Hi ${name}`;

C console.log(b);

Line A — Single quotes don't support ${} interpolation - use backticks.

Question 2

A let x = `Sum: ${a+b}`;

B let y = `Sum: (a+b)`;

C console.log(x);

Line B — Use ${} not () for interpolation inside template literals.

Question 3

A let m = `A${1}B`;

B console.log(m);

C let n = `A{1}B`;

D console.log(n);

Line C — Missing the dollar sign - it should be ${1}, not {1}.

Question 4

A let p = "Hi ${name}";

B let q = `Hi ${name}`;

C console.log(q);

Line A — Double quotes don't support ${} interpolation - use backticks.

Question 5

A let s = `Age: ${age}`;

B let t = `Age: [age]`;

C console.log(s);

Line B — Interpolation needs curly braces {}, not square brackets [].

Student with a class code? Join your class →