JavaScript Template Literals Explained

Template literals are a string syntax introduced in ES6 that use backticks (`) instead of single or double quotes. They solve two long-standing annoyances with regular JavaScript strings: building strings out of variables used to require clunky + concatenation, and writing a string across multiple lines required awkward \n escapes. Template literals fix both.

String Interpolation with ${}

Instead of concatenating variables into a string with +, you embed them directly inside ${} placeholders:

const name = "Vikram";
const age = 29;

// Old way
const oldMessage = "Hello, " + name + "! You are " + age + " years old.";

// Template literal
const message = `Hello, ${name}! You are ${age} years old.`;

console.log(message);

Output:

Hello, Vikram! You are 29 years old.

You're not limited to plain variables inside ${} — any valid JavaScript expression works, including function calls and arithmetic:

const price = 250;
const qty = 3;

console.log(`Total: $${price * qty}`);
console.log(`Name in caps: ${name.toUpperCase()}`);

Output:

Total: $750
Name in caps: VIKRAM

Multi-line Strings

Template literals preserve line breaks exactly as you type them, which makes multi-line text — like an email template or a block of HTML — much easier to write:

const emailBody = `Hi ${name},

Thanks for signing up!
Your account is now active.

— The Team`;

console.log(emailBody);

With regular quoted strings, the same thing would require a \n at the end of every line, which is much harder to read and maintain. This also makes template literals the natural choice when building small chunks of HTML to insert into the page via a function that returns markup as a string.

When to Still Use Regular Strings

For simple, static text with no variables and no line breaks, a regular quoted string is still perfectly fine and arguably a touch faster to type — template literals shine specifically when you need interpolation or multi-line text, not as a universal replacement for every string in your code.

---