Wie Einheiten in Kurz- oder Langform angezeigt werden

Einführung

Wenn Sie Maßeinheiten in einer Benutzeroberfläche anzeigen, nimmt die Einheit neben der Zahl Platz ein. Die Entfernung von 5 Kilometern kann als „5 km“, „5 Kilometer“ oder „5km“ dargestellt werden – je nachdem, wie viel Platz zur Verfügung steht und wie klar die Darstellung sein soll. Jede Formatierung balanciert Lesbarkeit gegen den benötigten horizontalen Platz.

Verschiedene Kontexte erfordern unterschiedliche Formatierungsentscheidungen. Ein mobiles Dashboard mit mehreren Kennzahlen profitiert von kompakten Einheiten wie „km“ oder „kg“. Eine Lernanwendung, die Schülern Maßeinheiten vermittelt, benötigt klar ausgeschriebene Einheiten wie „Kilometer“ oder „Kilogramm“. Eine datenintensive Visualisierung verwendet die kompakteste Form, um möglichst viele Informationen auf dem Bildschirm unterzubringen.

JavaScripts Intl.NumberFormat bietet die unitDisplay-Option, um diese Auswahl zu steuern. Sie können zwischen der Kurzform mit Standardabkürzungen, der Langform mit ausgeschriebenen Wörtern oder der schmalen Form mit der kompaktesten Darstellung wählen. Diese Option gibt Ihnen präzise Kontrolle darüber, wie Einheiten für die Nutzer:innen angezeigt werden.

Was die unitDisplay-Option steuert

Die unitDisplay-Option funktioniert, wenn Sie style auf "unit" in Intl.NumberFormat setzen. Sie akzeptiert drei Werte: "short", "long" und "narrow". Jeder Wert erzeugt einen anderen Detaillierungsgrad für den Einheitenteil der formatierten Ausgabe.

Der Wert short erzeugt standardisierte abgekürzte Einheiten wie „5 km“ oder „10 lb“. Der Wert long schreibt die vollständige Einheitenbezeichnung aus, z. B. „5 Kilometer“ oder „10 Pfund“. Der Wert narrow erzeugt die kompakteste Darstellung wie „5km“ oder „10lb“, wobei häufig das Leerzeichen zwischen Zahl und Einheit entfällt.

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"

Die Option unitDisplay verwendet standardmäßig "short", wenn Sie sie weglassen. Das bedeutet, dass die Einheitenformatierung Standardabkürzungen verwendet, es sei denn, Sie fordern explizit einen anderen Anzeigestil an.

Einheiten mit kurzer Anzeige formatieren

Die kurze Anzeige verwendet Standardabkürzungen, die die meisten Menschen erkennen. Dieses Format bietet ein ausgewogenes Verhältnis zwischen Lesbarkeit und Platzeffizienz.

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"

Der Formatierer fügt ein Leerzeichen zwischen der Zahl und der abgekürzten Einheit ein. Diese Trennung verbessert die Lesbarkeit und hält gleichzeitig die Ausgabe kompakt.

Sie können verschiedene Einheitentypen mit kurzer Anzeige formatieren.

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"

Jeder Einheitentyp verwendet seine Standardabkürzung. Entfernung verwendet km, Gewicht verwendet kg und Volumen verwendet L. Diese Abkürzungen sind weithin bekannt und funktionieren in den meisten Kontexten gut.

Die kurze Anzeige ist das Standardverhalten. Wenn Sie die Option unitDisplay weglassen, verwendet der Formatierer automatisch die kurze Anzeige.

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

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

Diese Standardeinstellung macht die kurze Anzeige praktisch, wenn Sie standardmäßig abgekürzte Einheiten wünschen, ohne die Anzeigeoption explizit anzugeben.

Einheiten mit langer Anzeige formatieren

Die lange Anzeige schreibt den vollständigen Einheitennamen aus. Dieses Format bietet maximale Klarheit auf Kosten von zusätzlichem horizontalen Platz.

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"

Der Formatierer behandelt automatisch Singular- und Pluralformen. Eine Einheit verwendet den Singular "Kilometer", während mehrere Einheiten den Plural "Kilometer" verwenden. Sie müssen nicht manuell bestimmen, welche Form verwendet werden soll.

