Comment afficher les unités sous 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 arbitre 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 aux étudiants les mesures nécessite des unités claires et complètes comme "kilomètres" ou "kilogrammes". Une visualisation dense en données utilise la forme la plus compacte possible pour afficher davantage d'informations à l'écran.

Le 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 de verbosité différent pour la partie unité de la sortie formatée.

La valeur short produit des unités abrégées standard comme "5 km" ou "10 lb". La valeur long écrit 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));
// Output: "5 km"

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

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

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

console.log(narrowFormatter.format(5));
// Output: "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 un affichage court

L'affichage court utilise des abréviations standard que la plupart des gens reconnaissent. Ce format équilibre la lisibilité avec l'efficacité de l'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 un 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"

Ce comportement 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 un affichage long

L'affichage long écrit 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 "kilomètre" tandis que plusieurs unités utilisent le pluriel "kilomètres". Vous n'avez pas besoin de déterminer manuellement quelle forme utiliser.

Vous pouvez formater différentes unités avec un 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 obliger les utilisateurs à interpréter les 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 l'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));
// Output: "5km"

console.log(formatter.format(42));
// Output: "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));
// Output: "10km"

console.log(speedFormatter.format(60));
// Output: "60km/h"

console.log(weightFormatter.format(25));
// Output: "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)}`);
});

// Output:
// 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 incluant 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}`);
});

// Output:
// 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 degré et l'unité abrégée, tandis que l'affichage long écrit « degrés Fahrenheit » en toutes lettres. Cela rend l'affichage long particulièrement précieux 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 aux paramètres régionaux 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 d'une locale à l'autre car « km » est une abréviation internationalement reconnue. L'affichage long varie car chaque langue possède 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 manière 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 aux locales reflètent la manière 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 important 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 d'écran est limitée. Les cartes de tableau de bord affichant plusieurs métriques nécessitent des unités compactes pour faire tenir les informations à l'écran. Utiliser « 42 km » au lieu de « 42 kilomètres » économise 5 caractères par mesure, ce qui s'accumule sur 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 connaissent 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é importent plus 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 doivent écrire les unités en toutes lettres pour éviter toute 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 de manière plus naturelle. 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 ka 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 les mesures ou les unités nécessitent l'affichage long. Les applications de recettes enseignant les mesures de cuisine, les applications de fitness expliquant les distances ou les applications de santé affichant les poids doivent utiliser des unités claires et é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 de graphes 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 compteur de vitesse affichant "60 km/h" en gros caractères convient 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'informations. 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 utilisateurs experts peuvent utiliser l'affichage étroit car l'audience comprend les mesures sans séparation explicite. Les affichages aéronautiques, 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 privilégie l'efficacité spatiale maximale au détriment de la clarté.

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 d'unité.

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

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

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

L'option maximumFractionDigits contrôle la précision décimale tandis que unitDisplay contrôle le format d'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));
// Output: "1.5K meters"

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

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

Vous pouvez combiner l'affichage d'unité avec l'affichage de signe pour montrer les changements ou 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));
// Output: "+2.5 kilograms"

console.log(formatter.format(-1.8));
// Output: "-1.8 kilograms"

Ce format fonctionne bien pour afficher les variations de poids, les différences d'altitude ou toute mesure où le sens du changement est important. Le signe explicite combiné aux unités écrites en toutes lettres rend le changement immédiatement clair.

Ce qu'il faut retenir

L'option unitDisplay contrôle l'apparence des unités lors du formatage des mesures avec Intl.NumberFormat. Définissez-la sur "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 sur "short" si elle est omise.

Utilisez l'affichage court pour les applications à usage général 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 ne connaissent pas les abréviations. Utilisez l'affichage étroit uniquement dans des contextes extrêmement contraints en espace où les utilisateurs connaissent très bien le domaine de mesure.

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