Écrasez le formatage de la date et de l'heure de manière native : libérez la puissance cachée d'Intl.DateTimeFormat

Introduction aux API natives internationales

Les API Intl en JavaScript sont une solution puissante et native pour gérer la localisation et le formatage de données telles que les dates, les nombres et le texte dans différentes langues. Contrairement à de nombreuses bibliothèques tierces, ces API proposent :

• Hautes performances : Intégré au moteur JavaScript.

• Tailles de bundles plus petites : élimine le besoin de dépendances externes.

• Support mondial : inclut la localisation pour un large éventail de langues et de régions.

Contrairement aux bibliothèques externes, les API natives ne nécessitent ni mise à jour ni maintenance de la part du développeur. De plus, ils sont optimisés pour le moteur JavaScript sous-jacent, offrant une approche plus légère et plus rapide de la localisation et du formatage.

Dans cet article, nous nous concentrerons sur Intl.DateTimeFormat, une API dédiée au formatage des dates et heures en fonction de la localisation souhaitée. Nous verrons comment cette API peut remplacer les bibliothèques populaires telles que Moment.js, date-fns ou Day.js pour les besoins de formatage, offrant une alternative moderne et native.

---

Description de Intl.DateTimeFormat

Intl.DateTimeFormat est une classe qui permet le formatage localisé des dates et des heures. Il fournit des fonctionnalités avancées telles que la prise en charge de différentes localisations, des formats personnalisables et la gestion de calendriers et de fuseaux horaires alternatifs.

---

Création d'un formateur

Un formateur est une instance de Intl.DateTimeFormat qui stocke une configuration spécifique pour le formatage de la date. En utilisant un formateur, vous pouvez appliquer à plusieurs reprises le même format à différentes dates, rendant votre code plus efficace et plus lisible.

Pour créer un formateur, utilisez le constructeur Intl.DateTimeFormat avec les paramètres souhaités :

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

• locale : chaîne définissant la localisation (par exemple, "en-US" pour l'anglais américain, "it-IT" pour l'italien).

• options : un objet facultatif pour spécifier les composants de date (par exemple, jour de la semaine, mois, année, etc.).

Bien qu'il soit courant de sauvegarder l'instance du formateur dans une variable pour la réutiliser, cette étape n'est pas strictement requise. Le constructeur Intl.DateTimeFormat peut être invoqué directement pour formater les dates en ligne, comme indiqué ci-dessous :

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

Cependant, créer une instance de formateur devient particulièrement utile lorsque le même format doit être appliqué à plusieurs dates, améliorant ainsi la cohérence du code et évitant la redondance :

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

---

Exemples de base : premiers pas avec Intl.DateTimeFormat

Explorez la simplicité et la puissance de Intl.DateTimeFormat avec ces exemples fondamentaux. Nous montrerons comment créer un formateur pour les formats par défaut et personnalisés pouvant être réutilisés dans votre application.

1. Formatage par défaut

Si aucune option n'est fournie, le formateur utilise le format par défaut des paramètres régionaux sélectionnés.

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

2. Formatage personnalisé

Personnalisez la sortie en spécifiant les options souhaitées.

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"

---

Exemples avancés : libérer tout le potentiel de Intl.DateTimeFormat

Faites passer le formatage de votre date et de votre heure au niveau supérieur grâce à des scénarios avancés, tels que la gestion de plusieurs localisations, des calendriers alternatifs et des fuseaux horaires. Ces exemples mettent en valeur la polyvalence et l'adaptabilité d'Intl.DateTimeFormat dans des applications complexes.

1. Gérer différentes localisations

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

2. Formatage avec des calendriers alternatifs

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. Gestion des fuseaux horaires

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 et Intl.DateTimeFormat

L'utilisation de Intl.DateTimeFormat avec TypeScript garantit la sécurité des types et une meilleure expérience de développement. Les définitions TypeScript pour Intl.DateTimeFormat sont intégrées, fournissant la saisie semi-automatique et la documentation de ses méthodes et propriétés.

Voici un exemple :

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

Le typage strict permet d'éviter les erreurs d'exécution en détectant les problèmes potentiels au moment de la compilation, tels que des options ou des appels de méthode incorrects.

---

Comparaison avec les bibliothèques populaires

Pourquoi envisager Intl.DateTimeFormat ?

• Léger : Il est natif et ne nécessite pas de bibliothèques externes, ce qui réduit la taille du bundle.

• Performance : Souvent plus rapide que les solutions basées sur des bibliothèques.

• Localisation intégrée : prend en charge nativement diverses langues et calendriers.

Exemple : formatage simple

Avec 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"

Avec date-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"

Avec Day.js

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

Avec Intl.DateTimeFormat

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

Bien que les bibliothèques externes puissent offrir du sucre syntaxique, l'API native fournit des fonctionnalités équivalentes sans sacrifier la flexibilité ou l'efficacité. La syntaxe légèrement plus longue de l'API native est un petit compromis pour ses avantages en termes de maintenabilité, de performances et de simplicité.

---

Conclusion

Intl.DateTimeFormat fournit une solution native robuste pour le formatage de la date et de l'heure, ce qui en fait une excellente alternative aux bibliothèques populaires telles que Moment.js, date-fns et Day.js. Avec ses hautes performances, sa localisation intégrée et sa maintenance simplifiée, il s'agit d'un outil précieux pour les applications JavaScript modernes.

Pour approfondir votre connaissance de Intl.DateTimeFormat et explorer des fonctionnalités supplémentaires, visitez les documents Web officiels de MDN. Vous y trouverez une documentation complète et des exemples pratiques pour vous aider à maîtriser cette puissante API.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!