We've already used template literals several times – time to cover them and the most important string methods systematically, to improve how our budget app prints output.

Template literals: interpolation with backticks

const description = 'Rent';
const amount = -850;

// Old, clunky string concatenation:
const lineOld = description + ': ' + amount + ' EUR';

// Template literal, more readable:
const lineNew = `${description}: ${amount} EUR`;

console.log(lineOld, lineNew); // identical result: 'Rent: -850 EUR'

Inside ${...} sits a FULL JavaScript expression – not just a variable:

const amount = -850;
console.log(`Type: ${amount > 0 ? 'Income' : 'Expense'}, Amount: ${Math.abs(amount)} EUR`);
// 'Type: Expense, Amount: 850 EUR'

Multi-line strings

const receipt = `Budget App Receipt
-------------------
Description: Rent
Amount: -850 EUR`;

console.log(receipt);

With regular quotes ('...'/"..."), this would only be possible via explicit \n characters – template literals carry over real line breaks 1:1.

Important string methods

const description = '  Weekly groceries supermarket  ';

console.log(description.trim());          // 'Weekly groceries supermarket' - remove edge whitespace
console.log(description.toUpperCase());   // '  WEEKLY GROCERIES SUPERMARKET  '
console.log(description.toLowerCase());   // '  weekly groceries supermarket  '
console.log(description.includes('market')); // true
console.log(description.trim().split(' ')); // ['Weekly', 'groceries', 'supermarket']
console.log(description.trim().replace('supermarket', 'discounter')); // 'Weekly groceries discounter'

const category = 'Rent';

console.log(category.padEnd(12, '.'));  // 'Rent........' - pad to 12 characters, on the right
console.log(category.padStart(12, '0')); // '00000000Rent' - pad on the left
console.log(category.slice(0, 3));        // 'Ren' - substring, just like arrays
console.log(category.startsWith('Ren'));  // true
console.log(category.length);             // 4

Formatting numbers: toFixed and Intl.NumberFormat

const amount = -850.5;

console.log(amount.toFixed(2)); // '-850.50' - ALWAYS two decimal places, returns a STRING

// For real currency formatting (thousands separator, currency symbol):
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR' });
console.log(formatter.format(amount)); // '-€850.50'

A formatted summary for our budget app

const transactions = [
  { description: 'January salary', amount: 2400, category: 'Salary' },
  { description: 'January rent', amount: -850, category: 'Rent' },
  { description: 'Weekly groceries', amount: -60, category: 'Groceries' },
];

const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR' });

console.log('=== Budget App Summary ===');
for (const t of transactions) {
  const sign = t.amount > 0 ? '+' : '';
  console.log(`${t.category.padEnd(14, '.')} ${sign}${formatter.format(t.amount)} | ${t.description}`);
}

const balance = transactions.reduce((sum, t) => sum + t.amount, 0);
console.log(`${'Balance'.padEnd(14, '.')} ${formatter.format(balance)}`);

With that, phase 2 (functions & data structures) is complete! Phase 3 covers scope, closures, this, and object-oriented programming with classes.