Wie man Einheiten in kurzer oder langer Form anzeigt

Einführung

Wenn Sie Messungen 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" erscheinen, abhängig davon, wie viel Platz zur Verfügung steht und wie deutlich die Darstellung sein muss. Jedes Format tauscht Lesbarkeit gegen horizontalen Platz.

Verschiedene Kontexte erfordern unterschiedliche Formatierungsentscheidungen. Ein mobiles Dashboard, das mehrere Metriken anzeigt, profitiert von kompakten Einheiten wie "km" oder "kg". Eine Bildungsanwendung, die Schülern Messungen beibringt, benötigt klare, ausgeschriebene Einheiten wie "Kilometer" oder "Kilogramm". Eine datenintensive Visualisierung verwendet die kompakteste Form, um mehr Informationen auf dem Bildschirm unterzubringen.

JavaScripts Intl.NumberFormat bietet die Option unitDisplay, um diese Auswahl zu steuern. Sie können zwischen kurzer Anzeige mit Standardabkürzungen, langer Anzeige mit ausgeschriebenen Wörtern oder schmaler Anzeige mit der kompaktesten Darstellung wählen. Diese Option gibt Ihnen präzise Kontrolle darüber, wie Einheiten für Benutzer erscheinen.

Was die unitDisplay-Option steuert

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

Der Wert short erzeugt standardmäßig abgekürzte Einheiten wie "5 km" oder "10 lb". Der Wert long schreibt den vollständigen Einheitennamen aus, wie "5 Kilometer" oder "10 Pfund". Der Wert narrow erzeugt die kompakteste Darstellung wie "5km" oder "10lb", wobei oft Leerzeichen zwischen Zahl und Einheit entfernt werden.

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 ist standardmäßig auf "short" eingestellt, wenn Sie sie weglassen. Das bedeutet, dass die Einheitsformatierung Standardabkürzungen verwendet, es sei denn, Sie fordern explizit einen anderen Anzeigestil an.

Formatierung von Einheiten mit kurzer Darstellung

Die kurze Darstellung verwendet standardisierte Abkürzungen, die die meisten Menschen erkennen. Dieses Format bietet eine Balance 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, während die Ausgabe kompakt bleibt.

Sie können verschiedene Einheitstypen mit kurzer Darstellung 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 Einheitstyp 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 Darstellung ist das Standardverhalten. Wenn Sie die Option unitDisplay weglassen, verwendet der Formatierer automatisch die kurze Darstellung.

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

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

Dieser Standard macht die kurze Darstellung praktisch, wenn Sie standardmäßig abgekürzte Einheiten verwenden möchten, ohne explizit die Anzeigeoptionen anzugeben.

Formatierung von Einheiten mit langer Darstellung

Die lange Darstellung schreibt den vollständigen Einheitsnamen aus. Dieses Format bietet maximale Klarheit auf Kosten zusätzlichen horizontalen Platzes.

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 "kilometers" verwenden. Sie müssen nicht manuell bestimmen, welche Form zu verwenden ist.

Sie können verschiedene Einheiten mit langer Darstellung formatieren, um die vollständigen Einheitsnamen 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 Darstellung macht die Messung sofort klar, ohne dass Benutzer Abkürzungen interpretieren müssen. Besonders Temperatureinheiten profitieren von der langen Darstellung, da Abkürzungen wie C und F mehrdeutig sein können.

Benutzer, die mit Messabkürzungen nicht vertraut sind, finden ausgeschriebene Einheiten zugänglicher. Bildungsinhalte, formelle Berichte und barrierefreie Benutzeroberflächen profitieren von dieser Eindeutigkeit.

Formatierung von Einheiten mit schmaler Anzeige

Die schmale Anzeige erzeugt die kompakteste mögliche Darstellung. Dieses Format entfernt Leerzeichen und verwendet minimale Symbole, um jeden Buchstaben 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 der Zahl und der 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 Anzeige funktioniert am besten, wenn der Platz extrem begrenzt ist und die Benutzer mit dem Messkontext vertraut sind. Das kompakte Format setzt voraus, dass Benutzer die Einheiten ohne explizite Trennung oder Erklärung interpretieren können.

Vergleich von kurzer, langer und schmaler Anzeige

Die Unterschiede zwischen den drei Anzeigeoptionen 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 Anzeige verwendet 4-5 Zeichen für den Einheitenteil. Die lange Anzeige verwendet 9-10 Zeichen einschließlich Pluralformen. Die schmale Anzeige verwendet 2 Zeichen und entfernt das Leerzeichen. Diese Progression zeigt den Kompromiss zwischen Klarheit und Platzeffizienz.

