Comment afficher les unités en forme courte ou longue

Introduction

Lorsque vous affichez des mesures dans une interface, l'unité occupe de l'espace à côté du nombre. La distance de 5 kilomètres peut apparaître comme "5 km", "5 kilomètres" ou "5km" selon l'espace disponible et le niveau de clarté nécessaire. Chaque format fait un compromis entre lisibilité et espace horizontal.

Différents contextes nécessitent différents choix de formatage. Un tableau de bord mobile affichant plusieurs métriques bénéficie d'unités compactes comme "km" ou "kg". Une application éducative enseignant les mesures aux étudiants nécessite des unités clairement écrites comme "kilomètres" ou "kilogrammes". Une visualisation dense en données utilise la forme la plus compacte possible pour afficher plus d'informations à l'écran.

La fonction Intl.NumberFormat de JavaScript fournit l'option unitDisplay pour contrôler ce choix. Vous pouvez sélectionner entre un affichage court avec des abréviations standard, un affichage long avec des mots complets, ou un affichage étroit avec la représentation la plus compacte possible. Cette option vous donne un contrôle précis sur la façon dont les unités apparaissent aux utilisateurs.

Ce que contrôle l'option unitDisplay

L'option unitDisplay fonctionne lorsque vous définissez style sur "unit" dans Intl.NumberFormat. Elle accepte trois valeurs : "short", "long" et "narrow". Chaque valeur produit un niveau différent de verbosité pour la partie unité du résultat formaté.

La valeur short produit des unités abrégées standard comme "5 km" ou "10 lb". La valeur long épelle le nom complet de l'unité comme "5 kilomètres" ou "10 livres". La valeur narrow produit la représentation la plus compacte comme "5km" ou "10lb", supprimant souvent les espaces entre le nombre et l'unité.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(shortFormatter.format(5));
// Résultat : "5 km"

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(longFormatter.format(5));
// Résultat : "5 kilometers"

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(narrowFormatter.format(5));
// Résultat : "5km"

L'option unitDisplay est définie par défaut sur "short" si vous l'omettez. Cela signifie que le formatage des unités utilise des abréviations standard, sauf si vous demandez explicitement un style d'affichage différent.

Formater les unités avec affichage court

L'affichage court utilise des abréviations standard que la plupart des gens reconnaissent. Ce format équilibre la lisibilité avec l'efficacité d'espace.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

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

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

Le formateur ajoute un espace entre le nombre et l'unité abrégée. Cette séparation améliore la lisibilité tout en gardant la sortie compacte.

Vous pouvez formater différents types d'unités avec l'affichage court.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "short"
});

const volumeFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "liter",
  unitDisplay: "short"
});

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

console.log(weightFormatter.format(25));
// Output: "25 kg"

console.log(volumeFormatter.format(3.5));
// Output: "3.5 L"

Chaque type d'unité utilise son abréviation standard. La distance utilise km, le poids utilise kg, et le volume utilise L. Ces abréviations sont largement reconnues et fonctionnent bien dans la plupart des contextes.

L'affichage court est le comportement par défaut. Si vous omettez l'option unitDisplay, le formateur utilise automatiquement l'affichage court.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer"
});

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

Cette valeur par défaut rend l'affichage court pratique lorsque vous souhaitez des unités abrégées standard sans spécifier explicitement l'option d'affichage.

Formater les unités avec affichage long

L'affichage long épelle le nom complet de l'unité. Ce format offre une clarté maximale au prix d'un espace horizontal supplémentaire.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

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

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

Le formateur gère automatiquement les formes singulières et plurielles. Une unité utilise le singulier "kilometer" tandis que plusieurs unités utilisent le pluriel "kilometers". Vous n'avez pas besoin de déterminer manuellement quelle forme utiliser.

Vous pouvez formater différentes unités avec l'affichage long pour voir les noms complets des unités.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "mile",
  unitDisplay: "long"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "pound",
  unitDisplay: "long"
});

const temperatureFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "celsius",
  unitDisplay: "long"
});

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

console.log(weightFormatter.format(25));
// Output: "25 pounds"

console.log(temperatureFormatter.format(22));
// Output: "22 degrees Celsius"

L'affichage long rend la mesure immédiatement claire sans exiger des utilisateurs qu'ils interprètent des abréviations. Les unités de température bénéficient particulièrement de l'affichage long car les abréviations comme C et F peuvent être ambiguës.

