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

Introduction

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

Différents contextes nécessitent différents formatages. Les rapports financiers affichent généralement des séparateurs de groupement pour rendre les grands nombres plus faciles à lire. Les affichages techniques comme les numéros de série, les codes produits et les numéros d'identification les omettent généralement pour éviter toute confusion. L'option useGrouping dans Intl.NumberFormat contrôle si ces séparateurs apparaissent 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 à 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 ou autre caractère de groupement, quelle que soit la taille du nombre. Le séparateur décimal reste car useGrouping n'affecte que 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 pas de séparateurs internes.

Activer les séparateurs de groupement avec useGrouping true

Définissez useGrouping à true pour inclure les séparateurs de groupement. C'est le comportement par défaut, donc vous n'avez besoin de le spécifier explicitement que lorsque vous voulez être clair sur 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 rend les grands nombres plus faciles à scanner visuellement.

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 regroupement varie selon les locales

Différentes locales utilisent différents caractères pour le regroupement et suivent différents modèles de regroupement. L'option useGrouping contrôle si le regroupement a lieu, 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. Les trois sont des séparateurs de regroupement, mais ils apparaissent différemment car ils suivent les conventions de leur locale respective.

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

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

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

Lorsque vous désactivez le regroupement avec useGrouping: false, ces différences spécifiques à la locale 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 regroupement

L'option useGrouping accepte des valeurs de chaîne qui offrent un contrôle plus fin sur l'apparition des séparateurs de regroupement. 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 regroupement.

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

La valeur "auto" suit les préférences de la locale pour le regroupement. La plupart des locales préfèrent afficher les séparateurs de regroupement, 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" n'affiche les séparateurs de regroupement que 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 regroupement 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 de locale, 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 produits ne doivent pas avoir de séparateurs de groupement.

const serialNumber = 1234567890;

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

Cela évite la 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 taper 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 devraient généralement désactiver le groupement pour montrer 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 formulaire pour les valeurs numériques désactivent souvent le groupement pendant l'édition pour éviter toute confusion quant à savoir si l'utilisateur doit taper les séparateurs. L'affichage formaté peut montrer le groupement après 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 à parcourir 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 entre $1,234,567 et $123,456 d'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 comme 384 400 que comme 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 groupes.

Utilisez min2 pour un affichage plus propre des nombres à quatre chiffres

La valeur "min2" offre un aspect plus épuré pour les nombres qui pourraient 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 lorsqu'il s'agit d'une année. Le paramètre "min2" fournit automatiquement ce comportement.

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 avoir à 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 devient "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() montre 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 montrent 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 les comportements de regroupement inattendus en révélant le paramètre réel utilisé par le formateur.