Comment formater des nombres avec séparateurs de milliers

Utilisez JavaScript pour afficher de grands nombres avec des symboles de regroupement adaptés à la locale

Introduction

Les grands nombres sont difficiles à lire sans séparation visuelle. Le nombre 1234567 nécessite un comptage minutieux pour déterminer s'il représente un million ou dix millions. L'ajout de séparateurs crée 1 234 567, qui est immédiatement reconnaissable comme étant approximativement un million.

Différents pays utilisent différents symboles pour séparer les groupes de chiffres. Les Américains utilisent des virgules, les Allemands des points, et les francophones des espaces. Lorsque vous affichez des nombres dans une application utilisée par des personnes du monde entier, vous devez formater ces nombres selon les attentes de chaque utilisateur.

JavaScript fournit l'API Intl.NumberFormat pour gérer cela automatiquement. Cette leçon explique comment fonctionnent les séparateurs de milliers, pourquoi ils varient selon les locales, et comment formater correctement les nombres pour n'importe quelle langue ou région.

Ce que sont les séparateurs de milliers

Un séparateur de milliers est un symbole inséré entre des groupes de chiffres pour rendre les grands nombres plus faciles à lire. Dans la plupart des locales, les chiffres sont regroupés par ensembles de trois de droite à gauche. Le nombre 1234567 devient 1 234 567 avec des séparateurs d'espace.

Le terme "séparateur de milliers" provient du cas d'utilisation le plus courant où les séparateurs apparaissent après chaque groupe de trois chiffres. Cependant, le même mécanisme s'applique à tout regroupement de chiffres, qu'il s'agisse de centaines de milliers, de millions ou de milliards.

Sans séparateurs, les chiffres se confondent et nécessitent un comptage minutieux. Avec des séparateurs, votre œil peut rapidement identifier l'ordre de grandeur du nombre. Ce regroupement visuel réduit les erreurs de lecture et améliore la compréhension.

Pourquoi les séparateurs de milliers varient selon la locale

Différents pays ont établi différentes conventions pour écrire les nombres. Ces conventions se sont développées indépendamment en fonction des pratiques d'impression locales, des systèmes éducatifs et des préférences culturelles.

Dans les pays anglophones comme les États-Unis, le Royaume-Uni et l'Australie, les virgules servent de séparateurs de milliers. Le nombre un million apparaît comme 1,000,000.

Dans de nombreux pays européens, notamment l'Allemagne, l'Italie, l'Espagne et le Portugal, les points servent de séparateurs de milliers. Le même nombre apparaît comme 1.000.000.

En France et dans de nombreuses régions francophones, les espaces servent de séparateurs de milliers. Le nombre apparaît comme 1 000 000.

En Suisse, les apostrophes servent de séparateurs de milliers. Le nombre apparaît comme 1'000'000.

Certains pays comme l'Inde utilisent différents modèles de regroupement. La numérotation indienne regroupe les trois premiers chiffres, puis regroupe les chiffres suivants par paires. Un million apparaît comme 10,00,000 en utilisant le système lakh.

Lorsque vous codez en dur un caractère séparateur spécifique, vous supposez que tous les utilisateurs suivent la même convention. Cela rend votre application plus difficile à utiliser pour les personnes de différentes régions.

Utilisation d'Intl.NumberFormat pour ajouter des séparateurs de milliers

Le constructeur Intl.NumberFormat crée un formateur de nombres qui applique des conventions spécifiques à la locale. Passez un identifiant de locale comme premier argument, puis appelez la méthode format() avec un nombre.

const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(1234567));
// Résultat : "1,234,567"

Cela crée un formateur pour l'anglais américain, qui utilise des virgules comme séparateurs de milliers. La méthode format() convertit le nombre en chaîne de caractères avec les séparateurs appropriés insérés.

Vous pouvez formater le même nombre pour différentes locales en changeant l'identifiant de locale.

const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(1234567));
// Résultat : "1,234,567"

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(1234567));
// Résultat : "1.234.567"

const frFormatter = new Intl.NumberFormat('fr-FR');
console.log(frFormatter.format(1234567));
// Résultat : "1 234 567"

Chaque formateur applique les conventions de sa locale. Le formateur allemand utilise des points, le formateur français utilise des espaces, et le formateur américain utilise des virgules. Vous n'avez pas besoin de savoir quel symbole chaque locale utilise. L'API gère ces détails automatiquement.

Formatage des nombres selon la locale de l'utilisateur

Au lieu de coder en dur une locale spécifique, vous pouvez utiliser la langue préférée de l'utilisateur depuis le navigateur. La propriété navigator.language renvoie la préférence linguistique principale de l'utilisateur.

const userLocale = navigator.language;
const formatter = new Intl.NumberFormat(userLocale);

