Comment choisir entre 1 k et 1 millier en format compact

Introduction

Lorsque vous formatez de grands nombres avec la notation compacte, le nombre 1500 devient 1,5 k 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 de l'écriture en toutes lettres de la magnitude. Le même nombre peut s'afficher comme 1,5 millier au lieu de 1,5 k, échangeant la brièveté contre la clarté.

Le Intl.NumberFormat de JavaScript fournit l'option compactDisplay pour contrôler ce choix. Vous pouvez sélectionner entre l'affichage court, qui utilise des abréviations comme k, M et Md, ou l'affichage long, qui écrit la magnitude en toutes lettres comme millier, 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,5 k, tandis que la valeur long produit une sortie écrite en toutes lettres comme 1,5 millier.

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

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

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

console.log(longFormatter.format(1500));
// Output: "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 l'affichage long.

Formater les nombres avec l'affichage compact court

L'affichage compact court utilise des abréviations d'une seule lettre pour représenter la magnitude. 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));
// Output: "1.5K"

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

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

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

Le formateur sélectionne automatiquement l'abréviation appropriée en fonction de la magnitude du nombre. Les milliers utilisent k, les millions utilisent M, les milliards utilisent Md et les billions utilisent Bn.

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 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 obliger les utilisateurs à interpréter des abréviations. Les utilisateurs qui ne sont pas familiers avec la notation K, M, Md 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 de 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 prend cinq caractères. 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 qui sont 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. 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 mettre millions au 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 court et long.

Le formateur gère ces variations automatiquement en fonction de la locale. Vous n'avez pas besoin de maintenir une logique de formatage distincte 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 de nombres.

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 ont 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,8Md maintient les colonnes alignées et évite le retour à la ligne. Le format d'abréviation cohérent aide les utilisateurs à parcourir rapidement les colonnes de nombres.

Les cartes de tableau de bord et les panneaux de métriques utilisent l'affichage court pour maximiser la densité d'informations. Un tableau de bord affichant 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 de graphiques nécessitent un texte minimal pour éviter les chevauchements ou l'encombrement. L'utilisation de 1,5M au lieu de 1,5 million maintient les étiquettes d'axe lisibles sans avoir à les faire pivoter ou les tronquer.

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

Quand utiliser l'affichage compact long

L'affichage compact long fonctionne mieux lorsque la clarté et l'accessibilité comptent plus que l'efficacité de l'espace. Le contenu éducatif enseignant aux utilisateurs les grands nombres bénéficie de l'explicitation des ordres de grandeur. Les étudiants apprenant 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,4 M, en particulier pour les lecteurs qui ne sont peut-être pas 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 en toutes lettres de manière plus naturelle. Un lecteur d'écran annonçant 1,5 mille sonne plus naturel que 1,5 K, qui pourrait être lu comme un virgule cinq K 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 accommoder les caractères supplémentaires sans causer de problèmes de mise en page.

Les contextes où les utilisateurs peuvent 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 faible culture numérique trouvent mille, million et milliard plus reconnaissables que K, M et Md.

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

L'option compactDisplay fonctionne avec toutes les autres options de formatage des nombres. Vous pouvez contrôler les décimales, le regroupement et d'autres options de formatage tout en choisissant entre l'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 les rapports financiers ou les résumés budgétaires où à la fois le symbole de devise et la magnitude écrite en toutes lettres apportent de la clarté.

L'affichage compact fonctionne également avec l'affichage du signe 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 grandeurs é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,5 k, 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 nécessitant une largeur cohérente. Utilisez l'affichage long lorsque la clarté et l'accessibilité importent plus que l'efficacité de l'espace. Le formateur gère automatiquement les variations spécifiques aux paramètres régionaux pour les formats courts et longs.

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