Platform under construction

Strings, Numbers & Math

Intermediate

Template Literals

Template literals use backticks. They make interpolation, multiline text and readable generated strings much easier.

const topic = "JavaScript";
const count = 7;

const message = `${topic} has ${count} core examples.`;
console.log(message);

Strings, Numbers & Math

Template literals are the clean way to mix text and values.

A template literal is a string created with backticks. Inside it, ${...} runs a JavaScript expression and inserts the result into the text.

Template literals can span multiple lines without escape characters. That makes them useful for readable messages, small snippets and formatted output.

Interpolation is powerful, but it is not automatic HTML escaping. If a value comes from a user or external source, do not inject it into innerHTML without sanitizing it.

Backticks

Template literals are wrapped in ` characters, not normal quotes.

Interpolation

${expression} inserts the result of an expression into the string.

Multiline text

Line breaks can live directly inside the template literal.

HTML caution

Template literals do not make untrusted HTML safe.

Examples

Start with the smallest working pattern.

Readable interpolation

const topic = "template literals";
const examples = 4;

const summary = `This page has ${examples} ${topic} examples.`;
console.log(summary);

String concatenation that is harder to scan

const summary = "This page has " + examples + " " + topic + " examples.";

// It works, but the final sentence is harder to read.

Code patterns

Reusable examples for quick reference.

These small examples are designed for scanning. Use them when you need the syntax quickly, then read the surrounding notes when you want the deeper reason behind the pattern.

Insert a variable

The common use case is readable value insertion.

const name = "JavaScript";
const message = `Current topic: ${name}`;

console.log(message);

Insert an expression

Interpolation can calculate directly, but keep it readable.

const completed = 4;
const total = 7;

console.log(`Progress: ${completed}/${total}`);

Create multiline text

Useful for logs or generated plain text.

const report = `Status report
Ready: true
Errors: 0`;

console.log(report);

Prefer variables for complex expressions

Do not hide too much logic inside ${...}.

const completed = 4;
const total = 7;
const percentage = Math.round((completed / total) * 100);

console.log(`Progress: ${percentage}%`);

Rules that matter

Keep text and numbers predictable.

Strings and numbers are simple until they cross a boundary: form input, API data, generated output, rounding, formatting or search. Normalize, validate and format deliberately.

Use backticks for interpolation

They make mixed text and values easier to read.

Keep expressions small

Move complex logic into named variables first.

Use multiline strings carefully

Whitespace and line breaks become part of the string.

Do not trust interpolated HTML

Template literals do not sanitize values.

Prefer clear sentence shape

The final text should be readable in the source.

Escape backticks when needed

Use \` if a literal backtick belongs inside the text.

Production thinking

Small value mistakes become visible product mistakes.

Why does this matter?

Generated text is everywhere in interfaces. Template literals make that text easier to build without turning code into punctuation soup.

Accessibility

Readable generated messages are easier to keep clear for screen readers and live regions.

Production note

Production code should keep interpolation readable and keep unsafe HTML generation out of templates unless there is a safe rendering layer.

SEO note

Template literals often build titles, descriptions or visible content. Keep output predictable and avoid accidental whitespace problems.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add one more interpolated value to the message.
Move the percent calculation into a function.
Create a multiline report in the code editor.

Practice assignment

Do this before moving to the next topic.

Write a template literal with one variable.
Write a template literal with one calculated expression.
Rewrite a concatenated string as a template literal.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Template Literals.