console.log(formatter.format(1234567));
// Le résultat varie selon la locale de l'utilisateur
// Pour en-US : "1,234,567"
// Pour de-DE : "1.234.567"
// Pour fr-FR : "1 234 567"

Cette approche affiche les nombres selon les attentes de chaque utilisateur sans leur demander de sélectionner manuellement une locale. Le navigateur fournit la préférence linguistique, et l'API Intl applique les conventions de formatage appropriées.

Vous pouvez également passer le tableau complet des langues préférées pour activer le comportement de repli.

const formatter = new Intl.NumberFormat(navigator.languages);
console.log(formatter.format(1234567));

L'API utilise la première locale qu'elle prend en charge dans le tableau. Cela offre une meilleure gestion du repli lorsque la préférence principale de l'utilisateur n'est pas disponible.

Comprendre le comportement de regroupement par défaut

Par défaut, Intl.NumberFormat applique des séparateurs de milliers à tous les nombres suffisamment grands pour bénéficier d'un regroupement. Les nombres à quatre chiffres ou plus reçoivent généralement des séparateurs, bien que cela varie selon la locale.

const formatter = new Intl.NumberFormat('en-US');

console.log(formatter.format(123));
// Résultat : "123"

console.log(formatter.format(1234));
// Résultat : "1,234"

console.log(formatter.format(12345));
// Résultat : "12,345"

console.log(formatter.format(123456));
// Résultat : "123,456"

Les petits nombres comme 123 n'ont pas besoin de séparateurs et apparaissent sans eux. Les nombres à partir de 1234 reçoivent des séparateurs car le regroupement améliore la lisibilité.

L'API détermine automatiquement quand les séparateurs sont bénéfiques selon les conventions de la locale. Vous n'avez pas besoin de vérifier manuellement la magnitude de chaque nombre avant le formatage.

Formatage des nombres décimaux avec séparateurs de milliers

L'API Intl.NumberFormat gère à la fois les parties entières et fractionnaires des nombres. Les séparateurs de milliers apparaissent dans la partie entière, tandis que le point décimal et les chiffres fractionnaires suivent les conventions de la locale.

const usFormatter = new Intl.NumberFormat('en-US');
console.log(usFormatter.format(1234567.89));
// Résultat : "1,234,567.89"

const deFormatter = new Intl.NumberFormat('de-DE');
console.log(deFormatter.format(1234567.89));
// Résultat : "1.234.567,89"

Notez que le formatage allemand inverse les deux conventions. Les points servent de séparateurs de milliers dans la partie entière, tandis qu'une virgule sert de séparateur décimal pour la partie fractionnaire. L'API Intl gère correctement ces deux aspects en fonction de la locale.

Travailler avec de très grands nombres

Les séparateurs de milliers deviennent de plus en plus importants à mesure que les nombres grandissent. Sans séparateurs, les nombres à sept, huit ou neuf chiffres sont presque impossibles à lire avec précision d'un coup d'œil.

const formatter = new Intl.NumberFormat('en-US');

console.log(formatter.format(1234567890));
// Résultat : "1,234,567,890"

console.log(formatter.format(9876543210));
// Résultat : "9,876,543,210"

Le formateur insère des séparateurs à chaque intervalle de trois chiffres, rendant même les nombres à l'échelle du milliard lisibles. Ce regroupement automatique fonctionne pour des nombres de n'importe quelle magnitude sans nécessiter de calculer manuellement les positions des séparateurs.

Réutilisation des formateurs pour la performance

La création d'une nouvelle instance Intl.NumberFormat implique le chargement des données de locale et le traitement des options. Lorsque vous devez formater plusieurs nombres avec les mêmes paramètres régionaux et réglages, créez le formateur une seule fois et réutilisez-le.

const formatter = new Intl.NumberFormat('en-US');

const numbers = [1234, 5678, 91011, 121314];

numbers.forEach(number => {
  console.log(formatter.format(number));
});
// Output:
// "1,234"
// "5,678"
// "91,011"
// "121,314"

Cette approche est plus efficace que de créer un nouveau formateur pour chaque nombre. La différence de performance devient significative lors du formatage de tableaux contenant des centaines ou des milliers de valeurs.

Formatage des nombres dans les templates

Vous pouvez utiliser Intl.NumberFormat partout où vous affichez des nombres aux utilisateurs. Cela inclut l'insertion de nombres formatés dans des templates HTML, l'affichage de valeurs dans des tableaux ou la présentation de statistiques dans des tableaux de bord.

const formatter = new Intl.NumberFormat(navigator.language);

const totalUsers = 1234567;
const activeUsers = 891234;

document.getElementById('total-users').textContent = formatter.format(totalUsers);
document.getElementById('active-users').textContent = formatter.format(activeUsers);

Les chaînes formatées fonctionnent comme n'importe quelle autre valeur de chaîne. Vous pouvez les insérer dans du contenu textuel, des attributs ou tout autre contexte où vous affichez des informations aux utilisateurs.