Template Literals

The problem with +

Building strings by joining pieces gets ugly fast.

const name = 'Ravi';
const age = 28;
const city = 'Mumbai';
const message = 'Hello ' + name + ', you are ' + age + ' and live in ' + city + '.';
console.log(message);

Count the quotes and plus signs. Miss one space and the output looks wrong.

Template literals

Use backticks instead of quotes, and drop values in with ${}.

const name = 'Ravi';
const age = 28;
const city = 'Mumbai';
const message = `Hello ${name}, you are ${age} and live in ${city}.`;
console.log(message);

Same result, far easier to read and to change.

The backtick key sits above Tab on most keyboards, to the left of the 1.

Any expression fits inside ${}

Not just variables. Anything that produces a value.

const price = 250;
const quantity = 3;
console.log(`Total: ${price * quantity}`);
console.log(`Name in caps: ${'ravi'.toUpperCase()}`);
console.log(`Status: ${age >= 18 ? 'adult' : 'minor'}`);

Calls to functions work too:

function getDiscount(total) {
  return total > 500 ? 50 : 0;
}
const total = 750;
console.log(`You saved Rs ${getDiscount(total)}`);

Keep it simple. If the expression inside ${} needs more than a moment to read, calculate it on the line above and just insert the variable.

Multi line strings

With normal quotes you need \n escapes:

const oldWay = 'Line one\nLine two\nLine three';
console.log(oldWay);

With backticks, you just press Enter:

const newWay = `Line one
Line two
Line three`;
console.log(newWay);

Whatever you type, including the line breaks and indentation, is preserved exactly.

This is very useful for building HTML:

const product = { name: 'Notebook', price: 120 };
const html = `
  <div class="card">
    <h3>${product.name}</h3>
    <p>Rs ${product.price}</p>
  </div>
`;
console.log(html);

Quotes need no escaping

console.log(`She said "hello" and it's fine`);

Both quote characters sit happily inside backticks.

Nesting

A template literal can contain another one.

const items = ['pen', 'book'];
const list = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;
console.log(list);

This pattern, mapping an array into HTML and joining it, is everywhere in front end code.

Tagged templates

A more advanced feature. You can put a function name in front of a template, and that function receives the pieces.

function highlight(strings, ...values) {
  return strings.reduce(function (result, text, i) {
    const value = values[i] !== undefined ? `**${values[i]}**` : '';
    return result + text + value;
  }, '');
}
const name = 'Ravi';
const score = 92;
console.log(highlight`Student ${name} scored ${score} marks`);

strings holds the fixed text pieces and values holds what was inside each ${}. Libraries use this for styled components, safe HTML escaping, and translations. You do not need it early on, but it is good to recognise the syntax.

When to use which quote

• Backticks whenever you insert a value or need more than one line.
• Single quotes for plain fixed text.
• Double quotes if your team prefers them, but pick one and stay consistent.

Quick recap

• Backticks let you insert values with ${} instead of joining with +.
• Any expression works inside ${}, including calculations and function calls.
• Line breaks and indentation inside backticks are kept exactly as typed.
• Both ' and " can sit inside a template without escaping.
• Mapping an array and joining it is the standard way to build list markup.
• Tagged templates hand the pieces to a function for advanced processing.