JS-025
Template Literals explained in a JavaScript learning illustration — Insert variables right into text
Beginner3 min~3 min read#template-literals#strings#interpolation

Template Literals

Insert variables right into text

Goal

Learn how to use template literals to build text with variables.

Explanation

  • Template literals are a modern way to create text strings.
  • They use backticks (`) instead of regular quotes.
  • Inside the string, you can insert variables with ${}.
  • This is much easier to read than long chains with the + operator.
  • Template literals are very common in modern JavaScript.

Analogy

Imagine a letter template with blank spots for a name or city. JavaScript automatically fills in the right values.

Code

let name = "Vitalii";

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

Result: Hello, Vitalii!

Common mistake

Beginners often use regular quotes instead of backticks. In that case, ${name} will not work.

Remember

  • ✦ Template literals use backticks (`).
  • ✦ ${} inserts a variable's value.
  • ✦ This approach is much easier to read.

Quick Quiz

Which character is used for template literals?

Resources