Comment formater les nombres en 1K, 1M, 1Md

Utilisez la notation compacte pour afficher les grands nombres dans un format lisible et économe en espace

Introduction

Les grands nombres occupent un espace significatif et sont difficiles à parcourir rapidement. Un nombre comme 1 500 000 nécessite sept chiffres plus le formatage, tandis que 1,5M transmet la même magnitude en trois caractères. Cette représentation compacte est courante dans les compteurs de followers sur les réseaux sociaux, les compteurs de vues de vidéos, les métriques de tableaux de bord et les tailles de fichiers.

JavaScript offre une prise en charge intégrée pour le formatage compact des nombres via l'API Intl.NumberFormat. Cette API gère la conversion automatiquement et adapte le formatage aux différentes langues et régions, garantissant que vos nombres s'affichent correctement pour tous les utilisateurs.

Pourquoi les grands nombres nécessitent un formatage compact

Lorsque vous affichez de grands nombres dans les interfaces utilisateur, deux problèmes émergent. Premièrement, les nombres consomment de l'espace horizontal. Un compteur affichant 1 234 567 vues nécessite plus d'espace qu'un compteur affichant 1,2M vues. Deuxièmement, les utilisateurs traitent les nombres compacts plus rapidement. Le cerveau humain reconnaît 1,5M comme un million et demi plus rapidement qu'en analysant 1 500 000.

La notation compacte résout ces deux problèmes en remplaçant les zéros finaux par des indicateurs de magnitude. Au lieu d'afficher tous les chiffres, elle montre uniquement les chiffres significatifs suivis d'une lettre qui représente la magnitude. Cette approche équilibre précision et lisibilité.

Différents contextes nécessitent différents niveaux de précision. Un compteur de followers sur les réseaux sociaux nécessite rarement des nombres exacts. Afficher 1,2M de followers au lieu de 1 234 567 fournit une information suffisante. Un tableau de bord financier pourrait nécessiter plus de précision, affichant 1,23M au lieu de 1,2M. L'API Intl vous permet de contrôler cette précision tout en maintenant un formatage compact.

Utilisation de la notation compacte en JavaScript

L'option notation dans Intl.NumberFormat contrôle la façon dont les nombres sont représentés. La définir sur "compact" active le formatage compact.

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

console.log(formatter.format(1500));
// Résultat : "1.5K"

console.log(formatter.format(1500000));
// Résultat : "1.5M"

console.log(formatter.format(1500000000));
// Résultat : "1.5B"

Le formateur choisit automatiquement l'indicateur de magnitude approprié en fonction de la taille du nombre. Les milliers deviennent K, les millions deviennent M, et les milliards deviennent B. Le formateur réduit également le nombre à un chiffre lisible, affichant 1,5K au lieu de 1,5 mille.

Vous n'avez pas besoin d'écrire une logique pour déterminer quand utiliser K, M ou B. L'API Intl gère cette décision en fonction de la magnitude du nombre.

Comment la notation compacte formate différentes magnitudes

La notation compacte applique différents formatages à différentes échelles. Comprendre ces seuils vous aide à prédire comment vos nombres seront affichés.

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

console.log(formatter.format(500));
// Output: "500"

console.log(formatter.format(1000));
// Output: "1K"

console.log(formatter.format(1500));
// Output: "1.5K"

console.log(formatter.format(999000));
// Output: "999K"

console.log(formatter.format(1000000));
// Output: "1M"

console.log(formatter.format(1500000));
// Output: "1.5M"

console.log(formatter.format(1000000000));
// Output: "1B"

console.log(formatter.format(1000000000000));
// Output: "1T"

Les nombres inférieurs à mille s'affichent sans compactage. Une fois qu'un nombre atteint mille, il passe à la notation K. Le même modèle se poursuit pour les millions, les milliards et les billions.

Le formateur arrondit les nombres pour s'adapter à la représentation compacte. Un nombre comme 1 234 567 devient 1,2M par défaut. La prochaine leçon couvrira comment contrôler le nombre de décimales affichées dans la notation compacte.

Choisir entre l'affichage court et long

La notation compacte offre deux styles d'affichage. Le style court utilise des lettres comme K, M et B. Le style long épelle la magnitude comme un mot.

const shortFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "short"
});

console.log(shortFormatter.format(1500));
// Output: "1.5K"

console.log(shortFormatter.format(1500000));
// Output: "1.5M"

const longFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(longFormatter.format(1500));
// Output: "1.5 thousand"

console.log(longFormatter.format(1500000));
// Output: "1.5 million"

L'option compactDisplay contrôle ce comportement. Elle accepte deux valeurs : "short" et "long". Si vous omettez cette option, elle prend par défaut la valeur "short".

L'affichage court fonctionne bien lorsque l'espace est limité. Les cartes de tableau de bord, les interfaces mobiles et les tableaux de données bénéficient de la brièveté de K, M et B. L'affichage long fonctionne mieux lorsque la clarté est plus importante que l'espace. Le contenu éducatif, les rapports financiers et les interfaces axées sur l'accessibilité bénéficient de l'épellation complète de la magnitude.