Sie können verschiedene Einheiten mit langer Anzeige formatieren, um die vollständigen Einheitennamen zu sehen.

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"

Die lange Anzeige macht die Messung sofort klar, ohne dass Benutzer Abkürzungen interpretieren müssen. Temperatureinheiten profitieren besonders von der langen Anzeige, da Abkürzungen wie C und F mehrdeutig sein können.

Nutzer, die mit Maßeinheitsabkürzungen nicht vertraut sind, finden ausgeschriebene Einheiten zugänglicher. Bildungsinhalte, formelle Berichte und barrierefreie Benutzeroberflächen profitieren von dieser Explizitheit.

Einheiten mit schmaler Darstellung formatieren

Die schmale Darstellung erzeugt die kompakteste mögliche Repräsentation. Dieses Format entfernt Leerzeichen und verwendet minimale Symbole, um jedes Zeichen einzusparen.

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"

Der Formatierer entfernt das Leerzeichen zwischen Zahl und Einheit und erzeugt so eine kompaktere Ausgabe. Dies spart horizontalen Platz in extrem eingeschränkten Layouts.

Verschiedene Einheiten erzeugen unterschiedliche schmale Darstellungen basierend auf Standardkonventionen.

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"

Die schmale Darstellung funktioniert am besten, wenn der Platz extrem begrenzt ist und die Nutzer mit dem Messkontext vertraut sind. Das kompakte Format setzt voraus, dass Nutzer die Einheiten ohne explizite Trennung oder Erklärung interpretieren können.

Kurze, lange und schmale Darstellung vergleichen

Die Unterschiede zwischen den drei Darstellungsoptionen werden deutlich, wenn Sie dieselben Messungen mit jeder Option formatieren.

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

Die kurze Darstellung verwendet 4-5 Zeichen für den Einheitenteil. Die lange Darstellung verwendet 9-10 Zeichen einschließlich Pluralformen. Die schmale Darstellung verwendet 2 Zeichen und entfernt das Leerzeichen. Diese Progression zeigt den Kompromiss zwischen Klarheit und Platzeffizienz.

Sie können verschiedene Einheitentypen vergleichen, um zu sehen, wie jede Darstellungsoption verschiedene Messungen handhabt.

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

Temperatureinheiten zeigen interessantes Verhalten. Sowohl kurze als auch schmale Darstellung verwenden das Gradsymbol und die abgekürzte Einheit, während die lange Darstellung "Grad Fahrenheit" ausschreibt. Dies macht die lange Darstellung besonders wertvoll für Temperaturen, bei denen der vollständige Kontext wichtig ist.

Wie die Einheitendarstellung zwischen Sprachen variiert

Alle drei Darstellungsoptionen passen sich an das von Ihnen angegebene Gebietsschema an. Verschiedene Sprachen verwenden unterschiedliche Abkürzungen, Einheitennamen und Abstandskonventionen.

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キロメートル

Die Kurzanzeige bleibt über alle Locales hinweg konsistent, da "km" eine international anerkannte Abkürzung ist. Die Langanzeige variiert, da jede Sprache ihr eigenes Wort für Kilometer hat. Deutsch verwendet "Kilometer", Französisch verwendet "kilomètres" und Japanisch verwendet "キロメートル".

Der Formatter behandelt grammatikalische Variationen automatisch. Deutsch bildet den Plural von "Kilometer" nicht auf die gleiche Weise wie Englisch "kilometers" pluralisiert. Französisch fügt dem Wort einen Akzent hinzu. Japanisch verwendet ein völlig anderes Schriftsystem. Die Intl-API verwaltet diese Unterschiede basierend auf dem Locale.

Einige Locales behandeln die schmale Anzeige anders als andere.

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

Englisch entfernt das Leerzeichen in der schmalen Anzeige und erzeugt "60km/h". Deutsch und Französisch behalten das Leerzeichen bei und erzeugen "60 km/h". Diese locale-spezifischen Konventionen spiegeln wider, wie jede Kultur Messungen in kompakter Form schreibt.

Wann die Kurzanzeige verwendet werden sollte

