Eine Zeichenkette in ein Datum in JavaScript umwandeln

Datumszeichenfolgen aus einer Datenbank oder API sind weiterhin Zeichenfolgen. Für einen Datepicker oder eine Berechnung wird möglicherweise ein JavaScript-Date-Objekt benötigt. Welche Umwandlung passt, hängt vom Eingabeformat und davon ab, ob eine Zeitzone angegeben ist. Übergeben Sie die Zeichenfolge als Argument an new Date(dateString), um eine unterstützte Standardzeichenfolge zu parsen. Der Aufruf new Date() ohne Argument erstellt ein Date-Objekt für den aktuellen Zeitpunkt. Verwenden Sie Date.parse(), wenn Sie Millisekunden benötigen, oder zerlegen Sie die Bestandteile selbst, wenn das benutzerdefinierte Format bekannt ist.

Dieser Leitfaden stellt drei praktische Möglichkeiten vor:

• Übergeben Sie eine unterstützte Datumszeichenfolge an new Date(dateString), um ein Date-Objekt zu erstellen.
• Rufen Sie Date.parse() auf, wenn ein numerischer Wert in Millisekunden hilfreich ist.
• Zerlegen Sie ein bekanntes benutzerdefiniertes Format in Bestandteile, bevor Sie ein Date-Objekt erstellen.

Mit new Date() eine Zeichenfolge in ein Date-Objekt umwandeln

Der Konstruktor new Date(dateString) akzeptiert eine unterstützte Datumszeichenfolge und gibt ein Date-Objekt zurück. Dieser Zeitstempel im Format ISO 8601 enthält Z, das UTC kennzeichnet. toISOString() gibt diesen UTC-Zeitpunkt unabhängig von der lokalen Zeitzone des Computers zurück.

Die unveränderte Beispielausgabe zeigt den UTC-Zeitpunkt; englische Beschriftungen darin bleiben Englisch.

const dateString = '2024-05-23T14:30:00Z';
const date = new Date(dateString);

console.log(date instanceof Date);
console.log(date.toISOString());

Eine reine Datumszeichenfolge wie 2024-05-23 wird als UTC interpretiert, während eine Datums- und Uhrzeitangabe ohne Offset als lokale Zeit gilt. Wenn die Quelle einen bestimmten Zeitpunkt bezeichnet, verwenden Sie eine Standardzeichenfolge mit explizitem Offset. So hängt ihre Interpretation nicht von der lokalen Zeitzone des Computers ab.

Das Parsen von Formaten außerhalb der standardisierten Datums- und Uhrzeitform ist in JavaScript-Implementierungen nicht einheitlich festgelegt. Eine Zeichenfolge, die ein Browser oder eine Laufzeitumgebung akzeptiert, kann anderswo anders interpretiert werden. Prüfen Sie das resultierende Objekt vor der Verwendung mit Number.isNaN(date.getTime()). Ein erfolgreiches Parsen belegt außerdem nicht, dass die Zeichenfolge dem erforderlichen Format oder den Kalenderregeln Ihrer Anwendung entspricht; prüfen Sie diese Anforderungen gesondert.

Mit Date.parse() eine Datumszeichenfolge in JavaScript parsen

Date.parse() gibt für eine geparste Datumszeichenfolge die Anzahl der Millisekunden seit der Unix-Epoche zurück oder NaN, wenn die Eingabe nicht geparst werden kann. Das Ergebnis ist eine Zahl und kein Date-Objekt. Bei einem API-Wert können Sie ihn parsen und aus dem Zahlenwert ein Datum erstellen, wenn Sie ein Objekt benötigen:

Die unveränderte Beispielausgabe zeigt den Millisekundenwert und das daraus erstellte Datum; englische Beschriftungen darin bleiben Englisch.

const apiValue = '2019-01-01T12:30:00.000Z';
const milliseconds = Date.parse(apiValue);

console.log(typeof milliseconds);
console.log(Number.isNaN(milliseconds) ? 'not parsed' : new Date(milliseconds).toISOString());

Number.isNaN() erkennt das Signal für einen Parsing-Fehler, validiert aber kein anwendungsspezifisches Format vollständig. Eine Laufzeitumgebung kann einen Wert akzeptieren, den Ihre Anwendung ablehnen sollte. Wenn die Eingabe einem bestimmten Muster entsprechen muss, prüfen Sie dieses Muster und die Kalenderwerte, bevor Sie das geparste Ergebnis verwenden.

