Wie man Maßeinheiten wie 5 Kilometer oder 10 Pfund formatiert

Einführung

Messungen kommunizieren Mengen mit Einheiten, die ihnen Bedeutung verleihen. Fünf Kilometer zeigen eine Entfernung an, zehn Pfund zeigen ein Gewicht an und zwanzig Grad Celsius zeigen eine Temperatur an. Anwendungen, die Messungen anzeigen, müssen sowohl den numerischen Wert als auch die Einheit in einem Format darstellen, das Benutzer verstehen.

Verschiedene Sprachräume formatieren Messungen unterschiedlich. Amerikaner schreiben je nach Kontext "5 km" oder "5 kilometers". Deutsche könnten "5 km" mit anderen Abstandskonventionen schreiben. Die gleiche Messung kann je nach Sprachraum und gewünschter Ausführlichkeit als "5 km", "5km" oder "5 Kilometer" erscheinen. Einige Regionen verwenden metrische Einheiten, während andere imperiale Einheiten verwenden, aber auch die Formatierung der Einheiten variiert je nach Sprachraum.

JavaScript bietet die Intl.NumberFormat-API, um Messungen mit sprachraum-gerechter Einheitenformatierung zu formatieren. Diese Lektion erklärt, wie man Messungen wie Entfernung, Gewicht, Temperatur, Volumen und Geschwindigkeit mit der korrekten Einheitenanzeige für jeden Sprachraum formatiert.

Messungen benötigen Einheiten für Kontext

Zahlen ohne Einheiten haben in vielen Kontexten keine Bedeutung. Die Zahl 5 könnte 5 Kilometer, 5 Meilen, 5 Meter oder 5 Fuß darstellen. Benutzer können den Wert nicht interpretieren, ohne die gemessene Einheit zu kennen.

Einheiten müssen konsistent mit dem numerischen Wert angezeigt werden. Wenn Sie "5 Kilometer" schreiben, ist die Einheit "Kilometer" eine wesentliche Information. Wenn Sie "10 Pfund" schreiben, identifiziert die Einheit "Pfund" die Messung als Gewicht und nicht als Währung.

Für die gleiche Art von Messung existieren verschiedene Einheitensysteme. Entfernung kann in Kilometern, Meilen, Metern, Fuß oder anderen Einheiten gemessen werden. Gewicht kann in Kilogramm, Pfund, Unzen oder Gramm gemessen werden. Temperatur kann in Celsius, Fahrenheit oder Kelvin gemessen werden. Anwendungen müssen das von ihnen verwendete Einheitensystem so formatieren, dass es den Erwartungen der Benutzer entspricht.

Formatieren von Einheiten mit Intl.NumberFormat

Der Intl.NumberFormat-Konstruktor erstellt einen Einheiten-Formatierer, wenn Sie style: 'unit' in den Optionen übergeben. Sie müssen auch angeben, welche Einheit formatiert werden soll, indem Sie die Option unit mit einer Einheiten-ID verwenden.

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

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

Dies erstellt einen Formatierer für US-Englisch, der Werte in Kilometern anzeigt. Die Methode format() konvertiert die Zahl in einen String mit der Kilometer-Einheitsabkürzung.

Die Option unit akzeptiert standardisierte Einheiten-IDs. Diese IDs verwenden Kleinbuchstaben, die durch Bindestriche getrennt sind. Häufige IDs sind kilometer, meter, mile, pound, kilogram, celsius, fahrenheit, liter und gallon.

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

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

console.log(distanceFormatter.format(5));
// Ausgabe: "5 km"

console.log(weightFormatter.format(10));
// Ausgabe: "10 lb"

Jeder Formatierer wendet automatisch die entsprechende Einheitsabkürzung für die angegebene Einheit an. Sie müssen nicht wissen, welche Abkürzung zu welcher Einheiten-ID gehört.

Locale bestimmt die Einheitenformatierung

Der Locale-Parameter steuert, wie Einheiten formatiert werden, einschließlich Abständen, Trennzeichen und Einheitsabkürzungen. Dieselbe Einheit erzeugt je nach Locale unterschiedliche Ausgaben.

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

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer'
});

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'unit',
  unit: 'kilometer'
});

console.log(usFormatter.format(5));
// Ausgabe: "5 km"

console.log(deFormatter.format(5));
// Ausgabe: "5 km"

console.log(frFormatter.format(5));
// Ausgabe: "5 km"

Während Kilometer in verschiedenen Locales ähnliche Abkürzungen verwenden, variieren die Konventionen für Abstände und Trennzeichen. Die Intl-API behandelt diese locale-spezifischen Formatierungsregeln automatisch.

Steuerung der Einheitenanzeige

