Dates formatieren
Zeigen Sie Dates mit den Optionen von toLocaleDateString an.
Dates formatieren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Datumsangaben formatieren
JavaScript stellt mehrere integrierte Methoden bereit, um ein Datum in lesbaren Text umzuwandeln – von lokalisierter Ausgabe bis hin zu standardisierten ISO-Strings.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())toISOString
toISOString gibt einen standardisierten String in UTC zurück. Das ist ideal für die Speicherung und den Datenaustausch, da der Wert eindeutig ist.
const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())Den ISO-String zuschneiden
Der ISO-String enthält das Datum am Anfang. Sie können daher die ersten zehn Zeichen ausschneiden, um nur das Kalenderdatum zu erhalten.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))toLocaleDateString
toLocaleDateString formatiert den Datumsanteil anhand einer Locale und erzeugt eine für die jeweilige Region passende Ausgabe.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)Das Locale-Argument
Das erste Argument ist ein Locale-Tag wie en-US oder de-DE. Es ändert die Reihenfolge und die Trennzeichen des formatierten Datums.
const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)Formatierungsoptionen
Mit einem options-Objekt können Sie festlegen, wie die einzelnen Bestandteile erscheinen sollen, etwa als ausgeschriebener Monatsname oder als numerisches Jahr.
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)toLocaleTimeString
toLocaleTimeString formatiert nur den Zeitanteil und berücksichtigt dabei ebenfalls die Locale und alle von Ihnen angegebenen Optionen.
const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)toLocaleString
toLocaleString kombiniert Datum und Uhrzeit zu einem einzigen lokalisierten String.
const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)toDateString
toDateString gibt ein festgelegtes, für Menschen lesbares Datum auf Englisch ohne Locale-Optionen zurück und eignet sich für eine schnelle Protokollierung.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())Intl.DateTimeFormat
Für wiederholte Formatierungen erstellt Intl.DateTimeFormat ein wiederverwendbares Formatter-Objekt. Das ist effizienter, als die Locale-Methoden viele Male aufzurufen.
const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))Ein Format auswählen
Verwenden Sie ISO-Strings für die Speicherung und APIs und Locale-Methoden für die Anzeige für Benutzer in ihrer Region. Halten Sie diese beiden Aufgabenbereiche getrennt.
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Kurze Überprüfung
Testen Sie Ihr Wissen über die Formatierung.
Zusammenfassung
Zusammenfassung: Wählen Sie für jede Aufgabe die passende Formatierungsmethode.
- toISOString für Speicherung und APIs
- toLocaleDateString und ähnliche Methoden für die Anzeige für Benutzer
- Optionen steuern Monatsnamen und Zahlenformate
- Intl.DateTimeFormat ist effizient bei wiederholten Formatierungen
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))Häufig gestellte Fragen
Ist die Lektion „Dates formatieren“ kostenlos?
Ja — der vollständige Text von „Dates 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 „Dates formatieren“?
Zeigen Sie Dates mit den Optionen von toLocaleDateString an. 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 3 von 4.
Wie lange dauert die Lektion „Dates 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.