Die Kurzanzeige funktioniert am besten in Kontexten, in denen Platz wichtig ist, Abkürzungen jedoch weithin verstanden werden. Dies ist die gängigste Wahl für allgemeine Anwendungen.

Mobile Interfaces profitieren von der Kurzanzeige, da die Bildschirmbreite begrenzt ist. Dashboard-Karten, die mehrere Metriken anzeigen, benötigen kompakte Einheiten, um Informationen auf dem Bildschirm unterzubringen. Die Verwendung von "42 km" anstelle von "42 Kilometer" spart 5 Zeichen pro Messung, was sich über mehrere Werte hinweg summiert.

Datentabellen, die Messungen in Spalten anzeigen, benötigen eine konsistente Breite. Kurze Abkürzungen wie "km", "kg" und "l" halten die Spaltenbreiten überschaubar. Lange Einheiten wie "Kilometer", "Kilogramm" und "Liter" verbreitern Spalten unnötig.

Wissenschaftliche und technische Interfaces verwenden die Kurzanzeige, da Benutzer in diesen Kontexten mit Standardabkürzungen vertraut sind. Ingenieure, Wissenschaftler und technische Fachkräfte erwarten, dass Messungen abgekürzte Einheiten verwenden.

Karten und Visualisierungen verwenden die Kurzanzeige, um zu vermeiden, dass das Interface mit Text überladen wird. Die Anzeige von "5 km" auf einem Kartenmarker ist lesbarer als "5 Kilometer", wenn der Platz um den Marker herum begrenzt ist.

Die Kurzanzeige schafft ein Gleichgewicht zwischen Klarheit und Effizienz. Die meisten Benutzer erkennen Standardabkürzungen wie km, mi, kg, lb, L und gal ohne Verwirrung.

Wann die Langanzeige verwendet werden sollte

Die Langanzeige funktioniert am besten, wenn Klarheit und Barrierefreiheit wichtiger sind als Platzeffizienz. Diese Wahl macht Messungen sofort verständlich, ohne dass eine Interpretation erforderlich ist.

Bildungsinhalte profitieren von der Langanzeige, da Lernende möglicherweise nicht mit Messabkürzungen vertraut sind. Lehrmaterialien, die Entfernung, Gewicht oder Volumen erklären, sollten Einheiten ausschreiben, um Verwirrung zu vermeiden.

Barrierefreiheitsorientierte Benutzeroberflächen profitieren von der Langanzeige, da Screenreader ausgeschriebene Wörter natürlicher aussprechen. Ein Screenreader, der "5 Kilometer" ankündigt, klingt natürlicher als "5 km", was möglicherweise als "5 k m" oder "5 ka em" gelesen wird.

Formelle Dokumente und Berichte verwenden die Langanzeige, um einen professionellen Ton beizubehalten. Geschäftsberichte, wissenschaftliche Arbeiten und offizielle Dokumente schreiben Messungen typischerweise aus, anstatt sie abzukürzen.

Internationales Publikum profitiert von der Langanzeige, wenn Messsysteme variieren. Benutzer, die mit metrischen oder imperialen Einheiten nicht vertraut sind, finden ausgeschriebene Namen wie "Kilometer" oder "Meilen" leichter zu verstehen als Abkürzungen.

Kontexte, in denen Benutzer etwas über Messungen oder Einheiten lernen, benötigen die Langanzeige. Rezeptanwendungen, die Kochmaße vermitteln, Fitnessanwendungen, die Entfernungen erklären, oder Gesundheitsanwendungen, die Gewichte anzeigen, sollten klare, ausgeschriebene Einheiten verwenden.

Wann die Schmalanzeige verwendet werden sollte

Die Schmalanzeige funktioniert am besten in extrem platzbeschränkten Kontexten, in denen jedes Zeichen zählt und Benutzer mit dem Messbereich sehr vertraut sind.

Datenvisualisierungen mit dichten Informationen profitieren von der Schmalanzeige. Diagrammbeschriftungen, Graphanmerkungen und Datenüberlagerungen benötigen minimalen Text, um den zugrunde liegenden visuellen Inhalt nicht zu verdecken. Die Verwendung von "60km/h" anstelle von "60 km/h" spart ein Zeichen und bleibt für Benutzer lesbar, die den Kontext verstehen.