Die Option unitDisplay steuert, ob Einheiten in abgekürzter, vollständiger oder minimaler Form erscheinen. Die Option akzeptiert drei Werte: "short" für Abkürzungen, "long" für vollständige Einheitennamen und "narrow" für minimale Anzeige.

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'
});

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

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

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

Das Format short verwendet Standardabkürzungen wie "km" oder "lb". Das Format long verwendet vollständige Einheitennamen wie "kilometers" oder "pounds". Das Format narrow verwendet eine minimale Anzeige mit reduziertem oder keinem Abstand. Die Standardeinstellung ist short, wenn unitDisplay nicht angegeben wird.

Die Locale beeinflusst, wie Einheiten in Langform erscheinen. Vollständige Einheitennamen werden übersetzt und an die Grammatikregeln der jeweiligen Sprache angepasst.

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

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const esFormatter = new Intl.NumberFormat('es-ES', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

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

console.log(deFormatter.format(5));
// Output: "5 Kilometer"

console.log(esFormatter.format(5));
// Output: "5 kilómetros"

Jede Locale bietet die entsprechende Übersetzung und grammatikalische Form für den Einheitennamen.

Formatierung von Gewichtsangaben

Gewichtsangaben verwenden Einheitenkennungen wie pound, kilogram, ounce und gram. Diese Kennungen funktionieren auf die gleiche Weise wie Entfernungseinheiten.

const poundFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound'
});

const kilogramFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilogram'
});

console.log(poundFormatter.format(10));
// Output: "10 lb"

console.log(kilogramFormatter.format(10));
// Output: "10 kg"

Sie können Gewicht in Langform formatieren, um vollständige Einheitennamen anzuzeigen.

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

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

console.log(formatter.format(10));
// Output: "10 pounds"

Der Formatierer behandelt automatisch Singular- und Pluralformen basierend auf dem Wert. Ein Pfund verwendet die Singularform, während zehn Pfund die Pluralform verwendet.

Temperaturmessungen formatieren

Temperaturmessungen verwenden Einheitskennungen wie celsius und fahrenheit. Diese Einheiten werden in Kurzform mit Gradsymbolen formatiert.

const celsiusFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius'
});

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit'
});

console.log(celsiusFormatter.format(20));
// Output: "20°C"

console.log(fahrenheitFormatter.format(68));
// Output: "68°F"

Die Langform zeigt die vollständigen Namen der Temperaturskalen an.

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

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit',
  unitDisplay: 'long'
});

console.log(celsiusFormatter.format(20));
// Output: "20 degrees Celsius"

console.log(fahrenheitFormatter.format(68));
// Output: "68 degrees Fahrenheit"

Die Temperaturformatierung enthält automatisch die entsprechende Gradterminologie für jede Skala.

Volumenmessungen formatieren

Volumenmessungen verwenden Einheitskennungen wie liter, gallon, milliliter und fluid-ounce. Diese funktionieren wie andere Einheitstypen.

const literFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter'
});

const gallonFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'gallon'
});

console.log(literFormatter.format(2));
// Output: "2 L"

console.log(gallonFormatter.format(2));
// Output: "2 gal"

Volumeneinheiten unterstützen auch die Langformanzeige mit lokalspezifischer Schreibweise.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

const gbFormatter = new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

console.log(usFormatter.format(2));
// Output: "2 liters"

console.log(gbFormatter.format(2));
// Output: "2 litres"

Die britische englische Lokalisierung verwendet "litres", während amerikanisches Englisch "liters" verwendet.

Zusammengesetzte Einheiten formatieren

Zusammengesetzte Einheiten kombinieren zwei einfache Einheiten mit einer "pro"-Beziehung. Geschwindigkeitsmessungen wie Meilen pro Stunde oder Kilometer pro Stunde verwenden zusammengesetzte Einheiten. Kraftstoffeffizienzmessungen wie Liter pro 100 Kilometer verwenden ebenfalls zusammengesetzte Einheiten.

Kennungen für zusammengesetzte Einheiten verbinden zwei einfache Einheiten mit -per-. Zum Beispiel kombiniert mile-per-hour Meilen und Stunden, kilometer-per-hour kombiniert Kilometer und Stunden.

const mphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour'
});

const kphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});

console.log(mphFormatter.format(60));
// Output: "60 mph"

console.log(kphFormatter.format(100));
// Output: "100 km/h"

Jede zusammengesetzte Einheit wird mit der entsprechenden Abkürzung formatiert, die beide Einheitsteile kombiniert.

Die Langform zeigt zusammengesetzte Einheiten mit vollständigen Namen und lokalspezifischen Präpositionen an.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour',
  unitDisplay: 'long'
});

console.log(formatter.format(60));
// Output: "60 miles per hour"

Der Formatierer konstruiert automatisch die zusammengesetzte Einheitsphrase unter Verwendung der korrekten Grammatik für die Lokalisierung.

