Template literals

Learn to build strings with template literals.

Template literals

A template literal is a special string written between backtick (`) characters. You can embed variables and expressions inside it.

Example: `Hello, ${name}!`. Here ${name} injects the value of the name variable into the string. This is shorter than writing 'Hello, ' + name + '!'.

Template literals also allow newlines; you do not need to write \n.

Injecting expressions with ${}

You can inject not only variables but also expressions inside a template literal. Any JavaScript expression can go inside ${...}.

Example: `Total: ${price + tax}`. Here price + tax is computed and the result is injected into the string. This is shorter than computing it separately.

You can even call a function: `Hello, ${greet(name)}`. The expression inside is evaluated first.

Exercise Print with a template literal

Declare const name = 'Alex' and const age = 28. Use a template literal to print Hello, ${name}! Age: ${age} with console.log.

Show example solution

const name = "Alex";
const age = 28;
console.log(`Hello, ${name}! Age: ${age}`);

Test yourself

Match the template concepts

`...`

Template literal
${...}

Variable injection
${name}

The name variable
console.log

Print output
How is a template literal written?
- With 'single quotes'
- With "double quotes"
- With `backticks`
- With [square brackets]
Show answer

With `backticks` — Template literals use backticks.

Template literal syntax

console.log(`Hello, ____`);

Show answer

console.log(`Hello, ${name}`);

Next lesson: Number and Math

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies