Wie man einen Datumsstring in ein menschenlesbares Format umwandelt

Ich gebe zu, dass ich diesen Artikel teilweise schreibe, weil ich ihn oft nachschlage und ihn beim nächsten Mal finden möchte. Das Formatieren eines Datumsstrings, den man von einer API in JavaScript erhält, kann viele Formen annehmen – alles von der vollständigen Einbindung von Moment.js für eine sehr feine Kontrolle bis hin zur Verwendung von nur ein paar Zeilen zur Aktualisierung. Dieser Artikel ist nicht als umfassend gedacht, sondern zielt darauf ab, den gängigsten Weg zur menschlichen Lesbarkeit zu zeigen.

ISO 8601 ist ein extrem gängiges Datumsformat. Das "Z" am Ende bedeutet, dass die Zeit im ISO 8601-Format den UTC-Standard verwendet, d.h. keine Zeitzone. Hier ist ein Beispiel: 2020-05-25T04:00:00Z. Wenn ich Daten von einer API abrufe, liegen sie typischerweise im ISO 8601-Format vor.

Wenn ich den obigen String in einem lesbareren Format formatieren wollte, z.B. May 25, 2020, würde ich das so machen

const dateString = '2020-05-14T04:00:00Z'

const formatDate = (dateString) => {
  const options = { year: "numeric", month: "long", day: "numeric" }
  return new Date(dateString).toLocaleDateString(undefined, options)
}

Hier ist, was ich tue...

Zuerst gebe ich Optionen für die gewünschte Formatierung der Ausgabe an. Es gibt viele, viele weitere Optionen, die wir dort übergeben könnten, um das Datum auf unterschiedliche Weise zu formatieren. Ich zeige hier nur ein recht gängiges Beispiel.

const options = { year: "numeric", month: "long", day: "numeric" }

Als Nächstes erstelle ich eine neue Date -Instanz, die einen einzelnen Zeitpunkt in einem plattformunabhängigen Format darstellt.

return new Date(dateString)

Schließlich verwende ich die Methode .toLocaleDateString(), um die Formatierungsoptionen anzuwenden.

return new Date(dateString).toLocaleDateString(undefined, options)

Beachten Sie, dass ich undefined übergeben habe. Wenn der Wert in diesem Fall nicht definiert ist, wird die Zeit durch die Standard-Locale repräsentiert. Sie können sie auch auf eine bestimmte Region/Sprache setzen. Oder, für internationalisierte Apps und Websites, können Sie übergeben, was der Benutzer ausgewählt hat (z.B. 'en-US' für die Vereinigten Staaten, 'de-DE' für Deutschland und so weiter). Es gibt ein schönes npm-Paket, das eine Liste weiterer Lokalisierungen und ihrer Codes enthält.

Ich hoffe, das hilft Ihnen beim Einstieg! Und High Fives an zukünftige Sarah, weil sie das nicht mehr an mehreren Stellen nachschauen muss. 🤚