Wir haben Template Literals bereits mehrfach genutzt – Zeit, sie und die wichtigsten String-Methoden systematisch zu behandeln, um unser Haushaltsbuch besser auszugeben.

Template Literals: Interpolation mit Backticks

const beschreibung = 'Miete';
const betrag = -850;

// Alte, umständliche String-Verkettung:
const zeileAlt = beschreibung + ': ' + betrag + ' EUR';

// Template Literal, lesbarer:
const zeileNeu = `${beschreibung}: ${betrag} EUR`;

console.log(zeileAlt, zeileNeu); // identisches Ergebnis: 'Miete: -850 EUR'

Innerhalb ${...} steht ein VOLLSTÄNDIGER JavaScript-Ausdruck – nicht nur eine Variable:

const betrag = -850;
console.log(`Typ: ${betrag > 0 ? 'Einnahme' : 'Ausgabe'}, Betrag: ${Math.abs(betrag)} EUR`);
// 'Typ: Ausgabe, Betrag: 850 EUR'

Mehrzeilige Strings

const quittung = `Haushaltsbuch-Quittung
----------------------
Beschreibung: Miete
Betrag: -850 EUR`;

console.log(quittung);

Mit normalen Anführungszeichen ('...'/"...") wäre das nur über explizite \n-Zeichen möglich – Template Literals übernehmen echte Zeilenumbrüche 1:1.

Wichtige String-Methoden

const beschreibung = '  Wocheneinkauf Supermarkt  ';

console.log(beschreibung.trim());          // 'Wocheneinkauf Supermarkt' - Leerzeichen am Rand entfernen
console.log(beschreibung.toUpperCase());   // '  WOCHENEINKAUF SUPERMARKT  '
console.log(beschreibung.toLowerCase());   // '  wocheneinkauf supermarkt  '
console.log(beschreibung.includes('Markt')); // true
console.log(beschreibung.trim().split(' ')); // ['Wocheneinkauf', 'Supermarkt']
console.log(beschreibung.trim().replace('Supermarkt', 'Discounter')); // 'Wocheneinkauf Discounter'

const kategorie = 'Miete';

console.log(kategorie.padEnd(12, '.'));  // 'Miete.......' - auf 12 Zeichen auffüllen, rechts
console.log(kategorie.padStart(12, '0')); // '0000000Miete' - links auffüllen
console.log(kategorie.slice(0, 3));        // 'Mie' - Teilstring, wie bei Arrays
console.log(kategorie.startsWith('Mie'));  // true
console.log(kategorie.length);             // 5

Zahlen formatieren: toFixed und Intl.NumberFormat

const betrag = -850.5;

console.log(betrag.toFixed(2)); // '-850.50' - IMMER zwei Nachkommastellen, gibt einen STRING zurück

// Für echte Währungsformatierung (Tausendertrennzeichen, Währungssymbol):
const formatierer = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(formatierer.format(betrag)); // '-850,50 €'

Eine formatierte Übersicht für unser Haushaltsbuch

const transaktionen = [
  { beschreibung: 'Gehalt Januar', betrag: 2400, kategorie: 'Gehalt' },
  { beschreibung: 'Miete Januar', betrag: -850, kategorie: 'Miete' },
  { beschreibung: 'Wocheneinkauf', betrag: -60, kategorie: 'Lebensmittel' },
];

const formatierer = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });

console.log('=== Haushaltsbuch-Übersicht ===');
for (const t of transaktionen) {
  const zeichen = t.betrag > 0 ? '+' : '';
  console.log(`${t.kategorie.padEnd(14, '.')} ${zeichen}${formatierer.format(t.betrag)} | ${t.beschreibung}`);
}

const saldo = transaktionen.reduce((summe, t) => summe + t.betrag, 0);
console.log(`${'Saldo'.padEnd(14, '.')} ${formatierer.format(saldo)}`);

Damit ist Phase 2 (Funktionen & Datenstrukturen) abgeschlossen! Phase 3 widmet sich Scope, Closures, this und der objektorientierten Programmierung mit Klassen.