Zerstören Sie die native Formatierung von Datum und Uhrzeit: Setzen Sie die verborgene Kraft von Intl.DateTimeFormat frei

Einführung in Native Intl APIs

Die Intl APIs in JavaScript sind eine leistungsstarke und native Lösung für die Lokalisierung und Formatierung von Daten wie Datumsangaben, Zahlen und Text in verschiedenen Sprachen. Im Gegensatz zu vielen Bibliotheken von Drittanbietern bieten diese APIs Folgendes:

• Hohe Leistung: Integriert in die JavaScript-Engine.

• Kleinere Paketgrößen: Macht externe Abhängigkeiten überflüssig.

• Globale Unterstützung: Beinhaltet Lokalisierung für eine Vielzahl von Sprachen und Regionen.

Im Gegensatz zu externen Bibliotheken erfordern native APIs keine Aktualisierungen oder Wartung durch den Entwickler. Darüber hinaus sind sie für die zugrunde liegende JavaScript-Engine optimiert und bieten einen einfacheren und schnelleren Ansatz für die Lokalisierung und Formatierung.

In diesem Artikel konzentrieren wir uns auf Intl.DateTimeFormat, eine API zur Formatierung von Datums- und Uhrzeitangaben basierend auf der gewünschten Lokalisierung. Wir werden sehen, wie diese API beliebte Bibliotheken wie Moment.js, date-fns oder Day.js für Formatierungsanforderungen ersetzen kann und eine moderne und native Alternative bietet.

Beschreibung von Intl.DateTimeFormat

Intl.DateTimeFormat ist eine Klasse, die eine lokalisierte Formatierung von Datums- und Uhrzeitangaben ermöglicht. Es bietet erweiterte Funktionen wie Unterstützung für verschiedene Lokalisierungen, anpassbare Formate und die Handhabung alternativer Kalender und Zeitzonen.

Erstellen eines Formatierers

Ein Formatierer ist eine Instanz von Intl.DateTimeFormat, die eine bestimmte Konfiguration für die Datumsformatierung speichert. Durch die Verwendung eines Formatierers können Sie dasselbe Format wiederholt auf verschiedene Datumsangaben anwenden und so Ihren Code effizienter und lesbarer machen.

Um einen Formatierer zu erstellen, verwenden Sie den Intl.DateTimeFormat-Konstruktor mit den gewünschten Parametern:

const formatter = new Intl.DateTimeFormat(locale, options);

• locale: Eine Zeichenfolge, die die Lokalisierung definiert (z. B. „en-US“ für amerikanisches Englisch, „it-IT“ für Italienisch).

• Optionen: Ein optionales Objekt zur Angabe von Datumskomponenten (z. B. Wochentag, Monat, Jahr usw.).

Während es üblich ist, die Formatierungsinstanz zur Wiederverwendung in einer Variablen zu speichern, ist dieser Schritt nicht unbedingt erforderlich. Der Intl.DateTimeFormat-Konstruktor kann direkt aufgerufen werden, um Datumsangaben inline zu formatieren, wie unten gezeigt:

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

Das Erstellen einer Formatierungsinstanz ist jedoch besonders nützlich, wenn dasselbe Format auf mehrere Datumsangaben angewendet werden muss, um die Codekonsistenz zu verbessern und Redundanz zu vermeiden:

const formatter = new Intl.DateTimeFormat(locale, options);

Grundlegende Beispiele: Erste Schritte mit Intl.DateTimeFormat

Entdecken Sie die Einfachheit und Leistungsfähigkeit von Intl.DateTimeFormat anhand dieser grundlegenden Beispiele. Wir zeigen, wie Sie einen Formatierer für Standard- und benutzerdefinierte Formate erstellen, der in Ihrer Anwendung wiederverwendet werden kann.

1. Standardformatierung

Wenn keine Optionen bereitgestellt werden, verwendet der Formatierer das Standardformat des ausgewählten Gebietsschemas.

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

2. Benutzerdefinierte Formatierung

Passen Sie die Ausgabe an, indem Sie die gewünschten Optionen angeben.

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

console.log(formatter.format(new Date(2024, 11, 19))); // Output: "December 19, 2024"
console.log(formatter.format(new Date(2023, 5, 15))); // Output: "June 15, 2023"

Erweiterte Beispiele: Das volle Potenzial von Intl.DateTimeFormat ausschöpfen

