JavaScript Template Literals

A template literal is a string wrapped in backticks (`) instead of quotes. Two extra superpowers:

1. Interpolation: drop variables inside with ${ }.
2. Multi-line: line breaks in your source become line breaks in the string.

Interpolation

The most common reason to use template literals.

const name = "Ada";
const age = 36;

const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);
// "Hello, Ada! You are 36 years old."

Compare with the older approach using +:

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

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

The template literal version reads more like the final output. No quote juggling, no + everywhere.

Expressions, Not Just Variables

Anything inside ${ } is a full expression — math, function calls, property access, conditionals.

const price = 99;
const quantity = 3;

console.log(`Subtotal: ${price * quantity}`);          // "Subtotal: 297"
console.log(`Discounted: ${(price * 0.9).toFixed(2)}`); // "Discounted: 89.10"
console.log(`In stock: ${quantity > 0 ? "yes" : "no"}`); // "In stock: yes"

Multi-Line Strings

Backticks span line breaks. Whatever you write across multiple lines in the source goes into the string as-is.

const message = `Dear Ada,

Thank you for using jsschools.

Best,
The team`;

console.log(message);

When to Use Which

• Single quotes ('...') — short plain strings.
• Double quotes ("...") — same, used in JSON.
• Backticks (`...`) — anytime you have a variable inside, or your string spans multiple lines.

Many teams use backticks always for consistency. Either approach is fine — pick a rule and follow it.

Tagged Templates (Preview)

You can also “tag” a template literal with a function. That function receives the parts and the values, and can do anything with them.

function highlight(strings, ...values) {
  return strings.map((s, i) => s + (values[i] ? `**${values[i]}**` : "")).join("");
}

const name = "Ada";
console.log(highlight`Hello, ${name}!`);
// "Hello, **Ada**!"

Tagged templates power some libraries (CSS-in-JS, SQL builders). You’ll rarely write one yourself when starting out — just know they exist.

Try It Yourself

const name = "Ada";
const age = 36;
// your code here

const name = "Ada";
const age = 36;
const greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);

Up Next

You’ve seen strings inside and out. Now: numbers.