Wie man Daten in JavaScript formatiert: Ein Leitfaden zur Leistung

Datumsformatierung in JavaScript: Nicht einfach "Strings zusammenkleben"

Die Frage "How do I format a date in JavaScript?" ist eine der beliebtesten auf Stack Overflow. Und das zu Recht. Jeder Entwickler stand schon mindestens einmal vor der Situation, ein Datum nicht im Standardformat "Fri Feb 14 2025 12:00:00 GMT+0300" auszugeben, sondern schön formatiert: "14. Februar 2025" oder "2025-02-14". Scheinbar einfach, aber es gibt viele Fallstricke und Leistungsprobleme.

In diesem Artikel analysieren wir alle Methoden zur Datumsformatierung in JavaScript: von den einfachsten bis zu den leistungsstärksten. Sie erfahren, wie Sie typische Fehler vermeiden und Ihren Code nicht nur schön, sondern auch schnell machen. Los geht's!

Warum ist das native Date so unpraktisch?

Das eingebaute Date-Objekt in JavaScript ist, gelinde gesagt, "Altlast". Es bietet keine integrierte format()-Methode wie in Python oder PHP. Stattdessen müssen Sie das Datum manuell mit Gettern zusammensetzen:

const date = new Date();\nconst day = String(date.getDate()).padStart(2, '0');\nconst month = String(date.getMonth() + 1).padStart(2, '0');\nconst year = date.getFullYear();\nconsole.log(`${year}-${month}-${day}`); // "2025-02-14"

Das funktioniert, ist aber umständlich. Und wenn Sie das Datum auch noch lokalisieren müssen (z. B. auf Deutsch), wird der Code unanständig groß. Genau deshalb suchen Entwickler nach Alternativen.

Die Methode toLocaleDateString: Einfach und schnell

Der einfachste Weg, ein Datum in JavaScript zu formatieren, ist die Methode toLocaleDateString(). Sie akzeptiert ein Locale und ein Objekt mit Optionen:

const date = new Date();\nconst options = { year: 'numeric', month: 'long', day: 'numeric' };\nconsole.log(date.toLocaleDateString('de-DE', options)); // "14. Februar 2025"

Diese Methode passt sich automatisch an das Locale an. Möchten Sie "February 14, 2025"? Ändern Sie einfach das Locale auf 'en-US'.

Vorteile:

\n
• Einfach zu bedienen.
\n
• Integrierte Lokalisierung.
\n
• Der Code liest sich wie natürliche Sprache.
\n

Nachteile:

\n
• Leistung: Jeder Aufruf von toLocaleDateString() erzeugt ein neues Formatierungsobjekt. In einer Schleife mit 1000 Elementen kann das spürbar sein.
\n
• Eingeschränkte Kontrolle über das Format (z. B. kann "14.02.2025" ohne Jahr nicht ausgegeben werden).
\n

Intl.DateTimeFormat: Leistungsstark und effizient

Für mehr Kontrolle und Optimierung verwenden Sie Intl.DateTimeFormat. Dies ist ein Objekt, das einmal erstellt und mehrfach verwendet werden kann:

const formatter = new Intl.DateTimeFormat('de-DE', {\n  year: 'numeric',\n  month: '2-digit',\n  day: '2-digit'\n});\n\nconst date1 = new Date();\nconst date2 = new Date('2024-12-25');\nconsole.log(formatter.format(date1)); // "14.02.2025"\nconsole.log(formatter.format(date2)); // "25.12.2024"

Warum ist das schneller? Weil das Formatierungsobjekt nur einmal erstellt wird, nicht bei jedem Aufruf. In Leistungstests ist Intl.DateTimeFormat in Schleifen 5-10 Mal schneller als toLocaleDateString().

Darüber hinaus unterstützt Intl.DateTimeFormat zusätzliche Optionen wie weekday, hour, minute, second und sogar timeZone:

const formatter = new Intl.DateTimeFormat('en-US', {\n  weekday: 'long',\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit'\n});\nconsole.log(formatter.format(new Date())); // "Friday, Feb 14, 2025, 12:00 PM"

Eine knifflige Frage: Was ist, wenn Sie ein Datum im Format "2025-02-14" ohne Lokalisierung ausgeben möchten? Intl.DateTimeFormat kann Stunden, Minuten und Sekunden nicht separat ausgeben, aber für einfache Daten ist das