Comment fonctionne la notation compacte dans différentes langues

La notation compacte s'adapte à la langue et à la région spécifiées dans les paramètres régionaux. Différentes langues utilisent différentes lettres, mots et conventions de formatage pour les indicateurs de magnitude.

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

console.log(enFormatter.format(1500000));
// Output: "1.5M"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 M"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(15000000));
// Output: "1500万"

Le français utilise M avec un espace avant. L'allemand utilise Mio. comme abréviation pour Million. Le japonais utilise un système numérique complètement différent avec 万 représentant dix mille.

Ces différences se produisent automatiquement en fonction des paramètres régionaux. Vous n'avez pas besoin d'écrire du code spécifique à chaque langue pour gérer les différents indicateurs de magnitude. Transmettez la préférence linguistique de l'utilisateur au formateur, et il produit la sortie correcte pour cette langue.

L'affichage long s'adapte également à chaque langue.

const enFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(enFormatter.format(1500000));
// Output: "1.5 million"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 million"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"

L'allemand utilise Millionen pour la forme plurielle de million. Le français utilise million sans s. L'API Intl gère ces variations linguistiques pour vous.

Quand les petits nombres ne sont pas compactés

Les nombres inférieurs au seuil de compactage s'affichent normalement. Ce seuil varie selon les paramètres régionaux, mais commence généralement à mille dans la plupart des langues occidentales.

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

console.log(formatter.format(10));
// Output: "10"

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(999));
// Output: "999"

console.log(formatter.format(1000));
// Output: "1K"

Ce comportement évite un formatage maladroit pour les petits nombres. Afficher 500 comme 500 est plus clair que de l'afficher comme 0,5K. Le formateur n'applique la notation compacte que lorsqu'elle améliore la lisibilité.

Le seuil n'est pas toujours mille. Certaines langues, comme le japonais, utilisent des systèmes de regroupement de nombres différents. Le japonais regroupe par dix mille, donc la notation compacte peut commencer à un seuil différent.

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(9999));
// Output: "9999"

console.log(jaFormatter.format(10000));
// Output: "1万"

L'API Intl gère automatiquement ces seuils spécifiques à chaque langue.

Combinaison de la notation compacte avec d'autres options de formatage

La notation compacte fonctionne avec d'autres options de formatage des nombres. Vous pouvez contrôler les décimales, les séparateurs de groupement et l'arrondi tout en utilisant la notation compacte.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 1
});

console.log(formatter.format(1234567));
// Résultat: "1.2M"

const preciseFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 2
});

console.log(preciseFormatter.format(1234567));
// Résultat: "1.23M"

const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 0
});

console.log(noDecimalsFormatter.format(1234567));
// Résultat: "1M"

L'option maximumFractionDigits contrôle le nombre de décimales qui apparaissent après le nombre entier. La définir à 0 supprime toutes les décimales, rendant le nombre encore plus compact.

Vous pouvez également combiner la notation compacte avec des options de chiffres minimaux pour assurer un formatage cohérent sur une plage de nombres.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(1000));
// Résultat: "1.0K"

console.log(formatter.format(1500));
// Résultat: "1.5K"

console.log(formatter.format(2000));
// Résultat: "2.0K"

Cette approche garantit que tous les nombres affichent une décimale, ce qui aide à maintenir une cohérence visuelle dans les tableaux et les graphiques.

Quand utiliser la notation compacte

La notation compacte fonctionne mieux lorsque l'espace est limité ou lorsque la précision exacte n'est pas critique. Les compteurs de médias sociaux, les métriques de tableau de bord et les statistiques sommaires sont des cas d'utilisation idéaux. Les utilisateurs n'ont pas besoin de savoir qu'une vidéo a exactement 1 234 567 vues. Savoir qu'elle a 1,2M de vues fournit une information suffisante.

N'utilisez pas la notation compacte lorsque les nombres exacts sont importants. Les transactions financières, les mesures scientifiques et les documents juridiques nécessitent une précision complète. Un solde bancaire devrait afficher 1 234,56 €, pas 1,2K €. Une facture devrait afficher 1 500,00 €, pas 1,5K €.

Prenez en compte votre audience et le contexte. Les analystes de données pourraient préférer voir les nombres complets pour comprendre les valeurs exactes. Les consommateurs généraux préfèrent souvent les nombres compacts car ils les traitent plus rapidement. Certaines interfaces offrent les deux options, affichant les nombres compacts par défaut avec un moyen de révéler les nombres exacts à la demande.

La notation compacte fonctionne également bien pour les tailles de fichiers, bien que l'implémentation diffère légèrement. Les tailles de fichiers utilisent généralement des puissances de 1024 plutôt que 1000, résultant en kibibytes et mébibytes plutôt que kilobytes et mégabytes. L'API Intl ne gère pas les unités binaires, donc le formatage des tailles de fichiers nécessite une logique personnalisée ou une bibliothèque dédiée.