Kompakte Dashboard-Kacheln, die einzelne Metriken anzeigen, können eine schmale Darstellung verwenden, wenn die Kachelgröße minimal ist. Ein Tachometer-Widget, das „60 km/h" in großer Schrift anzeigt, passt besser als „60 Kilometer pro Stunde".

Mobile Widgets mit begrenztem Bildschirmplatz verwenden eine schmale Darstellung, um die Informationsdichte zu maximieren. Ein Wetter-Widget, das Temperatur, Windgeschwindigkeit und Niederschlag in einem kleinen Homescreen-Widget anzeigt, profitiert von kompakten Einheiten.

Technische Schnittstellen für erfahrene Benutzer können eine schmale Darstellung verwenden, da die Zielgruppe die Messungen ohne explizite Trennung versteht. Luftfahrtanzeigen, Engineering-Tools und wissenschaftliche Instrumente verwenden oft eine kompakte Einheitennotation, die Experten sofort erkennen.

Die schmale Darstellung setzt voraus, dass Benutzer mit dem Messkontext vertraut sind und Einheiten ohne Hilfestellung interpretieren können. Diese Option tauscht Klarheit gegen maximale Platzeffizienz.

Einheitendarstellung mit anderen Formatierungsoptionen kombinieren

Die Option unitDisplay funktioniert mit allen anderen Zahlenformatierungsoptionen. Sie können Dezimalstellen, Gruppierung und andere Formatierungen steuern, während Sie den Einheitendarstellungsstil wählen.

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"

Die Option maximumFractionDigits steuert die Dezimalpräzision, während unitDisplay das Einheitenformat steuert. Diese Optionen arbeiten zusammen, um das exakte Format zu erzeugen, das Sie benötigen.

Sie können die Einheitendarstellung mit kompakter Notation kombinieren, um große Messungen in lesbarer Form anzuzeigen.

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"

Diese Kombination funktioniert gut bei der Anzeige sehr großer Messungen, bei denen sowohl die Größenordnung als auch die Einheit klar sein müssen. Wissenschaftliche Daten, geografische Entfernungen oder astronomische Messungen profitieren von kompakter Notation mit langer Einheitendarstellung.

Sie können die Einheitendarstellung mit der Vorzeichenanzeige kombinieren, um Änderungen oder Unterschiede in Messungen anzuzeigen.

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"

Dieses Format eignet sich gut zur Darstellung von Gewichtsänderungen, Höhenunterschieden oder beliebigen Messungen, bei denen die Änderungsrichtung relevant ist. Das explizite Vorzeichen in Kombination mit ausgeschriebenen Einheiten macht die Änderung sofort deutlich.

Was Sie beachten sollten

Die Option unitDisplay steuert, wie Einheiten bei der Formatierung von Messungen mit Intl.NumberFormat angezeigt werden. Setzen Sie sie auf "short" für Standardabkürzungen wie "5 km", "long" für ausgeschriebene Einheiten wie "5 Kilometer" oder "narrow" für kompakte Formen wie "5 km". Die Option ist standardmäßig auf "short" gesetzt, wenn sie nicht angegeben wird.

Verwenden Sie die kurze Darstellung für allgemeine Anwendungen, bei denen Platz wichtig ist und Benutzer Standardabkürzungen verstehen. Verwenden Sie die lange Darstellung, wenn Klarheit und Barrierefreiheit wichtiger sind als Platz oder wenn Benutzer möglicherweise mit Abkürzungen nicht vertraut sind. Verwenden Sie die schmale Darstellung nur in extrem platzbeschränkten Kontexten, in denen Benutzer mit dem Messbereich sehr vertraut sind.

Der Formatter verarbeitet gebietsschemaspezifische Variationen automatisch, einschließlich unterschiedlicher Abkürzungen, Einheitennamen, Abstandskonventionen und Pluralformen. Kombinieren Sie unitDisplay mit anderen Formatierungsoptionen wie Dezimalstellen, kompakter Notation und Vorzeichenanzeige, um das exakte Messformat zu erstellen, das Ihre Anwendung benötigt.