JavaScript Katana

JavaScript-Datumsformatierungsleitfaden: Von den Grundlagen bis zu bewährten Methoden

Datenverarbeitung (Zeichenketten, Zahlen, Datum, Arrays, Objekte)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Einführung

Beim Arbeiten mit JavaScript stößt man häufig auf Situationen, in denen Datumsangaben verarbeitet werden müssen. Zum Beispiel das aktuelle Datum auf einer Website anzeigen oder Veranstaltungspläne verwalten. Obwohl die JavaScript‑Datumsformatierung auf den ersten Blick einfach erscheint, finden viele Anfänger sie in der Praxis verwirrend.

In diesem Artikel erklären wir die JavaScript‑Datumsformatierung klar und verständlich, von den Grundlagen bis zu fortgeschritteneren Techniken. Durch das Lesen dieses Leitfadens erhalten Sie folgendes Wissen:

  • Grundlegende Datumsoperationen mit dem JavaScript‑ Date ‑Objekt
  • Methoden zur Datumsformatierung mit eingebauten APIs wie toLocaleDateString() und Intl.DateTimeFormat
  • Eine Einführung in nützliche Bibliotheken, die die Datumsformatierung vereinfachen

Dieser Artikel richtet sich an Anfänger, die mit den Grundlagen beginnen möchten, und bietet gleichzeitig fortgeschrittenen Anwendern praktische Techniken und Tipps zur Bibliotheksnutzung. Auf diese Weise können Sie Fähigkeiten erwerben, die in der realen Entwicklung nützlich sind.

Im nächsten Abschnitt beginnen wir mit einer Übersicht über die Grundlagen des JavaScript‑Date‑Objekts. Das Verständnis dieser Grundlagen ermöglicht Ihnen einen tieferen Einblick in die Funktionsweise der Datumsformatierung.

2. Grundlagen | Grundlegende Datumsverarbeitung in JavaScript

JavaScript stellt das Date‑Objekt zur Verarbeitung von Datum und Uhrzeit bereit. Mit diesem Objekt können Sie das aktuelle Datum und die aktuelle Uhrzeit abrufen, ein bestimmtes Datum festlegen und flexible Operationen wie das Hinzufügen oder Subtrahieren von Zeit durchführen.

2.1 Erstellen von Date‑Objekten

1. Aktuelles Datum und aktuelle Uhrzeit abrufen

const today = new Date();
console.log(today); // Example output: Sun Dec 29 2024 14:30:00 GMT+0900 (JST)

2. Ein bestimmtes Datum festlegen

const specificDate = new Date(2024, 11, 29); // Year, month (0-based), day
console.log(specificDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

3. Ein Datum aus einem Zeitstempel erstellen

const timestampDate = new Date(1703827200000); // Timestamp
console.log(timestampDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

2.2 Abrufen von Datumskomponenten

1. Jahr, Monat und Tag abrufen

const today = new Date();
console.log(today.getFullYear()); // Get year: 2024
console.log(today.getMonth() + 1); // Get month (0-based): 12
console.log(today.getDate()); // Get day: 29

2.3 Bearbeiten und Manipulieren von Daten

1. Tage zu einem Datum hinzufügen

today.setDate(today.getDate() + 1);
console.log(today); // Displays the next day's date

2. Auf ein bestimmtes Datum ändern

today.setFullYear(2025); // Change year to 2025
today.setMonth(0); // Change month to January
today.setDate(1); // Change day to the 1st
console.log(today); // Example output: Wed Jan 1 2025 14:30:00 GMT+0900 (JST)

2.4 Zeitzonen und UTC

1. UTC‑Datumswerte abrufen

console.log(today.getUTCFullYear()); // Get UTC year
console.log(today.getUTCMonth() + 1); // Get UTC month
console.log(today.getUTCDate()); // Get UTC day

2. Einen ISO‑8601‑Datumsstring erhalten

console.log(today.toISOString()); // Get ISO 8601 formatted string

Zusammenfassung

In diesem Abschnitt haben wir die Grundlagen der Datumsmanipulation mit dem JavaScript‑Date‑Objekt erklärt.

3. Methoden zur Datumsformatierung [Basic]

Beim Arbeiten mit Datumsangaben in JavaScript ist die Anpassung des Anzeigeformats äußerst wichtig. In diesem Abschnitt erklären wir die grundlegenden Methoden zur Datumsformatierung.

3.1 Einfache Zeichenkettenverkettung

1. Datumsanzeige im Format YYYY‑MM‑DD

const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example output: 2024-12-29

3.2 Formatierung mit toLocaleDateString()

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // Example output: 2024/12/29

3.3 ISO 8601-Format und toISOString()

console.log(date.toISOString());
// Example output: 2024-12-29T05:30:00.000Z

Zusammenfassung

In diesem Abschnitt haben wir die Grundlagen der Datumsformatierung in JavaScript behandelt.

4. Fortgeschrittene Datumsformatierung [Practical]

In diesem Abschnitt werden wir fortgeschrittene und praktische Techniken zur Datumsformatierung vorstellen.

4.1 Benutzerdefinierte Formatierung mit Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(formatter.format(date)); // Example output: 2024/12/29

4.2 Umgang mit Zeitzonen

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short'
});
console.log(formatter.format(utcDate));
// Example output: 12/29/2024, EST

