JavaScript-Datumsformatierungsleitfaden: So formatieren Sie Daten richtig – mit Beispielen

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung: Warum Datumsformatierung in JavaScript wichtig ist

In der Webentwicklung mit JavaScript ist das Anzeigen und Verwalten von Datum und Uhrzeit essenziell. Beispielsweise benötigen Kalenderanwendungen und Log‑Management‑Systeme Datums‑ und Zeitangaben, die korrekt formatiert sind. Dennoch kann die Handhabung von Daten in JavaScript für Einsteiger etwas komplex wirken.

In diesem Leitfaden stellen wir praktische Techniken und Code‑Beispiele vor, die Ihnen helfen, Datumsformatierung in JavaScript zu meistern. Von der grundlegenden Nutzung des Date‑Objekts über die erweiterte Verwendung von Intl.DateTimeFormat bis hin zu Vergleichen externer Bibliotheken – dieser Artikel liefert eine umfassende Erklärung.

Häufige Szenarien, in denen Datumsformatierung erforderlich ist

1. Datenanzeige in Webanwendungen:

• Unterstützung von Benutzern mit unterschiedlichen Kalendern und Zeitzonen.

1. Log‑Management und Debugging:

• Aufzeichnung von Zeitstempeln für Fehlermeldungen und Benutzeraktionen.

1. Mehrsprachige Unterstützung:

• Anpassung der Datumsanzeigeformate für internationale Nutzer.

Vorteile für die Leser

Durch das Lesen dieses Leitfadens erwerben Sie folgende Fähigkeiten:

• Verständnis für die Arbeit mit dem grundlegenden Date‑Objekt.
• Flexible Datumsanzeige mittels manueller Formatierung und integrierter Methoden.
• Effizientes Programmieren mit Hilfe externer Datumsbibliotheken.

Im nächsten Abschnitt werfen wir einen genaueren Blick auf die Grundlagen des JavaScript‑Date‑Objekts. Dieses Verständnis ermöglicht Ihnen, später reibungslos zu fortgeschritteneren Themen überzugehen.

2. Grundlagen der Datumsverarbeitung in JavaScript: Was ist das Date‑Objekt?

In JavaScript wird das Date‑Objekt verwendet, um Datum und Uhrzeit zu verwalten. Das Verständnis dieses Objekts ist der erste Schritt, um Datumsformatierung korrekt zu handhaben. Dieser Abschnitt erklärt die grundlegende Nutzung des Date‑Objekts.

2.1 Wie man ein Date‑Objekt erstellt

Ein Date‑Objekt kann auf folgende Weise erstellt werden.

1. Aktuelles Datum und aktuelle Uhrzeit erhalten

   const today = new Date();
   console.log(today); // Outputs the current date and time
   

2. Ein bestimmtes Datum und eine bestimmte Uhrzeit festlegen

   const customDate = new Date(2024, 11, 28); // Year, month (starts from 0), day
   console.log(customDate); // December 28, 2024
   

3. Ein Datum aus einem String erstellen

   const dateFromString = new Date('2024-12-28');
   console.log(dateFromString); // Date converted from ISO format
   

4. Ein Datum aus einem Zeitstempel erstellen

   const timestampDate = new Date(1703740800000); // Milliseconds
   console.log(timestampDate); // Date represented by the timestamp
   

2.2 Methoden zum Abrufen von Datum‑ und Zeitkomponenten

Das Date‑Objekt bietet Methoden, um einzelne Datum‑ und Zeitkomponenten abzurufen.

2.3 Arbeiten mit Zeitzonen und UTC

Lokale Zeit erhalten:

const date = new Date();
console.log(date.toString()); // Local time

UTC‑Zeit erhalten:

console.log(date.toUTCString()); // UTC-based time

Zeitzonen‑Offset erhalten:

console.log(date.getTimezoneOffset()); // -540 (in minutes, for Japan Standard Time)

Zusammenfassung

