12 min +45 XP
Lesson 16Step 1 of 5

Template Literals

Modern string formatting with backticks

What are Template Literals?

Template literals are a modern way to create strings in JavaScript. They use backticks (`) instead of quotes and make it easy to include variables in your text!

Old Way (String Concatenation)

javascript
1
2
3
4
5
6
const name = 'Alex'
const age = 12
 // Using + to join strings (messy!)
const message = 'Hello, ' + name + '! You are ' + age + ' years old.'
console.log(message)  // Hello, Alex! You are 12 years old.

New Way (Template Literals)

javascript
1
2
3
4
5
6
const name = 'Alex'
const age = 12
 // Using backticks and ${} (clean!)
const message = `Hello, ${name}! You are ${age} years old.`
console.log(message)  // Hello, Alex! You are 12 years old.

Key Points:

  • Use backticks (`) not quotes
  • Put variables inside ${}
  • Much easier to read!
  • Can include any expression inside ${}