Comment contrôler l'affichage des séparateurs de milliers ?

Introduction

Lorsque vous formatez le nombre 123456, vous pouvez voir "123,456" avec une virgule séparant les milliers, ou "123456" sans aucun séparateur. Le caractère qui sépare les groupes de chiffres est appelé séparateur de groupement, communément appelé séparateur de milliers dans les régions anglophones.

Différents contextes nécessitent différents formats. Les rapports financiers affichent généralement des séparateurs de groupement pour faciliter la lecture des grands nombres. Les affichages techniques comme les numéros de série, les codes produit et les numéros d'identification omettent généralement ces séparateurs pour éviter toute confusion. L'option useGrouping dans Intl.NumberFormat contrôle l'apparition de ces séparateurs dans la sortie formatée.

Ce guide explique comment activer et désactiver les séparateurs de groupement, comment ils varient selon les locales et quand utiliser chaque paramètre dans vos applications.

Désactiver les séparateurs de groupement avec useGrouping false

Définissez useGrouping sur false pour supprimer tous les séparateurs de groupement des nombres formatés.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: false
});

formatter.format(123456);
// "123456"

formatter.format(1234567.89);
// "1234567.89"

La sortie formatée ne contient aucune virgule ni autre caractère de groupement, quelle que soit la taille du nombre. Le séparateur décimal reste présent car useGrouping affecte uniquement le groupement des chiffres, pas le formatage décimal.

Cela s'applique à tous les styles de nombres, y compris les devises et les unités.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: false
}).format(1234567.89);
// "$1234567.89"

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: false
}).format(50000);
// "50000 km"

Le symbole de devise et l'étiquette d'unité apparaissent normalement, mais les chiffres n'ont aucun séparateur interne.

Activer les séparateurs de groupement avec useGrouping true

Définissez useGrouping sur true pour inclure les séparateurs de groupement. Il s'agit du comportement par défaut, vous n'avez donc besoin de le spécifier explicitement que lorsque vous souhaitez clarifier votre intention ou lorsque vous remplacez une configuration.

const formatter = new Intl.NumberFormat('en-US', {
  useGrouping: true
});

formatter.format(123456);
// "123,456"

formatter.format(1234567.89);
// "1,234,567.89"

Le formateur insère des virgules tous les trois chiffres, suivant les conventions anglaises. Cela facilite la lecture visuelle des grands nombres.

Puisque true est la valeur par défaut, ces deux formateurs sont équivalents.

new Intl.NumberFormat('en-US', { useGrouping: true });
new Intl.NumberFormat('en-US');

Les deux formateurs incluent des séparateurs de groupement dans leur sortie.

Comprendre comment le groupement varie selon les locales

Différentes locales utilisent différents caractères pour le groupement et suivent différents modèles de groupement. L'option useGrouping contrôle si le groupement se produit, tandis que la locale détermine quel caractère apparaît et où.

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(1234567);
// "1,234,567"

new Intl.NumberFormat('de-DE', {
  useGrouping: true
}).format(1234567);
// "1.234.567"

new Intl.NumberFormat('fr-FR', {
  useGrouping: true
}).format(1234567);
// "1 234 567"

L'anglais utilise des virgules, l'allemand utilise des points et le français utilise des espaces. Tous trois sont des séparateurs de groupement, mais ils ont un aspect différent car ils suivent les conventions de leur locale.

Certaines locales utilisent différents modèles de groupement. La numérotation indienne groupe les trois premiers chiffres, puis groupe tous les deux chiffres après cela.

new Intl.NumberFormat('en-IN', {
  useGrouping: true
}).format(1234567);
// "12,34,567"

Le séparateur de groupement apparaît après trois chiffres à partir de la droite, puis après tous les deux chiffres, produisant 12,34,567 au lieu de 1,234,567.

Lorsque vous désactivez le groupement avec useGrouping: false, ces différences spécifiques aux locales disparaissent car aucun séparateur n'apparaît du tout.

new Intl.NumberFormat('en-IN', {
  useGrouping: false
}).format(1234567);
// "1234567"

Utiliser des valeurs de chaîne pour un contrôle avancé du groupement

L'option useGrouping accepte des valeurs de chaîne qui fournissent un contrôle plus fin sur le moment où les séparateurs de groupement apparaissent. Ces valeurs font partie de la spécification Intl.NumberFormat V3 et sont prises en charge dans les navigateurs modernes.

La valeur "always" est équivalente à true et affiche toujours les séparateurs de groupement.

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(1234);
// "1,234"

La valeur "auto" suit les préférences de la locale pour le groupement. La plupart des locales préfèrent afficher les séparateurs de groupement, ce qui rend "auto" similaire à "always" en pratique. C'est la valeur par défaut lorsque notation n'est pas "compact".

new Intl.NumberFormat('en-US', {
  useGrouping: 'auto'
}).format(1234);
// "1,234"

La valeur "min2" affiche uniquement les séparateurs de groupement lorsqu'il y a au moins deux chiffres dans le premier groupe. Pour les nombres à quatre chiffres, cela signifie qu'aucun séparateur n'apparaît.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(1234);
// "1234"

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(12345);
// "12,345"

Le nombre 1234 n'a qu'un seul chiffre dans le premier groupe (le 1), donc aucun séparateur n'apparaît. Le nombre 12345 a deux chiffres dans le premier groupe (le 12), donc le séparateur apparaît.

Ce comportement correspond à la façon dont certaines locales formatent naturellement les nombres. L'espagnol, par exemple, omet généralement les séparateurs de groupement pour les nombres à quatre chiffres.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(1234);
// "1234"

new Intl.NumberFormat('es-ES', {
  useGrouping: 'auto'
}).format(12345);
// "12.345"