In diesem Abschnitt haben wir die Grundlagen des Date‑Objekts in JavaScript erklärt, einschließlich der Erstellung von Daten sowie des Abrufs und der Manipulation von Datums‑Komponenten.

Im nächsten Abschnitt gehen wir tiefer auf spezifische Methoden zur Formatierung von Daten in JavaScript ein.

3. Drei Wege, Daten in JavaScript zu formatieren

JavaScript bietet mehrere Möglichkeiten, Daten in verschiedene Darstellungen zu formatieren. In diesem Abschnitt erläutern wir drei Ansätze im Detail: manuelle Formatierung, eingebaute Methoden und erweiterte Formatierungsoptionen.

3.1 Manuelle Formatierung: Von den Grundlagen zur praktischen Anwendung

Einfaches benutzerdefiniertes Formatbeispiel

const date = new Date();
const year = date.getFullYear(); // Year
const month = ('0' + (date.getMonth() + 1)).slice(-2); // Month (zero-padded)
const day = ('0' + date.getDate()).slice(-2); // Day (zero-padded)

const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Beispiel: 2024-12-28

3.2 Locale-Aware Formatting with toLocaleDateString()

Basic Usage

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

Customization with Options

const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleDateString('ja-JP', options)); // Beispiel: 2024/12/28

3.3 Advanced Customization: Using Intl.DateTimeFormat

Basic Usage

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' });
console.log(formatter.format(date)); // Beispiel: Samstag, 28. Dezember 2024

Summary

In this section, we introduced three different ways to format dates in JavaScript. In the next section, we will explain how to improve efficiency by using external libraries for date handling.

4. Using External Libraries: Comparing Moment.js, date-fns, and Day.js

While JavaScript’s built-in date methods are powerful, using external libraries can make complex formatting and processing more concise and efficient.

4.1 Moment.js: A Proven Library for Legacy Systems

Basic Usage

const moment = require('moment'); // Import in einer Node.js-Umgebung
const now = moment(); // Aktuelles Datum und Uhrzeit
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // Beispiel: 2024-12-28 14:30:45

4.2 date-fns: A Modular Library for Modern Projects

Basic Usage

import { format, addDays } from 'date-fns';

const now = new Date();
console.log(format(now, 'yyyy-MM-dd')); // Beispiel: 2024-12-28

const nextWeek = addDays(now, 7);
console.log(format(nextWeek, 'yyyy-MM-dd')); // Beispiel: 2025-01-04

4.3 Day.js: A Lightweight, Moment-Compatible Modern Library

Basic Usage

const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // Beispiel: 2024-12-28

const nextWeek = now.add(7, 'day');
console.log(nextWeek.format('YYYY-MM-DD')); // Beispiel: 2025-01-04

4.4 Library Comparison Table

Summary

In this section, we compared popular external libraries that simplify date handling in JavaScript. In the next section, we will introduce practical application examples using these formatting techniques.

5. Practical Examples: Applications Using Date Formatting

5.1 Displaying Dates in a Calendar Application

Implementation Example

const selectedDate = new Date(); // Vom Benutzer ausgewähltes Datum

const formattedDate = selectedDate.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});

console.log(`Ausgewähltes Datum: ${formattedDate}`); 
// Beispiel: Ausgewähltes Datum: Samstag, 28. Dezember 2024

5.2 Managing Timestamps in Log Files

Implementation Example

const logTime = new Date().toISOString(); // Datum und Uhrzeit im ISO-Format erhalten
console.log(`[LOG] ${logTime}: Prozess gestartet`);
// Beispiel: [LOG] 2024-12-28T05:30:00.000Z: Prozess gestartet

5.3 Validating and Formatting Form Input Dates

Implementation Example