Verfügbare Einheitenkennungen abrufen

Die Methode Intl.supportedValuesOf() gibt ein Array mit allen Einheitenkennungen zurück, die in Ihrer JavaScript-Umgebung unterstützt werden. Diese Methode nimmt den String 'unit' als Argument.

const units = Intl.supportedValuesOf('unit');

console.log(units);
// Ausgabe: Array von Einheitenkennungen wie:
// ["acre", "bit", "byte", "celsius", "centimeter", "day",
//  "degree", "fahrenheit", "fluid-ounce", "foot", "gallon",
//  "gram", "hectare", "hour", "inch", "kilogram", "kilometer",
//  "liter", "meter", "mile", "millimeter", "ounce", "pound",
//  "second", "stone", "week", "yard", ...]

Das zurückgegebene Array enthält alle einfachen Einheiten, die für die Formatierung verfügbar sind. Sie können jeden Bezeichner aus diesem Array mit der Option unit verwenden.

Diese Methode ist hilfreich, wenn Sie überprüfen müssen, ob eine bestimmte Einheit unterstützt wird, oder wenn Sie den Benutzern eine Liste verfügbarer Einheiten bereitstellen möchten.

const units = Intl.supportedValuesOf('unit');

const hasKilometer = units.includes('kilometer');
const hasPound = units.includes('pound');

console.log(hasKilometer);
// Ausgabe: true

console.log(hasPound);
// Ausgabe: true

Sie können vor dem Erstellen von Formatierern nach bestimmten Einheiten suchen, um Umgebungen mit unterschiedlichen Unterstützungsniveaus zu berücksichtigen.

Mit Zahlenformatierungsoptionen kombinieren

Einheitsformatierer unterstützen die gleichen Zahlenformatierungsoptionen wie andere Intl.NumberFormat-Stile. Sie können Dezimalstellen, signifikante Stellen und andere numerische Eigenschaften steuern.

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

console.log(formatter.format(5.123));
// Ausgabe: "5.12 km"

console.log(formatter.format(5.5));
// Ausgabe: "5.5 km"

Der Formatierer wendet Rundungs- und Dezimalstellenregeln an, bevor die Einheit hinzugefügt wird.

Sie können große Zahlen mit Tausendertrennzeichen formatieren.

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

console.log(formatter.format(12345.67));
// Ausgabe: "12,345.67 km"

Alle standardmäßigen Zahlenformatierungsfunktionen funktionieren mit der Einheitsformatierung.

Messungen für die Locale des Benutzers formatieren

Anstatt eine bestimmte Locale fest zu codieren, können Sie die Spracheinstellungen des Browsers des Benutzers verwenden. Die Eigenschaft navigator.language gibt die bevorzugte Locale des Benutzers zurück.

const userLocale = navigator.language;

const formatter = new Intl.NumberFormat(userLocale, {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(5));
// Ausgabe variiert je nach Locale des Benutzers

Dieser Ansatz zeigt Messungen entsprechend den Formatierungserwartungen jedes Benutzers an. Verschiedene Benutzer sehen dieselbe Messung gemäß den Konventionen ihrer Locale formatiert.

Messungen in Anwendungen anzeigen

Sie können Einheitsformatierer überall dort verwenden, wo Sie Messungen für Benutzer anzeigen. Dazu gehören Fitness-Anwendungen, die Entfernung oder Gewicht anzeigen, Wetter-Anwendungen, die Temperatur anzeigen, Rezept-Anwendungen, die Volumen anzeigen, und Navigations-Anwendungen, die Geschwindigkeit anzeigen.

const distanceFormatter = new Intl.NumberFormat(navigator.language, {
  style: 'unit',
  unit: 'kilometer',
  maximumFractionDigits: 1
});

const distance = 5.234;

document.getElementById('distance').textContent = distanceFormatter.format(distance);
// Zeigt an: "5,2 km" (oder Locale-Äquivalent)

Die formatierten Zeichenketten funktionieren wie jeder andere Zeichenkettenwert. Sie können sie in Textinhalte, Attribute oder jeden Kontext einfügen, in dem Sie Informationen für Benutzer anzeigen.

Wiederverwendung von Einheitsformatierern

Das Erstellen einer neuen Intl.NumberFormat-Instanz beinhaltet das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Messungen mit derselben Locale und Einheit formatieren, erstellen Sie den Formatierer einmal und verwenden ihn wieder.

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

const distances = [1.5, 3.2, 5.0, 10.8];

distances.forEach(distance => {
  console.log(formatter.format(distance));
});
// Ausgabe:
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"

Dieses Muster ist effizienter als das Erstellen eines neuen Formatierers für jeden Wert. Der Leistungsunterschied wird signifikant, wenn Arrays oder Listen mit vielen Messungen formatiert werden.