Sie können verschiedene Einheitstypen vergleichen, um zu sehen, wie jede Anzeigeoption mit verschiedenen Messungen umgeht.

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. Kurze und schmale Anzeige verwenden beide das Gradsymbol und die abgekürzte Einheit, während die lange Anzeige "degrees Fahrenheit" ausschreibt. Dies macht die lange Anzeige besonders wertvoll für Temperaturen, bei denen der vollständige Kontext wichtig ist.

Wie sich die Einheitenanzeige in verschiedenen Sprachen unterscheidet

Alle drei Anzeigeoptionen passen sich an die von Ihnen angegebene Locale 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. Im Deutschen wird "Kilometer" nicht auf die gleiche Weise pluralisiert wie im Englischen "kilometers". Französisch fügt dem Wort einen Akzent hinzu. Japanisch verwendet ein völlig anderes Schriftsystem. Die Intl-API verwaltet diese Unterschiede basierend auf der 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 lokalspezifischen Konventionen spiegeln wider, wie jede Kultur Messungen in kompakter Form schreibt.

Wann die Kurzanzeige zu verwenden ist

Die Kurzanzeige funktioniert am besten in Kontexten, in denen Platz wichtig ist, aber Abkürzungen allgemein verstanden werden. Dies ist die häufigste Wahl für Anwendungen mit allgemeinem Zweck.

Mobile Benutzeroberflächen 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 einheitliche Breite. Kurze Abkürzungen wie "km", "kg" und "L" halten die Spaltenbreiten überschaubar. Lange Einheiten wie "Kilometer", "Kilogramm" und "Liter" verbreitern die Spalten unnötigerweise.

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

Karten und Visualisierungen verwenden die Kurzanzeige, um die Benutzeroberfläche nicht mit Text zu überladen. Die Anzeige von "5 km" auf einer Kartenmarkierung ist besser lesbar als "5 Kilometer", wenn der Platz um die Markierung 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 zu verwenden ist

Die Langanzeige funktioniert am besten, wenn Klarheit und Zugänglichkeit wichtiger sind als Platzeffizienz. Diese Wahl macht Messungen sofort verständlich, ohne Interpretation zu erfordern.

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

Zugänglichkeitsorientierte 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 kay 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.

Internationale Zielgruppen profitieren 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. Rezept-Anwendungen, die Kochmessungen lehren, Fitness-Anwendungen, die Entfernungen erklären, oder Gesundheits-Anwendungen, die Gewichte anzeigen, sollten klare, ausgeschriebene Einheiten verwenden.

Wann die schmale Darstellung verwenden

Die schmale Darstellung funktioniert am besten in extrem platzbeschränkten Kontexten, wo jedes Zeichen wichtig ist und Benutzer mit dem Messbereich sehr vertraut sind.

Datenvisualisierungen mit dichter Information profitieren von der schmalen Darstellung. Diagrammbeschriftungen, Graphenanmerkungen und Datenüberlagerungen benötigen minimalen Text, um den zugrundeliegenden visuellen Inhalt nicht zu verdecken. Die Verwendung von "60km/h" anstelle von "60 km/h" spart ein Zeichen, bleibt aber für Benutzer, die den Kontext verstehen, lesbar.

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

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

Technische Schnittstellen für Expertenbenutzer können die schmale Darstellung verwenden, da das Publikum die Messungen ohne explizite Trennung versteht. Flugzeuganzeigen, Ingenieurwerkzeuge und wissenschaftliche Instrumente verwenden oft kompakte Einheitsnotationen, die Experten sofort erkennen.

Die schmale Darstellung setzt voraus, dass Benutzer mit dem Messkontext vertraut sind und Einheiten ohne Hilfe 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 Stil der Einheitendarstellung wählen.

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

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

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

Die Option maximumFractionDigits steuert die Dezimalpräzision, während unitDisplay das Einheitsformat 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));
// Ausgabe: "1.5K meters"

console.log(formatter.format(2400000));
// Ausgabe: "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));
// Ausgabe: "+2.5 kilograms"

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

Dieses Format eignet sich gut, um Gewichtsänderungen, Höhenunterschiede oder jede Messung anzuzeigen, bei der die Richtung der Änderung wichtig ist. Das explizite Vorzeichen in Kombination mit ausgeschriebenen Einheiten macht die Änderung sofort deutlich.

Was zu beachten ist

Die Option unitDisplay steuert, wie Einheiten bei der Formatierung von Messungen mit Intl.NumberFormat erscheinen. 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 "5km". Die Option ist standardmäßig auf "short" eingestellt, wenn sie weggelassen wird.

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

Der Formatierer behandelt automatisch lokale Variationen, einschließlich verschiedener Abkürzungen, Einheitennamen, Abstandskonventionen und Pluralformen. Kombinieren Sie unitDisplay mit anderen Formatierungsoptionen wie Dezimalstellen, kompakter Notation und Zeichenanzeige, um das exakte Messformat zu erstellen, das Ihre Anwendung benötigt.