Les utilisateurs qui ne sont pas familiers avec les abréviations de mesure trouvent les unités écrites en toutes lettres plus accessibles. Le contenu éducatif, les rapports formels et les interfaces axées sur l'accessibilité bénéficient de cette explicitation.

Formater les unités avec affichage étroit

L'affichage étroit produit la représentation la plus compacte possible. Ce format supprime les espaces et utilise des symboles minimaux pour économiser chaque caractère.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(formatter.format(5));
// Résultat: "5km"

console.log(formatter.format(42));
// Résultat: "42km"

Le formateur supprime l'espace entre le nombre et l'unité, créant une sortie plus condensée. Cela économise de l'espace horizontal dans les mises en page extrêmement contraintes.

Différentes unités produisent différentes représentations étroites basées sur les conventions standard.

const distanceFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const speedFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer-per-hour",
  unitDisplay: "narrow"
});

const weightFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "narrow"
});

console.log(distanceFormatter.format(10));
// Résultat: "10km"

console.log(speedFormatter.format(60));
// Résultat: "60km/h"

console.log(weightFormatter.format(25));
// Résultat: "25kg"

L'affichage étroit fonctionne mieux lorsque l'espace est extrêmement limité et que les utilisateurs sont familiers avec le contexte de mesure. Le format condensé suppose que les utilisateurs peuvent interpréter les unités sans séparation ou explication explicite.

Comparer les affichages court, long et étroit

Les différences entre les trois options d'affichage deviennent claires lorsque vous formatez les mêmes mesures avec chaque option.

const shortFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

const longFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

const narrowFormatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

const distances = [1, 5, 10, 42];

distances.forEach(distance => {
  console.log(`${distance}:`);
  console.log(`  Short:  ${shortFormatter.format(distance)}`);
  console.log(`  Long:   ${longFormatter.format(distance)}`);
  console.log(`  Narrow: ${narrowFormatter.format(distance)}`);
});

// Résultat:
// 1:
//   Short:  1 km
//   Long:   1 kilometer
//   Narrow: 1km
// 5:
//   Short:  5 km
//   Long:   5 kilometers
//   Narrow: 5km
// 10:
//   Short:  10 km
//   Long:   10 kilometers
//   Narrow: 10km
// 42:
//   Short:  42 km
//   Long:   42 kilometers
//   Narrow: 42km

L'affichage court utilise 4-5 caractères pour la partie unité. L'affichage long utilise 9-10 caractères, y compris les formes plurielles. L'affichage étroit utilise 2 caractères et supprime l'espace. Cette progression montre le compromis entre clarté et efficacité d'espace.

Vous pouvez comparer différents types d'unités pour voir comment chaque option d'affichage gère diverses mesures.

const units = [
  { unit: "mile", value: 10 },
  { unit: "pound", value: 25 },
  { unit: "gallon", value: 5 },
  { unit: "fahrenheit", value: 72 }
];

units.forEach(({ unit, value }) => {
  const short = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "short"
  }).format(value);

  const long = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "long"
  }).format(value);

  const narrow = new Intl.NumberFormat("en-US", {
    style: "unit",
    unit: unit,
    unitDisplay: "narrow"
  }).format(value);

  console.log(`${unit}:`);
  console.log(`  Short:  ${short}`);
  console.log(`  Long:   ${long}`);
  console.log(`  Narrow: ${narrow}`);
});

// Résultat:
// mile:
//   Short:  10 mi
//   Long:   10 miles
//   Narrow: 10mi
// pound:
//   Short:  25 lb
//   Long:   25 pounds
//   Narrow: 25lb
// gallon:
//   Short:  5 gal
//   Long:   5 gallons
//   Narrow: 5gal
// fahrenheit:
//   Short:  72°F
//   Long:   72 degrees Fahrenheit
//   Narrow: 72°F

Les unités de température montrent un comportement intéressant. Les affichages court et étroit utilisent tous deux le symbole de degré et l'unité abrégée, tandis que l'affichage long épelle "degrees Fahrenheit". Cela rend l'affichage long particulièrement utile pour la température où le contexte complet est important.

Comment l'affichage des unités varie selon les langues

Les trois options d'affichage s'adaptent à la locale que vous spécifiez. Différentes langues utilisent différentes abréviations, noms d'unités et conventions d'espacement.

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "short"
  });

  const longFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer",
    unitDisplay: "long"
  });

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

