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

Utilisez la notation compacte pour afficher les grands nombres dans un format lisible et peu encombrant

Introduction

Les grands nombres occupent beaucoup d'espace et sont difficiles à lire 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 d'abonnés 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 fournit une prise en charge native du 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 de place 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 que l'analyse de 1 500 000.

La notation compacte résout ces deux problèmes en remplaçant les zéros de fin par des indicateurs de magnitude. Au lieu d'afficher tous les chiffres, elle affiche 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 d'abonnés sur les réseaux sociaux nécessite rarement des nombres exacts. Afficher 1,2M d'abonnés au lieu de 1 234 567 fournit des informations suffisantes. Un tableau de bord financier peut 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 représentation des nombres. La définir sur "compact" active le formatage compact.

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

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

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

console.log(formatter.format(1500000000));
// Output: "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 en un chiffre lisible, affichant 1,5 K au lieu de 1,5 millier.

Vous n'avez pas besoin d'écrire de 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évoir comment vos nombres s'afficheront.

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 schéma 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,2 M par défaut. La prochaine leçon couvrira comment contrôler le nombre de décimales affichées en 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 sous forme de 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é importe plus que l'espace. Le contenu éducatif, les rapports financiers et les interfaces axées sur l'accessibilité bénéficient de l'épellation de la magnitude.

Fonctionnement de 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 de 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 de code spécifique aux paramètres régionaux pour gérer 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 en dessous du 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 ces seuils spécifiques aux paramètres régionaux automatiquement.

Combiner 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 regroupement 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));
// Output: "1.2M"

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

console.log(preciseFormatter.format(1234567));
// Output: "1.23M"

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

console.log(noDecimalsFormatter.format(1234567));
// Output: "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 les options de chiffres minimaux pour garantir 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));
// Output: "1.0K"

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

console.log(formatter.format(2000));
// Output: "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 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 réseaux sociaux, les métriques de tableaux de bord et les statistiques récapitulatives sont des cas d'usage 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,2 M 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 doit afficher 1 234,56 $, et non 1,2 K $. Une facture doit afficher 1 500,00 $, et non 1,5 K $.

Considérez votre audience et le contexte. Les analystes de données peuvent préférer voir les nombres complets pour comprendre les valeurs exactes. Les consommateurs en général 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 sur 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, ce qui donne des kibioctets et mébioctets plutôt que des kilooctets et mégaoctets. 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.