Eine Zeichenfolge zerlegen und in JavaScript in ein Date-Objekt umwandeln

Wenn eine Eingabe ein bekanntes benutzerdefiniertes Format verwendet, zerlegen Sie sie entsprechend diesem Format und übergeben Sie die Bestandteile an den mehrparametrigen Date-Konstruktor. Dieses Beispiel erwartet DD-MM-YYYYTHH:mm:ss; der Konstruktor interpretiert die Bestandteile als lokale Zeit. Es gibt null zurück, wenn die Bestandteile kein gültiges Kalenderdatum ergeben.

Die unveränderte Beispielausgabe veranschaulicht das Ergebnis der Umwandlung; englische Beschriftungen darin bleiben Englisch.

function parseKnownDate(value) {
  if (typeof value !== 'string') {
    return null;
  }

  const dateTimeParts = value.split('T');
  if (dateTimeParts.length !== 2) {
    return null;
  }

  const [datePart, timePart] = dateTimeParts;
  if (
    !/^\d{2}-\d{2}-\d{4}$/.test(datePart) ||
    !/^\d{2}:\d{2}:\d{2}$/.test(timePart)
  ) {
    return null;
  }

  const dateParts = datePart.split('-');
  const timeParts = timePart.split(':');
  if (dateParts.length !== 3 || timeParts.length !== 3) {
    return null;
  }

  const [day, month, year] = dateParts.map(Number);
  const [hours, minutes, seconds] = timeParts.map(Number);

  if (![day, month, year, hours, minutes, seconds].every(Number.isInteger)) {
    return null;
  }

  // The multi-argument constructor treats years 0–99 as 1900–1999.
  // setFullYear preserves the supplied year, including values in that range.
  const date = new Date(0);
  date.setFullYear(year, month - 1, day);
  date.setHours(hours, minutes, seconds, 0);

  if (
    date.getFullYear() !== year ||
    date.getMonth() !== month - 1 ||
    date.getDate() !== day ||
    date.getHours() !== hours ||
    date.getMinutes() !== minutes ||
    date.getSeconds() !== seconds
  ) {
    return null;
  }

  return date;
}

const date = parseKnownDate('21-03-2020T11:20:30');
console.log(date === null ? 'not a valid date' : date.toString());

Die Zerlegung setzt die angegebene Reihenfolge der Bestandteile voraus. Passen Sie sie an, wenn die Quelle eine andere Reihenfolge oder ein anderes Trennzeichen verwendet. Der Monatsparameter beginnt bei null, daher zieht der Code vom lesbaren Monatswert eins ab. Die Setter verwenden die lokale Zeit und können Werte außerhalb des zulässigen Bereichs normalisieren. Ein Vergleich der resultierenden Bestandteile mit den geparsten Werten erkennt diese Normalisierung. Das Ausgangsdatum richtet sich nach der lokalen Zeitzone; diese Methode erstellt also einen Wert in lokaler Zeit und keinen UTC-Zeitstempel. Falls Jahre von 0 bis 99 vorkommen können, vermeidet setFullYear() die Sonderbehandlung dieser Jahre durch den mehrparametrigen Konstruktor. Dieses Beispiel prüft ganzzahlige Bestandteile und den Überlauf im Kalender. Bei strengeren Eingaberegeln sollte die Anwendung zusätzlich das genaue Zeichenfolgenmuster und die zulässigen Wertebereiche der einzelnen Felder prüfen.

Fazit

Übergeben Sie eine unterstützte Datumszeichenfolge an new Date(dateString), um ein Date-Objekt zu erstellen. Wenn sie einen bestimmten Zeitpunkt bezeichnet, verwenden Sie möglichst einen expliziten Offset. Der Aufruf new Date() ohne Argument erstellt ein Date-Objekt für den aktuellen Zeitpunkt und parst keine Zeichenfolge. Verwenden Sie Date.parse(), wenn Sie Millisekunden seit der Unix-Epoche oder das Fehlersignal NaN benötigen. Übergeben Sie eine erfolgreich geparste Zahl an new Date(milliseconds), wenn Sie ein Date-Objekt brauchen. Bei einem bekannten benutzerdefinierten Format parsen und validieren Sie die Bestandteile, bevor Sie ein Datum in lokaler Zeit erstellen. Der Überblick zu ISO 8601 beschreibt die Datums- und Uhrzeitdarstellung, die viele APIs verwenden.