Formatage des dates et des nombres avec l'API Intl

Vous avez déjà utilisé Intl.DateTimeFormat et Intl.NumberFormat. Mais si votre modèle mental remonte à quelques années, vous passez probablement à côté de fonctionnalités importantes—notamment les contrôles d’arrondi de Intl.NumberFormat et la manière dont Temporal et Intl fonctionnent ensemble dans les environnements d’exécution de fin 2025.

Cet article fournit une vue d’ensemble technique actualisée de l’internationalisation JavaScript via l’API Intl, en se concentrant sur ce qui a changé et sur ce que les développeurs expérimentés comprennent souvent mal.

Ce que fait réellement Intl

L’espace de noms Intl gère le formatage des valeurs en fonction des paramètres régionaux. Il n’analyse pas, ne calcule pas et ne manipule pas les données—il transforme les valeurs en chaînes lisibles par l’homme selon les conventions culturelles.

Deux points critiques :

1. Intl formate ; il ne stocke ni ne calcule. La logique de votre application reste séparée de la présentation.
2. La sortie varie selon l’environnement d’exécution. Les données de paramètres régionaux sous-jacentes proviennent des bibliothèques ICU intégrées aux navigateurs et à Node.js. Les chaînes exactes peuvent différer légèrement entre Chrome et Safari, ou entre les versions de Node.

Ne codez jamais en dur les chaînes de sortie attendues dans les tests. Utilisez plutôt formatToParts() ou des assertions structurelles.

Intl.DateTimeFormat : au-delà des options de base

Formatage des objets Date

Intl.DateTimeFormat reste la méthode standard pour formater les objets Date JavaScript :

const formatter = new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'long',
  timeStyle: 'short',
  timeZone: 'Europe/Berlin'
});

formatter.format(new Date()); // "27. Juni 2025 um 14:30"

Les options dateStyle et timeStyle fournissent des configurations prédéfinies. Lorsque vous avez besoin d’un contrôle granulaire, utilisez des options individuelles comme weekday, month, hour et timeZoneName.

Types Temporal et formatage adapté aux paramètres régionaux

Temporal est activement implémenté dans les moteurs JavaScript modernes, mais n’est pas encore largement pris en charge dans tous les navigateurs et environnements. Là où il est disponible, Temporal.PlainDate, Temporal.ZonedDateTime et les autres types Temporal se formatent eux-mêmes via toLocaleString(), plutôt que d’être passés directement à Intl.DateTimeFormat.prototype.format().

const date = Temporal.PlainDate.from('2025-06-27');
date.toLocaleString('ja-JP', { dateStyle: 'full' });
// "2025年6月27日金曜日"

Intl.DateTimeFormat accepte les objets Date. Les types Temporal gèrent leur propre logique de formatage et peuvent déléguer le comportement sensible aux paramètres régionaux en interne, mais ils ne sont pas formatés par Intl.DateTimeFormat lui-même. Cette distinction est importante lors de la conception d’API qui acceptent des entrées de date.

Plages de dates avec formatRange

Pour afficher des plages de dates, utilisez formatRange() :

const start = new Date(2025, 5, 27);
const end = new Date(2025, 6, 3);

new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' })
  .formatRange(start, end);
// "Jun 27 – Jul 3, 2025"

Le formateur réduit intelligemment les parties redondantes en fonction des conventions régionales.

Contrôles d’arrondi et d’affichage d’Intl.NumberFormat

Options d’arrondi modernes

Le comportement d’arrondi d’Intl.NumberFormat s’est considérablement étendu dans les spécifications récentes, avec une prise en charge variable selon l’environnement d’exécution. Au-delà de minimumFractionDigits et maximumFractionDigits, vous disposez maintenant de :

• roundingMode : Contrôle la manière dont les valeurs sont arrondies (ceil, floor, halfExpand, halfEven, etc.)
• roundingIncrement : Arrondit à des incréments spécifiques (5, 10, 50, etc.)
• trailingZeroDisplay : Contrôle l’affichage des zéros de fin (auto ou stripIfInteger)

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  roundingMode: 'halfEven',
  maximumFractionDigits: 2
});

formatter.format(2.225); // "$2.22" (arrondi bancaire)
formatter.format(2.235); // "$2.24"

Modèles de formatage de nombres adaptés aux paramètres régionaux

Pour la notation compacte et le formatage d’unités :

// Notation compacte
new Intl.NumberFormat('en-US', {
  notation: 'compact',
  compactDisplay: 'short'
}).format(1234567); // "1.2M"

// Formatage d'unités
new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'short'
}).format(120); // "120 km/h"

Considérations pratiques

Réutiliser les instances de formateurs

La création de formateurs a un coût. Mettez-les en cache lors du formatage de plusieurs valeurs :

// Faites ceci
const priceFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});
prices.map(p => priceFormatter.format(p));

// Pas ceci
prices.map(p => new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(p));

Détection de fonctionnalités

Vérifiez les options plus récentes par programmation :

try {
  new Intl.NumberFormat('en', { roundingMode: 'halfEven' });
  // Fonctionnalité prise en charge
} catch (e) {
  // Repli sur l'arrondi par défaut
}

Paramètres régionaux vs fuseau horaire

Ce sont des concepts indépendants. Un paramètre régional (en-GB) détermine les conventions de formatage. Un fuseau horaire (Europe/London) détermine l’heure affichée. Vous pouvez formater une date selon les conventions allemandes tout en affichant l’heure de Tokyo.

Conclusion

L’API Intl pour le formatage des dates et le formatage de nombres adapté aux paramètres régionaux a considérablement mûri. La spécification inclut désormais des modes d’arrondi, des contrôles d’affichage et un formatage de plages qui éliminent la plupart des raisons d’utiliser des bibliothèques externes.

Les types Temporal coexistent avec Intl—ils gèrent leurs propres appels toLocaleString() tandis que Intl.DateTimeFormat continue de formater les objets Date. Construisez votre modèle mental autour de cette séparation, testez sans attentes de chaînes codées en dur et réutilisez les instances de formateurs pour les performances.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.