JavaScript Academy · Lektion

Zahlen und Währungen formatieren

Verwenden Sie Intl.NumberFormat für lokalisierte Zahlen.

Zahlen und Währungen formatieren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Der Intl-Namespace

Intl ist die integrierte JavaScript-API für Internationalisierung. Sie formatiert Zahlen, Datumsangaben, Währungen und mehr nach den Konventionen einer Locale – ganz ohne Bibliothek.

console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"

Grundlagen von Intl.NumberFormat

Erstellen Sie einen Formatter mit einer Locale und rufen Sie anschließend format() auf. Locales verwenden BCP-47-Tags wie "en-US" oder "de-DE".

const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"

Unterschiede zwischen Locales

Dieselbe Zahl wird je nach Locale unterschiedlich dargestellt. Im Deutschen werden Tausender mit Punkten und Dezimalstellen mit einem Komma getrennt.

const n = 1234567.89;
console.log(new Intl.NumberFormat("en-US").format(n)); // 1,234,567.89
console.log(new Intl.NumberFormat("de-DE").format(n)); // 1.234.567,89

Währungsformatierung

Übergeben Sie style: "currency" und einen currency-Code. Symbol und Position richten sich nach der Locale.

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"

Währungen in verschiedenen Locales

Die Währung bleibt gleich, aber ihre Darstellung passt sich an die gewählte Locale an.

const opts = { style: "currency", currency: "EUR" };
console.log(new Intl.NumberFormat("en-IE", opts).format(1000)); // €1,000.00
console.log(new Intl.NumberFormat("de-DE", opts).format(1000)); // 1.000,00 €

Prozentformat

style: "percent" multipliziert den Wert mit 100 und hängt das Prozentzeichen der Locale an.

const pct = new Intl.NumberFormat("en-US", { style: "percent" });
console.log(pct.format(0.1875)); // "19%"
console.log(new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 2 }).format(0.1875)); // "18.75%"

Dezimalstellen steuern

minimumFractionDigits und maximumFractionDigits legen die Anzahl der Dezimalstellen fest.

const f = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(f.format(3));    // "3.00"
console.log(f.format(3.14159)); // "3.14"

Einheiten

style: "unit" mit einer unit formatiert Maßeinheiten wie Kilometer oder Liter.

const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"

Kompakte Schreibweise

notation: "compact" kürzt große Zahlen ab (1.2K, 3.4M) – ideal für Zähler in sozialen Netzwerken.

const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500));    // "1.5K"
console.log(c.format(2300000)); // "2.3M"

Vorzeichen anzeigen

signDisplay: "always" zeigt auch bei positiven Werten ein Vorzeichen an – praktisch für Differenzen und Änderungen.

const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5));  // "+5"
console.log(s.format(-5)); // "-5"

Formatter wiederverwenden

Das Erstellen eines Formatters ist vergleichsweise aufwendig. Erstellen Sie ihn einmal und verwenden Sie ihn für viele Werte wieder, statt pro Aufruf einen neuen zu erzeugen.

const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const prices = [9.99, 19.5, 100];
console.log(prices.map((p) => money.format(p)));

Schnelltest

Testen Sie die Zahlenformatierung.

Zusammenfassung: Zahlen und Währungen

Sie haben Zahlen nach Locale formatiert, Währungen, Prozente und Einheiten verarbeitet, die kompakte Schreibweise und die Vorzeichenanzeige kennengelernt, Dezimalstellen gesteuert und gelernt, Formatter wiederzuverwenden. Als Nächstes geht es um Datumsangaben und Uhrzeiten.

Häufig gestellte Fragen

Ist die Lektion „Zahlen und Währungen formatieren“ kostenlos?

Ja — der vollständige Text von „Zahlen und Währungen formatieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Zahlen und Währungen formatieren“?

Verwenden Sie Intl.NumberFormat für lokalisierte Zahlen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Zahlen und Währungen formatieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy