Comment choisir entre 1K et 1 millier en format compact

Introduction

Lorsque vous formatez de grands nombres avec une notation compacte, le nombre 1500 devient 1,5K par défaut. Ce format abrégé fonctionne bien dans les interfaces à espace limité comme les écrans mobiles et les cartes de tableau de bord. Cependant, certains contextes bénéficient d'une écriture complète de l'ordre de grandeur. Le même nombre peut s'afficher comme 1,5 mille au lieu de 1,5K, échangeant la brièveté contre la clarté.

L'API Intl.NumberFormat de JavaScript fournit l'option compactDisplay pour contrôler ce choix. Vous pouvez sélectionner entre un affichage court, qui utilise des abréviations comme K, M et B, ou un affichage long, qui écrit l'ordre de grandeur comme mille, million et milliard. Cette option vous donne un contrôle précis sur la façon dont les nombres compacts apparaissent aux utilisateurs.

Ce que contrôle l'option compactDisplay

L'option compactDisplay ne fonctionne que lorsque vous définissez notation sur "compact". Elle accepte deux valeurs : "short" et "long". La valeur short produit une sortie abrégée comme 1,5K, tandis que la valeur long produit une sortie écrite comme 1,5 mille.

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

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

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

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

L'option compactDisplay est définie par défaut sur "short" si vous l'omettez. Cela signifie que la notation compacte utilise des abréviations, sauf si vous demandez explicitement un affichage long.

Formater les nombres avec un affichage compact court

L'affichage compact court utilise des abréviations d'une seule lettre pour représenter l'ordre de grandeur. Ce format minimise l'espace horizontal tout en maintenant la lisibilité.

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

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

console.log(formatter.format(2400000));
// Sortie : "2.4M"

console.log(formatter.format(7800000000));
// Sortie : "7.8B"

console.log(formatter.format(5600000000000));
// Sortie : "5.6T"

Le formateur sélectionne automatiquement l'abréviation appropriée en fonction de l'ordre de grandeur du nombre. Les milliers utilisent K, les millions utilisent M, les milliards utilisent B et les billions utilisent T.

L'affichage court fonctionne bien lorsque vous devez intégrer des nombres dans des espaces restreints. Les interfaces mobiles, les tableaux de données, les étiquettes de graphiques et les cartes de tableau de bord bénéficient de la largeur compacte des nombres abrégés.

Formater les nombres avec l'affichage compact long

L'affichage compact long écrit le mot de magnitude en entier au lieu de l'abréger. Ce format offre plus de clarté au prix d'un espace horizontal supplémentaire.

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

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

console.log(formatter.format(2400000));
// Output: "2.4 million"

console.log(formatter.format(7800000000));
// Output: "7.8 billion"

console.log(formatter.format(5600000000000));
// Output: "5.6 trillion"

Le formateur utilise le mot de magnitude complet, rendant l'échelle du nombre immédiatement évidente sans exiger des utilisateurs qu'ils interprètent des abréviations. Les utilisateurs qui ne sont pas familiers avec la notation K, M, B trouveront mille, million, milliard plus accessibles.

L'affichage long fonctionne bien dans les contextes où la clarté importe plus que l'espace. Le contenu éducatif, les rapports financiers, les interfaces axées sur l'accessibilité et la documentation formelle bénéficient des magnitudes écrites en toutes lettres.

Comparer l'affichage compact court et long

La différence entre l'affichage court et long devient claire lorsque vous formatez les mêmes nombres avec les deux options.

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

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

const numbers = [1500, 45000, 2400000, 950000000];

numbers.forEach(num => {
  console.log(`${num}:`);
  console.log(`  Short: ${shortFormatter.format(num)}`);
  console.log(`  Long:  ${longFormatter.format(num)}`);
});

// Output:
// 1500:
//   Short: 1.5K
//   Long:  1.5 thousand
// 45000:
//   Short: 45K
//   Long:  45 thousand
// 2400000:
//   Short: 2.4M
//   Long:  2.4 million
// 950000000:
//   Short: 950M
//   Long:  950 million

L'affichage court utilise systématiquement moins de caractères. L'abréviation K prend un caractère, tandis que mille en prend quatre, espace compris. Cette différence se multiplie lors de l'affichage de nombreux nombres dans des tableaux ou des listes.

L'affichage long fournit plus de contexte pour chaque nombre. Les utilisateurs peuvent lire 2,4 millions sans avoir besoin de décoder ce que M représente. Cette explicité aide les utilisateurs moins familiers avec les formats de nombres abrégés.

Comment l'affichage compact varie selon les langues

L'affichage compact court et long s'adapte à la locale que vous spécifiez. Les différentes langues utilisent différentes abréviations et mots de magnitude.

const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    notation: "compact",
    compactDisplay: "short"
  });

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

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(2400000)}`);
  console.log(`  Long:  ${longFormatter.format(2400000)}`);
});

// Output:
// en-US:
//   Short: 2.4M
//   Long:  2.4 million
// fr-FR:
//   Short: 2,4 M
//   Long:  2,4 millions
// de-DE:
//   Short: 2,4 Mio.
//   Long:  2,4 Millionen
// es-ES:
//   Short: 2,4 M
//   Long:  2,4 millones

Le français ajoute un s pour rendre millions pluriel. L'allemand utilise Mio. comme forme courte et Millionen comme forme longue. L'espagnol utilise millones pour le pluriel. Chaque langue applique ses propres règles grammaticales aux formats courts et longs.

Le formateur gère ces variations automatiquement en fonction de la locale. Vous n'avez pas besoin de maintenir une logique de formatage séparée pour chaque langue.

Les langues asiatiques utilisent souvent des systèmes de regroupement de nombres complètement différents.

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

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

const zhFormatter = new Intl.NumberFormat("zh-CN", {
  notation: "compact",
  compactDisplay: "short"
});

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

Le japonais et le chinois regroupent par dix mille plutôt que par mille. Le caractère 万 représente dix mille, donc 15 000 000 devient 1500万 plutôt que 15M. L'API Intl gère automatiquement ces différences fondamentales dans les systèmes numériques.

Quand utiliser l'affichage compact court

L'affichage compact court fonctionne mieux dans les contextes où l'espace est limité et où chaque caractère compte. Les interfaces mobiles disposent d'un espace horizontal limité, ce qui rend les nombres abrégés essentiels pour adapter le contenu à l'écran.

Les tableaux de données affichant plusieurs nombres bénéficient d'une largeur uniforme. L'utilisation de 1,5K, 2,4M et 7,8B permet de garder les colonnes alignées et d'éviter les retours à la ligne. Le format d'abréviation cohérent aide les utilisateurs à parcourir rapidement les colonnes de chiffres.

Les cartes de tableau de bord et les panneaux de métriques utilisent un affichage court pour maximiser la densité d'information. Un tableau de bord montrant le nombre d'abonnés, le nombre de vues et les métriques d'engagement sur plusieurs plateformes nécessite un formatage compact pour afficher toutes les métriques simultanément à l'écran.

Les axes et étiquettes des graphiques nécessitent un texte minimal pour éviter les chevauchements ou l'encombrement. L'utilisation de 1,5M au lieu de 1,5 million permet de garder les étiquettes d'axes lisibles sans les faire pivoter ou les tronquer.

Les cartes interactives et les visualisations de données bénéficient d'un affichage court lors de l'affichage de nombres en superposition ou dans des infobulles. Le format abrégé empêche le texte de masquer le contenu sous-jacent.

Quand utiliser l'affichage compact long

L'affichage compact long fonctionne mieux lorsque la clarté et l'accessibilité sont plus importantes que l'efficacité spatiale. Le contenu éducatif enseignant aux utilisateurs les grands nombres bénéficie de l'écriture complète des magnitudes. Les étudiants qui apprennent les statistiques démographiques ou les chiffres économiques ont besoin de mots de magnitude explicites pour comprendre l'échelle.

Les rapports financiers et les documents formels utilisent l'affichage long pour éviter toute ambiguïté. Un rapport d'entreprise indiquant 2,4 millions de revenus est plus clair que 2,4M, en particulier pour les lecteurs qui pourraient ne pas être familiers avec les conventions d'abréviation.

Les interfaces axées sur l'accessibilité bénéficient de l'affichage long car les lecteurs d'écran prononcent les mots écrits de manière plus naturelle. Un lecteur d'écran annonçant 1,5 mille sonne plus naturel que 1,5K, qui pourrait être lu comme un virgule cinq kay ou un virgule cinq K.

Les mises en page imprimées disposent de plus d'espace horizontal que les interfaces numériques, ce qui rend l'affichage long pratique. Les rapports imprimés, les infographies et les présentations peuvent accueillir les caractères supplémentaires sans causer de problèmes de mise en page.

Les contextes où les utilisateurs pourraient ne pas être familiers avec les abréviations nécessitent un affichage long. Les audiences internationales, les utilisateurs non techniques ou les utilisateurs ayant une littératie numérique plus faible trouvent mille, million et milliard plus reconnaissables que K, M et B.

Combiner l'affichage compact avec d'autres options de formatage

L'option compactDisplay fonctionne avec toutes les autres options de formatage de nombres. Vous pouvez contrôler les décimales, le regroupement et d'autres formatages tout en choisissant entre un affichage court et long.

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

console.log(formatter.format(1234567));
// Output: "1.23 million"

console.log(formatter.format(9876543));
// Output: "9.88 million"

L'option maximumFractionDigits contrôle la précision décimale tandis que compactDisplay contrôle le format de magnitude. Ces options fonctionnent ensemble pour produire le format exact dont vous avez besoin.

Vous pouvez combiner l'affichage compact avec le formatage de devise pour afficher des montants monétaires avec des magnitudes écrites en toutes lettres.

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

console.log(formatter.format(2400000));
// Output: "$2.4 million"

console.log(formatter.format(750000));
// Output: "$750 thousand"

Ce format fonctionne bien pour afficher de grandes valeurs monétaires dans des rapports financiers ou des résumés budgétaires où le symbole de devise et la magnitude écrite en toutes lettres apportent de la clarté.

L'affichage compact fonctionne également avec l'affichage des signes pour montrer les changements ou les deltas.

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

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

console.log(formatter.format(-850000));
// Output: "-850 thousand"

La combinaison de signes explicites et de magnitudes écrites en toutes lettres rend les changements immédiatement clairs pour les utilisateurs.

Ce qu'il faut retenir

L'option compactDisplay contrôle si la notation compacte utilise des abréviations ou des mots écrits en toutes lettres. Définissez-la sur "short" pour une sortie abrégée comme 1,5K, ou "long" pour une sortie écrite en toutes lettres comme 1,5 mille. L'option est définie par défaut sur "short" si elle est omise.

Utilisez l'affichage court lorsque l'espace est limité ou lors de l'affichage de nombreux nombres qui nécessitent une largeur constante. Utilisez l'affichage long lorsque la clarté et l'accessibilité sont plus importantes que l'efficacité spatiale. Le formateur gère automatiquement les variations spécifiques à la locale pour les formats courts et longs.

Combinez compactDisplay avec d'autres options de formatage comme les décimales, la devise et l'affichage des signes pour créer le format de nombre exact dont votre application a besoin.