Template Literals

Objectives

By the end of this chapter, you should be able to:

• Build a string with a template literal using backticks and ${}
• Explain why template literals are easier to read and write than + concatenation
• Write a multi-line string using a template literal

💡 Why this matters: Building strings out of variables is something you’ll do constantly, in log messages, UI text, error messages. Template literals make that easy to write and easy to read back later.

The Old Way: Concatenation with +

Before template literals, the only way to build a string out of variables was to glue pieces together with +.

const name = "Jordan";
const age = 28;
const city = "Nairobi";

const message = "Hi, my name is " + name + " and I am " + age + " years old. I live in " + city + ".";
console.log(message);
// Hi, my name is Jordan and I am 28 years old. I live in Nairobi.

This works, but it’s easy to get wrong. Miss a space inside one of those quoted pieces, or forget a +, and you get a subtle bug that’s annoying to spot just by reading the code.

Template Literals

A template literal uses backticks (`) instead of quotes. Inside it, ${} drops a variable’s value directly into the string.

const name = "Jordan";
const age = 28;
const city = "Nairobi";

const message = "Hi, my name is " + name + " and I am " + age + " years old. I live in " + city + ".";
const message2 = `Hi, my name is ${name} and I am ${age} years old. I live in ${city}.`;
console.log(message2);
// Hi, my name is Jordan and I am 28 years old. I live in Nairobi.

console.log(message === message2);
// true

Same output, but the template literal reads like the sentence it produces. There’s no juggling quotes and + signs, and no risk of a missing space between pieces.

Expressions Inside ${}

${} isn’t limited to a plain variable. Any JavaScript expression works, including calculations.

const name = "Jordan";
const age = 28;
console.log(`Next year, ${name} will be ${age + 1}.`);
// Next year, Jordan will be 29.

Multi-line Strings

Regular strings can’t span multiple lines. To add a line break, you need the escape sequence \n.

const regularNewline = "Line one\nLine two";
console.log(regularNewline);
// Line one
// Line two

Template literals can contain real line breaks, typed directly into the code between the backticks.

const regularNewline = "Line one\nLine two";
const templateMultiline = `Line one
Line two`;
console.log(templateMultiline);
// Line one
// Line two

console.log(regularNewline === templateMultiline);
// true

Both strings are identical. This matters most when you’re building a longer block of text, like an email body or a multi-line log message. Writing it as a template literal with real line breaks is far easier to read than a wall of "..." + "\n" + "...".

Try It

1. Given const user = "Priya"; and const item = "keyboard";, build the sentence "Priya added a keyboard to the cart." first with + concatenation, then again with a template literal.
2. Given const price = 40; and const quantity = 3;, use a template literal with an expression inside ${} to log the total cost.
3. Write a multi-line template literal for a short note with three lines: a greeting, a message, and a sign-off. Log it and check the line breaks appear where you expect.

Recap

• Template literals use backticks and ${} to build strings from variables and expressions.
• They read closer to the final sentence than + concatenation, and avoid missing-space bugs.
• ${} can hold any expression, not just a plain variable name.
• Template literals support real multi-line strings, without \n escape sequences.

Next lesson: regular expressions, a way to describe and match patterns in text instead of exact pieces.