Zusammenfassung

In diesem Abschnitt haben wir fortgeschrittene Datumsformatierungstechniken vorgestellt, die für reale Anwendungen geeignet sind.

5. Nützliche externe Bibliotheken zur Datumsformatierung

JavaScript bietet viele eingebaute Funktionen zur Datummanipulation, aber die Verwendung externer Bibliotheken kann die Effizienz und Lesbarkeit erheblich verbessern.

5.1 Verwendung von Moment.js (veraltet)

const moment = require('moment');
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

5.2 Warum date-fns empfohlen wird und Beispielverwendung

import { format } from 'date-fns';
const today = new Date();
const formattedDate = format(today, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

Zusammenfassung

In diesem Abschnitt haben wir die Vorteile externer Bibliotheken vorgestellt und gezeigt, wie man sie effektiv nutzt.

6. Häufige Fehler und Lösungen [FAQ]

Beim Arbeiten mit Daten in JavaScript stoßen sowohl Anfänger als auch fortgeschrittene Entwickler häufig auf ähnliche Fehler und Probleme. In diesem Abschnitt erklären wir häufige Probleme, deren Ursachen und praktische Lösungen im FAQ-Format.

Q1. Warum verschiebt sich der Monat um eins?

Beispielproblem

const date = new Date(2024, 12, 29);
console.log(date); // Output: 2025-01-29

Ursache

In JavaScript beginnen Monatsindizes bei 0, nicht bei 1.

Lösung

Wenn ein Monat angegeben wird, muss 1 vom gewünschten Monatswert subtrahiert werden.

const date = new Date(2024, 11, 29); // Correct way to specify December
console.log(date); // Output: 2024-12-29

Q2. Warum werden Zahlen nicht mit Nullen aufgefüllt?

Beispielproblem

const today = new Date();
const month = today.getMonth() + 1; // 12
const day = today.getDate();       // 9
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-9

Lösung

Verwenden Sie slice() oder padStart(), um Nullauffüllung anzuwenden.

const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-09

Zusammenfassung

In diesem Abschnitt haben wir häufige Fehler und wichtige Überlegungen im Zusammenhang mit der Datumshandhabung in JavaScript im FAQ-Format erklärt.

7. Wichtige Hinweise und bewährte Praktiken

Die Datumshandhabung in JavaScript ist leistungsfähig, aber Missverständnisse bezüglich seiner Spezifikationen oder unsachgemäße Nutzung können leicht zu Fehlern und Bugs führen. In diesem Abschnitt stellen wir wichtige Hinweise und bewährte Praktiken für eine sichere und effiziente Datummanipulation vor.

7.1 Monatsindizes und Nullauffüllung

const date = new Date(2024, 11, 29); // December 29
console.log(date.getMonth() + 1); // Output: 12

7.2 Zeitzonenverwaltung

Verwendung von UTC

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
console.log(utcDate.toISOString());
// Output: 2024-12-29T12:00:00.000Z

7.3 Verbesserung der Lesbarkeit und Wartbarkeit

Erstellen einer Datumsformatierungsfunktion

function formatDate(date) {
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
console.log(formatDate(new Date()));
// Output: 2024-12-29

Zusammenfassung

In diesem Abschnitt haben wir wichtige Hinweise und bewährte Methoden für den Umgang mit Datumsangaben in JavaScript erklärt.

8. Fazit

Der Umgang mit Datumsangaben in JavaScript ist ein häufig benötigtes Feature in der Webentwicklung. In diesem Artikel haben wir alles Schritt für Schritt erklärt, von grundlegenden Konzepten bis zu fortgeschrittenen Techniken, sodass die Leser Wissen erwerben können, das in realen Projekten anwendbar ist.

Rückblick auf die wichtigsten Erkenntnisse

  1. Grundlegende Datumsoperationen
  • Erklärte grundlegende Operationen und wichtige Überlegungen bei der Verwendung des Date -Objekts.
  1. Grundlagen und fortgeschrittene Formatierungstechniken
  • Einführung von benutzerdefinierter Formatierung, Internationalisierungsunterstützung und Zeitzonenhandhabung.
  1. Verwendung externer Bibliotheken
  • Vergleich von Funktionen und Nutzung von Bibliotheken wie date-fns und Day.js .
  1. Häufige Fehler und Lösungen
  • Organisierte typische Fehlerszenarien und deren Lösungen in einem FAQ-Format.

Nächste Schritte

  1. Testen Sie den Beispielcode in Ihrer eigenen Umgebung.
  2. Stellen Sie Bibliotheken vor und führen Sie Vergleiche durch.
  3. Fordern Sie sich selbst mit praktischen Anwendungen in realen Systemen heraus.

Abschließende Gedanken

Der Umgang mit Datumsangaben in JavaScript kann komplex werden, wenn detaillierte Spezifikationen und Internationalisierung berücksichtigt werden. Nutzen Sie diesen Artikel als Referenz, um Ihre praktischen Fähigkeiten weiter zu verfeinern.

広告