Template Literals

In the previous lesson you saw string concatenation: joining values with +. It works, but it gets messy fast. Template literals are the cleaner, modern alternative.

Backtick syntax

A template literal uses backticks instead of single or double quotes:

const message = `Tour: Cascade Ridge Hike`;
console.log(message);  // 'Tour: Cascade Ridge Hike'

By itself, a backtick string behaves identically to a quoted string. The power comes from what you can put inside.

Embedding expressions with $

The ${} placeholder lets you embed any JavaScript expression directly into a string:

const tourName = 'Cascade Ridge Hike';
const tourPrice = 149;

const label = `Tour: ${tourName} | Price: $${tourPrice}`;
console.log(label);  // 'Tour: Cascade Ridge Hike | Price: $149'

Compare this to the concatenation equivalent:

// Concatenation — harder to read
const label = 'Tour: ' + tourName + ' | Price: $' + tourPrice;

// Template literal — reads naturally
const label = `Tour: ${tourName} | Price: $${tourPrice}`;

The template literal version reads like the final string. The concatenation version requires mental parsing.

Multi-line strings

Template literals preserve newlines. You can write a multi-line string without any special characters:

const tourInfo = `
Tour: ${tourName}
Price: $${tourPrice}
Available: ${tourAvailable}
`;
console.log(tourInfo);

With regular strings, a multi-line result requires \n:

const tourInfo = 'Tour: ' + tourName + '\nPrice: $' + tourPrice;

Template literals make multi-line output much easier to write and read.

Expressions inside $

Any valid JavaScript expression works inside ${} — not just variable names:

const tourPrice = 149;

// Arithmetic
console.log(`Discounted: $${tourPrice * 0.9}`);  // 'Discounted: $134.1'

// Method calls
console.log(`Tour: ${tourName.toUpperCase()}`);  // 'Tour: CASCADE RIDGE HIKE'

// Ternary (covered in Module 03 — preview)
const status = `Status: ${tourAvailable ? 'Available' : 'Sold out'}`;

Keep expressions inside ${} short and readable. If the logic is complex, compute the value in a separate variable first.

Formatting numbers in template literals

Combine .toFixed() with a template literal to format prices:

const tourPrice = 149;
const discounted = tourPrice * 0.9;

console.log(`Original: $${tourPrice.toFixed(2)}`);    // 'Original: $149.00'
console.log(`Discounted: $${discounted.toFixed(2)}`); // 'Discounted: $134.10'

Exercise

Using the three STO variables from this module, build a formatted tour summary:

const tourName = 'Cascade Ridge Hike';
const tourPrice = 149;
const tourAvailable = true;

const summary = `Tour: ${tourName} | Price: $${tourPrice.toFixed(2)} | Available: ${tourAvailable}`;
console.log(summary);

Then write the same string using concatenation and compare the two. Add a multi-line version that puts each piece on its own line.

Recap

• Template literals use backticks and allow embedded expressions with ${}.
• Any JavaScript expression works inside ${}: variables, arithmetic, method calls.
• Multi-line template literals preserve newlines without \n.
• Use template literals instead of + concatenation whenever a string contains more than one embedded value.
• Keep ${} expressions short — move complex logic into separate variables for readability.