Bringen Sie Ihre Datums- und Uhrzeitformatierung mit erweiterten Szenarien auf die nächste Ebene, z. B. der Handhabung mehrerer Lokalisierungen, alternativer Kalender und Zeitzonen. Diese Beispiele zeigen die Vielseitigkeit und Anpassungsfähigkeit von Intl.DateTimeFormat in komplexen Anwendungen.

1. Umgang mit unterschiedlichen Lokalisierungen

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date)); // Output: "12/19/2024"

2. Formatieren mit alternativen Kalendern

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(formatter.format(date)); // Output: "Thursday, December 19, 2024"

3. Umgang mit Zeitzonen

const date = new Date(2024, 11, 19);
const italianFormatter = new Intl.DateTimeFormat('it-IT', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(italianFormatter.format(date)); // Output: "giovedì 19 dicembre 2024"

TypeScript und Intl.DateTimeFormat

Die Verwendung von Intl.DateTimeFormat mit TypeScript gewährleistet Typsicherheit und ein besseres Entwicklungserlebnis. Die TypeScript-Definitionen für Intl.DateTimeFormat sind integriert und bieten automatische Vervollständigung und Dokumentation für seine Methoden und Eigenschaften.

Hier ist ein Beispiel:

const islamicFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic');
console.log(islamicFormatter.format(new Date(2024, 11, 19))); // Output: Date in the Islamic calendar

Die strikte Typisierung hilft, Laufzeitfehler zu vermeiden, indem potenzielle Probleme zur Kompilierungszeit erkannt werden, wie z. B. falsche Optionen oder Methodenaufrufe.

Vergleich mit beliebten Bibliotheken

Warum Intl.DateTimeFormat in Betracht ziehen?

• Leichtgewicht: Es ist nativ und erfordert keine externen Bibliotheken, wodurch die Bundle-Größe reduziert wird.

• Leistung: Oft schneller als bibliotheksbasierte Lösungen.

• Integrierte Lokalisierung: Unterstützt nativ verschiedene Sprachen und Kalender.

Beispiel: Einfache Formatierung

Mit Moment.js

const date = new Date(Date.UTC(2024, 11, 19, 15, 30)); // Ensure the date is set in UTC

// Formatter for UTC
const utcFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'UTC',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(utcFormatter.format(date)); 
// Output: "Dec 19, 2024, 03:30 PM UTC"

// Formatter for Tokyo time zone
const tokyoFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'Asia/Tokyo',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(tokyoFormatter.format(date)); 
// Output: "2024/12/20 00:30 JST"

// Formatter for Berlin time zone
const berlinFormatter = new Intl.DateTimeFormat('de-DE', {
  timeZone: 'Europe/Berlin',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(berlinFormatter.format(date)); 
// Output: "19. Dez. 2024, 16:30 MEZ"

Mit Datums-FNS

const formatter: Intl.DateTimeFormat = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

const formattedDate: string = formatter.format(new Date(2024, 11, 19));
console.log(formattedDate); // Output: "December 19, 2024"

Mit Day.js

const moment = require('moment');
console.log(moment("2024-12-19").format('dddd, MMMM Do YYYY'));

Mit Intl.DateTimeFormat

const { format } = require('date-fns');
console.log(format(new Date(2024, 11, 19), 'EEEE, MMMM do yyyy'));

Während externe Bibliotheken möglicherweise syntaktischen Zucker bieten, bietet die native API eine gleichwertige Funktionalität ohne Einbußen bei Flexibilität oder Effizienz. Die etwas längere Syntax der nativen API ist ein kleiner Kompromiss für ihre Vorteile in Bezug auf Wartbarkeit, Leistung und Einfachheit.

Abschluss

Intl.DateTimeFormat bietet eine robuste, native Lösung für die Formatierung von Datum und Uhrzeit und ist damit eine hervorragende Alternative zu beliebten Bibliotheken wie Moment.js, date-fns und Day.js. Mit seiner hohen Leistung, der integrierten Lokalisierung und der vereinfachten Wartung ist es ein wertvolles Werkzeug für moderne JavaScript-Anwendungen.

Um tiefer in Intl.DateTimeFormat einzutauchen und zusätzliche Funktionen zu erkunden, besuchen Sie die offiziellen MDN-Webdokumente. Dort finden Sie eine umfassende Dokumentation und praktische Beispiele, die Ihnen bei der Beherrschung dieser leistungsstarken API helfen.

Das obige ist der detaillierte Inhalt vonZerstören Sie die native Formatierung von Datum und Uhrzeit: Setzen Sie die verborgene Kraft von Intl.DateTimeFormat frei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!