JavaScript lesson · 17 min

JavaScript Template Literals

Build readable strings with backticks, placeholders, and multi-line text.

Code runs locally in your browser

What you will practice

Use backticks to create template strings.
Insert values with ${...} placeholders.
Build multi-line text without messy concatenation.

What this means

Template literals are strings written with backticks instead of quote marks.

They can contain placeholders like `${name}`. JavaScript evaluates the expression inside the placeholder and inserts the result into the string.

They are especially useful for readable messages, generated snippets, HTML-like output, markdown, and logs.

If this is your first time seeing this

Template literals make strings with variables much easier to read.

Backticks let you write normal text and drop values into it with `${...}`.

Mini glossary

Template literal: A string written with backticks that can include placeholders.
Placeholder: The `${...}` part where JavaScript inserts a value.
Interpolation: Putting a calculated value into a string.

Example from everyday life

A template literal is like a form letter with blanks. The sentence is already written, and JavaScript fills in the name, count, or status where the blanks are.

How it works step by step

The code stores a title, tool count, and privacy label.
The first template literal builds a single-line summary.
The second template literal builds a multi-line markdown snippet.
The placeholders make the output easier to read than string concatenation with many plus signs.

Where you will use this

A UI creates a message like `Saved 3 files`.
A generator builds markdown, robots.txt, or llms.txt output.
A debug log prints several values in one readable line.

Before you run the code

Template literals are not magic. They are strings with a nicer syntax for inserting values.

If you only need plain text with no variables, normal quotes are still fine.

Common beginner mistakes

Using normal quotes and expecting `${...}` to work.
Forgetting the closing backtick.
Putting too much complex logic inside placeholders.

JavaScript editor

const title = "Lumio Learn";
const lessons = 44;
const privacy = "browser-first";

const summary = `${title} has ${lessons} JavaScript lessons.`;
const markdown = `# ${title}

- Lessons: ${lessons}
- Privacy: ${privacy}`;

console.log(summary);
console.log(markdown);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingBuilds a readable summary

WaitingBuilds multi-line markdown text

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Change the lesson count.
Add another markdown bullet.
Create a second summary sentence with the same variables.

Previous lesson Next lesson