function formatInputDate(inputDate) {
  const date = new Date(inputDate); // Eingabezeichenfolge in ein Date-Objekt konvertieren

  if (isNaN(date)) {
    console.log('Ungültiges Datumsformat.');
    return null;
  }

  return date.toLocaleDateString('ja-JP', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
}

console.log(formatInputDate('2024-12-28')); // Beispiel: 2024/12/28

Summary

In this section, we introduced practical examples of using date formatting in JavaScript, including calendar displays, log management, and form validation. In the next section, we address frequently asked questions (FAQ) and provide solutions to common issues.

6. Frequently Asked Questions (FAQ)

Q1: Wie kann ich Daten und Zeiten im ISO‑Format anzeigen?

Antwort

Das ISO‑Format ist ein internationaler Standard für die Darstellung von Datum und Uhrzeit und wird häufig in Datenbanken und API‑Kommunikationen verwendet. In JavaScript kann man die Methode toISOString() des Date‑Objekts nutzen.

Beispielcode

const date = new Date();
console.log(date.toISOString()); // Example: 2024-12-28T05:30:00.000Z

Q2: Wie sollte ich den Unterschied zwischen UTC‑Zeit und lokaler Zeit handhaben?

Antwort

Standardmäßig verwendet JavaScript die lokale Zeit, bietet jedoch Methoden, um zwischen UTC und lokaler Zeit zu konvertieren.

Beispielcode

Lokale Zeit in UTC umwandeln:

const date = new Date();
console.log(date.toUTCString()); // Example: Sat, 28 Dec 2024 05:30:00 GMT

UTC in lokale Zeit umwandeln:

const date = new Date('2024-12-28T05:30:00Z'); 
console.log(date.toString()); 
// Example: Sat Dec 28 2024 14:30:00 GMT+0900 (Japan Standard Time)

Q3: Was ist der einfachste Weg, Null‑Padding bei der Datumsformatierung zu handhaben?

Antwort

function zeroPad(number) {
  return number.toString().padStart(2, '0');
}

const date = new Date();
const formattedDate = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
console.log(formattedDate); // Example: 2024-12-28

Zusammenfassung

In diesem Abschnitt haben wir häufig gestellte Fragen zur Datumsformatierung in JavaScript behandelt und praktische Lösungen bereitgestellt. Im nächsten Abschnitt schließen wir den Artikel mit einer Zusammenfassung und einem Aktionsplan ab, um das Gelernte anzuwenden.

7. Fazit und praktische nächste Schritte

7.1 Wichtige Erkenntnisse aus diesem Artikel

1. Grundlagen des JavaScript Date‑Objekts: Wir haben erklärt, wie man Date‑Objekte erstellt und Methoden nutzt, um Datum‑ und Uhrzeitwerte abzurufen und zu manipulieren.
2. Drei Ansätze zur Datumsformatierung: Manuelle Formatierung, eingebaute Methoden und der Einsatz externer Bibliotheken.
3. Praktische Anwendungsfälle: Beispiele aus der Praxis wie Kalender, Log‑Management und Formularvalidierung.
4. FAQ: Häufige Herausforderungen und bewährte Lösungen für die Datumsformatierung.

7.2 Aktionsplan für die praktische Umsetzung

1. Probieren Sie die Code‑Beispiele aus: Führen Sie den Beispielcode in einem Online‑Editor oder Ihrer lokalen Entwicklungsumgebung aus, um Ihr Verständnis zu vertiefen.
2. Auf reale Projekte anwenden: Integrieren Sie die Datumsformatierung in echte Projekte, indem Sie Kalender‑Features oder Log‑Management‑Funktionen hinzufügen.
3. Bibliotheken vergleichen: Testen Sie Moment.js, date-fns und Day.js, um zu bestimmen, welche Bibliothek am besten zu Ihren Projektanforderungen passt.

7.3 Abschließende Gedanken

Die JavaScript‑Datumsformatierung reicht von einfachen Operationen über fortgeschrittene Anpassungen bis hin zu leistungsstarken externen Bibliotheken. Nutzen Sie diesen Leitfaden als Referenz, um eine effiziente, flexible und wartbare Datum‑Verarbeitung in Ihren Anwendungen zu implementieren.