// Output:
// en-US:
//   Short: 5 km
//   Long:  5 kilometers
// de-DE:
//   Short: 5 km
//   Long:  5 Kilometer
// fr-FR:
//   Short: 5 km
//   Long:  5 kilomètres
// ja-JP:
//   Short: 5 km
//   Long:  5キロメートル

L'affichage court reste cohérent dans toutes les locales car "km" est une abréviation reconnue internationalement. L'affichage long varie car chaque langue a son propre mot pour kilomètre. L'allemand utilise "Kilometer", le français utilise "kilomètres" et le japonais utilise "キロメートル".

Le formateur gère automatiquement les variations grammaticales. L'allemand ne pluralise pas "Kilometer" de la même façon que l'anglais pluralise "kilometers". Le français ajoute un accent au mot. Le japonais utilise un système d'écriture complètement différent. L'API Intl gère ces différences en fonction de la locale.

Certaines locales gèrent l'affichage étroit différemment des autres.

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

locales.forEach(locale => {
  const narrowFormatter = new Intl.NumberFormat(locale, {
    style: "unit",
    unit: "kilometer-per-hour",
    unitDisplay: "narrow"
  });

  console.log(`${locale}: ${narrowFormatter.format(60)}`);
});

// Output:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h

L'anglais supprime l'espace dans l'affichage étroit, produisant "60km/h". L'allemand et le français conservent l'espace, produisant "60 km/h". Ces conventions spécifiques à la locale reflètent la façon dont chaque culture écrit les mesures sous forme compacte.

Quand utiliser l'affichage court

L'affichage court fonctionne mieux dans les contextes où l'espace est limité mais où les abréviations sont largement comprises. C'est le choix le plus courant pour les applications à usage général.

Les interfaces mobiles bénéficient de l'affichage court car la largeur de l'écran est limitée. Les cartes de tableau de bord affichant plusieurs métriques nécessitent des unités compactes pour adapter l'information à l'écran. Utiliser "42 km" au lieu de "42 kilomètres" économise 5 caractères par mesure, ce qui s'accumule avec plusieurs valeurs.

Les tableaux de données affichant des mesures en colonnes nécessitent une largeur cohérente. Les abréviations courtes comme "km", "kg" et "L" maintiennent les largeurs de colonnes gérables. Les unités longues comme "kilomètres", "kilogrammes" et "litres" élargissent inutilement les colonnes.

Les interfaces scientifiques et techniques utilisent l'affichage court car les utilisateurs dans ces contextes sont familiers avec les abréviations standard. Les ingénieurs, scientifiques et professionnels techniques s'attendent à ce que les mesures utilisent des unités abrégées.

Les cartes et visualisations utilisent l'affichage court pour éviter d'encombrer l'interface avec du texte. Afficher "5 km" sur un marqueur de carte est plus lisible que "5 kilomètres" lorsque l'espace autour du marqueur est limité.

L'affichage court établit un équilibre entre clarté et efficacité. La plupart des utilisateurs reconnaissent les abréviations standard comme km, mi, kg, lb, L et gal sans confusion.

Quand utiliser l'affichage long

L'affichage long fonctionne mieux lorsque la clarté et l'accessibilité sont plus importantes que l'efficacité spatiale. Ce choix rend les mesures immédiatement compréhensibles sans nécessiter d'interprétation.

Le contenu éducatif bénéficie de l'affichage long car les étudiants peuvent ne pas être familiers avec les abréviations de mesure. Les supports pédagogiques expliquant la distance, le poids ou le volume devraient écrire les unités en toutes lettres pour éviter la confusion.

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 plus naturellement. Un lecteur d'écran annonçant "5 kilomètres" sonne plus naturel que "5 km", qui pourrait être lu comme "5 k m" ou "5 kay em".

Les documents formels et les rapports utilisent l'affichage long pour maintenir un ton professionnel. Les rapports d'entreprise, les articles scientifiques et les documents officiels écrivent généralement les mesures en toutes lettres plutôt que de les abréger.

Les audiences internationales bénéficient de l'affichage long lorsque les systèmes de mesure varient. Les utilisateurs peu familiers avec les unités métriques ou impériales trouvent les noms écrits en toutes lettres comme "kilomètres" ou "miles" plus faciles à comprendre que les abréviations.