La valeur "auto" respecte ces préférences locales, tandis que "always" les remplace.

new Intl.NumberFormat('es-ES', {
  useGrouping: 'always'
}).format(1234);
// "1.234"

Choisir quand désactiver les séparateurs de groupement

Désactivez les séparateurs de groupement dans les contextes où le nombre représente un code, un identifiant ou une valeur technique plutôt qu'une quantité.

Les numéros de série et les codes produit ne doivent pas avoir de séparateurs de groupement.

const serialNumber = 1234567890;

new Intl.NumberFormat('en-US', {
  useGrouping: false
}).format(serialNumber);
// "1234567890"

Cela évite toute confusion quant à savoir si le séparateur fait partie de la valeur réelle. Un utilisateur voyant 1,234,567,890 pourrait se demander si les virgules sont significatives ou s'il doit les saisir lors de la saisie du nombre ailleurs.

Les codes postaux, les numéros de téléphone (lorsqu'ils sont formatés comme des nombres simples) et autres identifiants à format fixe bénéficient de la désactivation du groupement.

const zipCode = 90210;

new Intl.NumberFormat('en-US', {
  useGrouping: false,
  minimumIntegerDigits: 5
}).format(zipCode);
// "90210"

Les affichages techniques montrant des valeurs brutes pour le débogage ou la journalisation doivent généralement désactiver le groupement pour afficher la représentation numérique exacte.

console.log(`Processing ${
  new Intl.NumberFormat('en-US', {
    useGrouping: false
  }).format(bytesProcessed)
} bytes`);
// "Processing 1234567 bytes"

Les champs de saisie de formulaire pour les valeurs numériques désactivent souvent le groupement pendant l'édition pour éviter toute confusion quant à savoir si l'utilisateur doit saisir les séparateurs. L'affichage formaté peut montrer le groupement une fois que l'utilisateur a fini de saisir la valeur.

Choisir quand activer les séparateurs de groupement

Activez les séparateurs de groupement pour les nombres qui représentent des quantités, des mesures ou des montants que les utilisateurs doivent lire et comprendre rapidement.

Les montants financiers sont plus faciles à lire avec des séparateurs de groupement.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: true
}).format(1234567.89);
// "$1,234,567.89"

Les séparateurs aident les utilisateurs à distinguer rapidement $1,234,567 de $123,456 en un coup d'œil.

Les données statistiques, les tableaux de bord analytiques et les rapports affichant des décomptes bénéficient du groupement.

const pageViews = 5432198;

new Intl.NumberFormat('en-US', {
  useGrouping: true
}).format(pageViews);
// "5,432,198 views"

Les grandes mesures deviennent plus lisibles avec le groupement.

new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  useGrouping: true
}).format(384400);
// "384,400 km"

Cette distance (la distance approximative jusqu'à la lune) est plus facile à lire sous la forme 384,400 que sous la forme 384400.

Tout contexte où l'utilisateur doit comprendre l'ordre de grandeur d'un nombre bénéficie des séparateurs de groupement. Les séparateurs créent des repères visuels qui aident le cerveau à traiter les chiffres par blocs.

Utiliser min2 pour un affichage plus épuré des nombres à quatre chiffres

La valeur "min2" offre un aspect plus épuré pour les nombres qui peuvent comporter quatre ou cinq chiffres. Les années, par exemple, sont généralement plus lisibles sans séparateurs.

new Intl.NumberFormat('en-US', {
  useGrouping: 'min2'
}).format(2025);
// "2025"

new Intl.NumberFormat('en-US', {
  useGrouping: 'always'
}).format(2025);
// "2,025"

La plupart des lecteurs trouvent 2025 plus naturel que 2,025 pour désigner une année. Le paramètre "min2" fournit ce comportement automatiquement.

Les prix dans certaines fourchettes bénéficient également de cette approche.

const price = 1299;

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(price);
// "$1299.00"

Certains détaillants préfèrent afficher des prix comme $1299 sans virgule pour les faire paraître psychologiquement moins chers. Une fois que les prix dépassent quatre chiffres, le séparateur apparaît.

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  useGrouping: 'min2'
}).format(12999);
// "$12,999.00"

Cela vous donne un comportement cohérent sur toute votre gamme de prix sans vérifier manuellement l'ordre de grandeur du nombre.

Comprendre comment la notation compacte affecte le regroupement

Lors de l'utilisation de la notation compacte, le comportement par défaut de useGrouping change pour "min2" plutôt que "auto". Cela évite les séparateurs inutiles dans les formats compacts.

new Intl.NumberFormat('en-US', {
  notation: 'compact'
}).format(1234);
// "1.2K"

new Intl.NumberFormat('en-US', {
  notation: 'compact',
  useGrouping: 'always'
}).format(1234);
// "1.2K"

La notation compacte abrège déjà le nombre, donc les séparateurs de regroupement internes seraient redondants. Le formateur gère cela automatiquement, mais vous pouvez le remplacer si nécessaire.

Vérifier quel paramètre de regroupement est actif

La méthode resolvedOptions() indique quelle valeur useGrouping le formateur utilise réellement.

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

formatter.resolvedOptions().useGrouping;
// "auto"

Même si le formateur a été créé sans définir explicitement useGrouping, les options résolues affichent la valeur par défaut de "auto".

const compactFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact'
});

compactFormatter.resolvedOptions().useGrouping;
// "min2"

Le formateur de notation compacte utilise par défaut "min2" au lieu de "auto", comme indiqué dans les options résolues.

Cette méthode aide à déboguer un comportement de regroupement inattendu en révélant le paramètre réel utilisé par le formateur.