So formatieren Sie Maßangaben wie 5 Kilometer oder 10 Pfund

Einführung

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

Verschiedene Gebietsschemata formatieren Maßangaben unterschiedlich. Amerikaner schreiben je nach Kontext "5 km" oder "5 kilometers". Deutsche schreiben möglicherweise "5 km" mit anderen Abstandskonventionen. Dieselbe Maßangabe kann je nach Gebietsschema und gewünschter Ausführlichkeit als "5 km", "5km" oder "5 kilometers" erscheinen. Einige Regionen verwenden metrische Einheiten, während andere imperiale Einheiten verwenden, aber die Formatierung von Einheiten variiert ebenfalls je nach Gebietsschema.

JavaScript stellt die Intl.NumberFormat-API bereit, um Maßangaben mit gebietsschema-gerechter Einheitenformatierung zu formatieren. Diese Lektion erklärt, wie Sie Maßangaben wie Entfernung, Gewicht, Temperatur, Volumen und Geschwindigkeit mit der korrekten Einheitendarstellung für jedes Gebietsschema formatieren.

Maßangaben benötigen Einheiten für den 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 denselben Messungstyp 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 verwendete Einheitensystem so formatieren, dass es den Erwartungen der Benutzer entspricht.

Einheiten mit Intl.NumberFormat formatieren

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

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

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

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

Die unit-Option akzeptiert standardisierte Einheiten-Identifikatoren. Diese Identifikatoren verwenden kleingeschriebene Wörter, die durch Bindestriche getrennt sind. Gängige Identifikatoren umfassen 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));
// Output: "5 km"

console.log(weightFormatter.format(10));
// Output: "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 welchem Einheiten-Identifikator gehört.

Locale bestimmt die Einheitenformatierung

Der Locale-Parameter steuert, wie Einheiten formatiert werden, einschließlich Abstände, 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));
// Output: "5 km"

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

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

Während Kilometer in verschiedenen Locales ähnliche Abkürzungen verwenden, variieren Abstands- und Trennzeichenkonventionen. Die Intl-API behandelt diese locale-spezifischen Formatierungsregeln automatisch.

Ausführlichkeit der Einheitenanzeige steuern

Die unitDisplay-Option 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 short-Format verwendet Standardabkürzungen wie "km" oder "lb". Das long-Format verwendet vollständige Einheitennamen wie "Kilometer" oder "Pfund". Das narrow-Format verwendet minimale Anzeige mit reduzierten oder keinen Abständen. Der Standardwert ist short, wenn Sie unitDisplay nicht angeben.

Das Gebietsschema beeinflusst, wie Einheiten in Langform erscheinen. Vollständige Einheitennamen werden übersetzt und an die Grammatikregeln jeder 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"

Jedes Gebietsschema liefert die entsprechende Übersetzung und grammatikalische Form für den Einheitennamen.

Gewichtsmessungen formatieren

Gewichtsmessungen verwenden Einheitenkennungen wie pound, kilogram, ounce und gram. Diese Kennungen funktionieren genauso 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 verwenden.

Temperaturmessungen formatieren

Temperaturmessungen verwenden Einheitenkennungen 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 Einheitenkennungen wie liter, gallon, milliliter und fluid-ounce. Diese funktionieren wie andere Einheitentypen.

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 gebietsschemaspezifischer 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"

Das britische Englisch-Gebietsschema 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. Kraftstoffverbrauchsmessungen wie Liter pro 100 Kilometer verwenden ebenfalls zusammengesetzte Einheiten.

Zusammengesetzte Einheitenbezeichner 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 Einheitenteile kombiniert.

Die Langform zeigt zusammengesetzte Einheiten mit vollständigen Namen und gebietsschemaspezifischen 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 Einheitenphrase unter Verwendung der korrekten Grammatik für das Gebietsschema.

Verfügbare Einheitenbezeichner abrufen

Die Methode Intl.supportedValuesOf() gibt ein Array aller Einheitenbezeichner zurück, die in Ihrer JavaScript-Umgebung unterstützt werden. Diese Methode nimmt die Zeichenkette 'unit' als Argument.

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

console.log(units);
// Output: Array of unit identifiers like:
// ["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 zur 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 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);
// Output: true

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

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

Mit Zahlenformatierungsoptionen kombinieren

Einheitenformatierer unterstützen dieselben Zahlenformatierungsoptionen wie andere Intl.NumberFormat-Stile. Sie können Dezimalstellen, signifikante Ziffern und andere numerische Eigenschaften steuern.

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

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

console.log(formatter.format(5.5));
// Output: "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));
// Output: "12,345.67 km"

Alle standardmäßigen Zahlenformatierungsfunktionen funktionieren mit der Einheitenformatierung.

Messungen für das Gebietsschema des Benutzers formatieren

Anstatt ein bestimmtes Gebietsschema fest zu codieren, können Sie die Spracheinstellungen des Browsers des Benutzers verwenden. Die Eigenschaft navigator.language gibt das bevorzugte Gebietsschema des Benutzers zurück.

const userLocale = navigator.language;

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

console.log(formatter.format(5));
// Output varies by user's locale

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

Messungen in Anwendungen anzeigen

Sie können Unit-Formatter überall dort verwenden, wo Sie Messungen für Benutzer anzeigen. Dazu gehören Fitness-Anwendungen, die Distanz 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);
// Displays: "5.2 km" (or locale equivalent)

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

Unit-Formatter wiederverwenden

Das Erstellen einer neuen Intl.NumberFormat-Instanz erfordert das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Messungen mit derselben Locale und Einheit formatieren, erstellen Sie den Formatter einmal und verwenden Sie 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));
});
// Output:
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"

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