Les contextes où les utilisateurs apprennent des mesures ou des unités nécessitent un affichage long. Les applications de recettes enseignant les mesures de cuisine, les applications de fitness expliquant les distances, ou les applications de santé montrant les poids devraient utiliser des unités claires, écrites en toutes lettres.

Quand utiliser l'affichage étroit

L'affichage étroit fonctionne mieux dans des contextes extrêmement contraints en espace où chaque caractère compte et où les utilisateurs sont très familiers avec le domaine de mesure.

Les visualisations de données avec des informations denses bénéficient de l'affichage étroit. Les étiquettes de graphiques, les annotations et les superpositions de données nécessitent un texte minimal pour éviter d'obscurcir le contenu visuel sous-jacent. Utiliser "60km/h" au lieu de "60 km/h" économise un caractère tout en restant lisible pour les utilisateurs qui comprennent le contexte.

Les tuiles de tableau de bord compactes affichant des métriques uniques peuvent utiliser l'affichage étroit lorsque la taille de la tuile est minimale. Un widget de compteur de vitesse affichant "60km/h" en grand texte s'adapte mieux que "60 kilomètres par heure".

Les widgets mobiles avec un espace d'écran limité utilisent l'affichage étroit pour maximiser la densité d'information. Un widget météo affichant la température, la vitesse du vent et les précipitations dans un petit widget d'écran d'accueil bénéficie d'unités compactes.

Les interfaces techniques pour les utilisateurs experts peuvent utiliser l'affichage étroit car le public comprend les mesures sans séparation explicite. Les affichages d'aviation, les outils d'ingénierie et les instruments scientifiques utilisent souvent une notation d'unité compacte que les experts reconnaissent instantanément.

L'affichage étroit suppose que les utilisateurs sont familiers avec le contexte de mesure et peuvent interpréter les unités sans assistance. Cette option échange la clarté contre une efficacité d'espace maximale.

Combiner l'affichage d'unité avec d'autres options de formatage

L'option unitDisplay 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 le style d'affichage de l'unité.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long",
  maximumFractionDigits: 2
});

console.log(formatter.format(42.7856));
// Résultat : "42.79 kilometers"

console.log(formatter.format(5.1));
// Résultat : "5.1 kilometers"

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

Vous pouvez combiner l'affichage d'unité avec la notation compacte pour afficher de grandes mesures sous une forme lisible.

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

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

console.log(formatter.format(2400000));
// Résultat : "2.4M meters"

Cette combinaison fonctionne bien lors de l'affichage de très grandes mesures où à la fois l'ampleur et l'unité doivent être claires. Les données scientifiques, les distances géographiques ou les mesures astronomiques bénéficient d'une notation compacte avec un affichage d'unité long.

Vous pouvez combiner l'affichage d'unité avec l'affichage de signe pour montrer des changements ou des différences dans les mesures.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "long",
  signDisplay: "always"
});

console.log(formatter.format(2.5));
// Résultat : "+2.5 kilograms"

console.log(formatter.format(-1.8));
// Résultat : "-1.8 kilograms"

Ce format fonctionne bien pour montrer les changements de poids, les différences d'élévation ou toute mesure où la direction du changement est importante. Le signe explicite combiné avec des unités écrites en toutes lettres rend le changement immédiatement clair.

Ce qu'il faut retenir

L'option unitDisplay contrôle comment les unités apparaissent lors du formatage des mesures avec Intl.NumberFormat. Définissez-la à "short" pour les abréviations standard comme "5 km", "long" pour les unités écrites en toutes lettres comme "5 kilomètres", ou "narrow" pour les formes compactes comme "5km". L'option est définie par défaut à "short" si elle est omise.

Utilisez l'affichage court pour les applications générales où l'espace est important et où les utilisateurs comprennent les abréviations standard. Utilisez l'affichage long lorsque la clarté et l'accessibilité sont plus importantes que l'espace, ou lorsque les utilisateurs peuvent ne pas être familiers avec les abréviations. Utilisez l'affichage étroit uniquement dans des contextes extrêmement contraints en espace où les utilisateurs sont très familiers avec le domaine de mesure.

Le formateur gère automatiquement les variations spécifiques à la locale, y compris les différentes abréviations, noms d'unités, conventions d'espacement et formes plurielles. Combinez unitDisplay avec d'autres options de formatage comme les décimales, la notation compacte et l'affichage des signes pour créer le format de mesure exact dont votre application a besoin.