Wie formatiert man Listen von Messungen mit Einheiten?

Einführung

Anwendungen, die Messungen anzeigen, müssen oft mehrere Werte zusammen darstellen. Eine Fitness-App könnte Zwischenzeiten als "5 km, 10 km, 15 km" anzeigen. Eine Wetter-App könnte Temperaturen über die Woche als "20°C, 22°C, 25°C, 23°C" darstellen. Ein Rezept könnte Zutatenmengen als "2 Tassen, 1 Esslöffel, 3 Teelöffel" auflisten.

Diese Listen kombinieren zwei Internationalisierungsherausforderungen. Erstens benötigt jede Messung eine für die Locale angemessene Einheitenformatierung. Zweitens benötigt die Liste selbst korrekte Interpunktion und Trennzeichen für die Zielsprache. Englisch verwendet Kommas und manchmal Konjunktionen wie "and". Andere Sprachen verwenden unterschiedliche Trennzeichen und folgen anderen grammatikalischen Regeln.

JavaScript bietet zwei APIs, um dieses Problem zu lösen. Intl.NumberFormat formatiert einzelne Messungen mit Einheiten. Intl.ListFormat kombiniert mehrere Werte zu einer grammatikalisch korrekten Liste. Diese Lektion erklärt, wie man beide APIs zusammen verwendet, um Listen von Messungen zu formatieren, die den Benutzererwartungen in jeder Locale entsprechen.

Listen von Messungen erfordern zwei Formatierungsschritte

Wenn Sie eine Liste von Messungen formatieren, können Sie keinen der Formatierungsschritte überspringen. Wenn Sie die Liste formatieren, ohne die Messungen zu formatieren, erhalten Sie für die Locale angemessene Trennzeichen, aber eine falsche Einheitenanzeige. Wenn Sie die Messungen formatieren, ohne die Liste zu formatieren, erhalten Sie korrekte Einheiten, aber falsche Trennzeichen.

const distances = [5, 10, 15];

// Falsch: Liste formatiert, aber nicht die Messungen
console.log(distances.join(', '));
// Ausgabe: "5, 10, 15" (fehlende Einheiten)

// Falsch: Messungen formatiert, aber nicht die Liste
const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});
console.log(distances.map(d => formatter.format(d)).join(', '));
// Ausgabe: "5 km, 10 km, 15 km" (hartcodiertes Komma könnte für einige Locales falsch sein)

Der richtige Ansatz formatiert zuerst die Messungen und dann das resultierende Array von Strings als Liste.

const distances = [5, 10, 15];

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

const formattedMeasurements = distances.map(d => numberFormatter.format(d));
// Ergebnis: ["5 km", "10 km", "15 km"]

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedMeasurements));
// Ausgabe: "5 km, 10 km, 15 km"

Dieses Muster funktioniert für jeden Messungstyp und jede Locale. Sie formatieren jede Messung mit ihrer Einheit und formatieren dann das Array der formatierten Strings als Liste.

Verwende type unit für Messlisten

Der Konstruktor Intl.ListFormat akzeptiert eine type-Option, die steuert, wie Listenelemente kombiniert werden. Die Option type: 'unit' formatiert Listen gemäß den Konventionen für technische und wissenschaftliche Daten.

const measurements = ['5 km', '10 km', '15 km'];

const unitList = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(unitList.format(measurements));
// Output: "5 km, 10 km, 15 km"

Listen mit type: 'unit' lassen Konjunktionen wie "und" oder "oder" weg. Sie verwenden einfache Trennzeichen zwischen den Elementen. Dies entspricht der üblichen Schreibweise von Messungen in technischen Kontexten.

Vergleiche dies mit type: 'conjunction', das vor dem letzten Element "and" hinzufügt.

const measurements = ['5 km', '10 km', '15 km'];

const conjunctionList = new Intl.ListFormat('en-US', {
  type: 'conjunction'
});

console.log(conjunctionList.format(measurements));
// Output: "5 km, 10 km, and 15 km"

Die Konjunktionsform liest sich in Prosa natürlich, sieht aber in technischen Kontexten falsch aus. Verwende bei der Anzeige mehrerer Messungen type: 'unit', um den Standardkonventionen für wissenschaftliches und technisches Schreiben zu folgen.

Formatiere Entfernungsmessungen in Listen

Entfernungsmessungen verwenden Einheitenkennungen wie kilometer, meter, mile und foot. Nach der Formatierung jeder Entfernung mit ihrer Einheit werden sie zu einer Liste kombiniert.

const distances = [5, 10, 15, 20];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output: "5 km, 10 km, 15 km, 20 km"

Das gleiche Muster funktioniert für Meilen.

const distances = [3, 6, 9];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output: "3 mi, 6 mi, 9 mi"

Du kannst Entfernungen mit Dezimalstellen formatieren, indem du Zahlenformatierungsoptionen festlegst.

const distances = [5.2, 10.7, 15.3];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output: "5.2 km, 10.7 km, 15.3 km"

Der Zahlenformatierer übernimmt die Rundung und Dezimalstellen, bevor der Listenformatierer die Werte kombiniert.

Gewichtsmessungen in Listen formatieren

Gewichtsmessungen folgen dem gleichen Muster mit Einheitskennungen wie kilogram, pound, ounce und gram.

const weights = [50, 75, 100];

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

const formattedWeights = weights.map(w => numberFormatter.format(w));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedWeights));
// Output: "50 kg, 75 kg, 100 kg"

Sie können Gewicht auch in Pfund anzeigen.

const weights = [110, 165, 220];

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

const formattedWeights = weights.map(w => numberFormatter.format(w));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedWeights));
// Output: "110 lb, 165 lb, 220 lb"

Der Zahlenformatierer verwendet automatisch die korrekte Abkürzung für jede Einheit.

Temperaturmessungen in Listen formatieren

Temperaturmessungen verwenden Einheitskennungen wie celsius und fahrenheit.

const temperatures = [20, 22, 25, 23, 21];

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

const formattedTemperatures = temperatures.map(t => numberFormatter.format(t));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedTemperatures));
// Output: "20°C, 22°C, 25°C, 23°C, 21°C"

Temperaturformatierer fügen automatisch Gradsymbole in der Ausgabe ein.

Fahrenheit funktioniert auf die gleiche Weise.

const temperatures = [68, 72, 77, 73, 70];

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

const formattedTemperatures = temperatures.map(t => numberFormatter.format(t));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedTemperatures));
// Output: "68°F, 72°F, 77°F, 73°F, 70°F"

Das Muster bleibt bei verschiedenen Messtypen identisch. Nur die Einheitskennung ändert sich.

Volumenmaße in Listen formatieren

Volumenmaße verwenden Einheitsbezeichnungen wie liter, gallon, milliliter und fluid-ounce.

const volumes = [1, 2, 3];

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

const formattedVolumes = volumes.map(v => numberFormatter.format(v));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedVolumes));
// Output: "1 L, 2 L, 3 L"

Volumenmaße funktionieren mit Dezimalwerten.

const volumes = [0.5, 1.5, 2.5];

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

const formattedVolumes = volumes.map(v => numberFormatter.format(v));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedVolumes));
// Output: "0.5 L, 1.5 L, 2.5 L"

Der Number-Formatter verarbeitet die Dezimalpräzision, bevor der List-Formatter die Werte verarbeitet.

Geschwindigkeitsmaße in Listen formatieren

Geschwindigkeitsmaße verwenden zusammengesetzte Einheiten wie kilometer-per-hour und mile-per-hour.

const speeds = [50, 75, 100];

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

const formattedSpeeds = speeds.map(s => numberFormatter.format(s));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedSpeeds));
// Output: "50 km/h, 75 km/h, 100 km/h"

Meilen pro Stunde funktionieren auf die gleiche Weise.

const speeds = [30, 45, 60];

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

const formattedSpeeds = speeds.map(s => numberFormatter.format(s));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedSpeeds));
// Output: "30 mph, 45 mph, 60 mph"

Zusammengesetzte Einheiten werden automatisch mit den korrekten Abkürzungen und Trennzeichen formatiert.

Locale bestimmt das Format der Listentrennzeichen

Der Locale-Parameter steuert, wie Listenelemente getrennt und mit Satzzeichen versehen werden. Verschiedene Sprachen verwenden unterschiedliche Konventionen für die Listenformatierung.

const distances = [5, 10, 15];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const enList = new Intl.ListFormat('en-US', {
  type: 'unit'
});

const frList = new Intl.ListFormat('fr-FR', {
  type: 'unit'
});

const deList = new Intl.ListFormat('de-DE', {
  type: 'unit'
});

console.log(enList.format(formattedDistances));
// Output: "5 km, 10 km, 15 km"

console.log(frList.format(formattedDistances));
// Output: "5 km, 10 km, 15 km"

console.log(deList.format(formattedDistances));
// Output: "5 km, 10 km, 15 km"

Während Kilometer-Abkürzungen in diesen Locales ähnlich bleiben, können Abstands- und Trennzeichenkonventionen variieren. Die Intl.ListFormat-API verarbeitet diese lokalisierungsspezifischen Formatierungsregeln automatisch.

Einige Sprachen verwenden unterschiedliche Trennzeichen oder Interpunktionsmuster für Listen. Die API stellt sicher, dass Ihre Listen den korrekten Konventionen für jede Locale folgen, ohne dass Sie die spezifischen Regeln kennen müssen.

Passe das Zahlenformat an das Listenformat an

Bei der Formatierung von Messwertlisten sollte für den Zahlenformatierer und den Listenformatierer dasselbe Gebietsschema verwendet werden. Dies gewährleistet eine einheitliche Formatierung in der gesamten Ausgabe.

const distances = [1000, 2000, 3000];

const locale = 'de-DE';

const numberFormatter = new Intl.NumberFormat(locale, {
  style: 'unit',
  unit: 'meter'
});

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat(locale, {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output: "1.000 m, 2.000 m, 3.000 m"

Die deutsche Formatierung verwendet Punkte als Tausendertrennzeichen. Sowohl der Zahlenformatierer als auch der Listenformatierer verwenden deutsche Konventionen, da sie dasselbe Gebietsschema teilen.

Die Verwendung unterschiedlicher Gebietsschemas für Zahlen- und Listenformatierung führt zu inkonsistenten Ausgaben.

const distances = [1000, 2000, 3000];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output: "1.000 m, 2.000 m, 3.000 m"

Dies erzeugt eine gemischte Formatierung, bei der Zahlen deutsche Konventionen verwenden, die Liste jedoch englische Konventionen. Verwenden Sie immer dasselbe Gebietsschema für beide Formatierer.

Steuerung des Listendarstellungsstils

Die Option style steuert, wie ausführlich die Listenformatierung erscheint. Die Option akzeptiert drei Werte: "long", "short" und "narrow".

const measurements = ['5 km', '10 km', '15 km'];

const longList = new Intl.ListFormat('en-US', {
  type: 'unit',
  style: 'long'
});

const shortList = new Intl.ListFormat('en-US', {
  type: 'unit',
  style: 'short'
});

const narrowList = new Intl.ListFormat('en-US', {
  type: 'unit',
  style: 'narrow'
});

console.log(longList.format(measurements));
// Output: "5 km, 10 km, 15 km"

console.log(shortList.format(measurements));
// Output: "5 km, 10 km, 15 km"

console.log(narrowList.format(measurements));
// Output: "5 km 10 km 15 km"

Die Stile long und short erzeugen ähnliche Ausgaben für Einheitenlisten auf Englisch. Der Stil narrow verwendet minimale Abstände und lässt Trennzeichen zwischen Elementen weg.

Verschiedene Gebietsschemas zeigen mehr Variation zwischen den Stilen. Das Gebietsschema bestimmt die genaue Formatierung für jede Stilebene.

Kombinieren mit langen Einheitennamen

Sie können Messungen mit vollständigen Einheitennamen anstelle von Abkürzungen formatieren, indem Sie unitDisplay: 'long' im Number-Formatter setzen.

const distances = [5, 10, 15];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output: "5 kilometers, 10 kilometers, 15 kilometers"

Der Number-Formatter behandelt Singular- und Pluralformen automatisch. Der List-Formatter kombiniert die formatierten Strings unabhängig davon, ob sie Abkürzungen oder vollständige Namen verwenden.

const distances = [1, 5];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output: "1 kilometer, 5 kilometers"

Der Number-Formatter verwendet "kilometer" für 1 und "kilometers" für 5. Der List-Formatter kombiniert sie mit entsprechenden Trennzeichen.

Formatter wiederverwenden für bessere Performance

Das Erstellen von Intl.NumberFormat- und Intl.ListFormat-Instanzen beinhaltet das Laden von Locale-Daten und die Verarbeitung von Optionen. Wenn Sie mehrere Listen von Messungen formatieren, erstellen Sie die Formatter einmal und verwenden Sie sie wieder.

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

const listFormatter = new Intl.ListFormat('en-US', {
  type: 'unit'
});

const distanceLists = [
  [5, 10, 15],
  [20, 25, 30],
  [35, 40, 45]
];

distanceLists.forEach(distances => {
  const formattedDistances = distances.map(d => numberFormatter.format(d));
  console.log(listFormatter.format(formattedDistances));
});
// Output:
// "5 km, 10 km, 15 km"
// "20 km, 25 km, 30 km"
// "35 km, 40 km, 45 km"

Dieses Muster erstellt jeden Formatter einmal und verwendet ihn mehrfach. Der Performanceunterschied wird signifikant, wenn viele Listen formatiert werden.

Erstellen einer wiederverwendbaren Formatierungsfunktion

Sie können das zweistufige Formatierungsmuster in einer wiederverwendbaren Funktion kapseln.

function formatMeasurementList(values, locale, unit) {
  const numberFormatter = new Intl.NumberFormat(locale, {
    style: 'unit',
    unit: unit
  });

  const formattedValues = values.map(v => numberFormatter.format(v));

  const listFormatter = new Intl.ListFormat(locale, {
    type: 'unit'
  });

  return listFormatter.format(formattedValues);
}

console.log(formatMeasurementList([5, 10, 15], 'en-US', 'kilometer'));
// Output: "5 km, 10 km, 15 km"

console.log(formatMeasurementList([50, 75, 100], 'en-US', 'kilogram'));
// Output: "50 kg, 75 kg, 100 kg"

console.log(formatMeasurementList([20, 22, 25], 'en-US', 'celsius'));
// Output: "20°C, 22°C, 25°C"

Diese Funktion verarbeitet jeden Messtyp und jede Locale. Sie können sie erweitern, um zusätzliche Formatierungsoptionen zu akzeptieren.

function formatMeasurementList(values, locale, unit, options = {}) {
  const numberFormatter = new Intl.NumberFormat(locale, {
    style: 'unit',
    unit: unit,
    ...options
  });

  const formattedValues = values.map(v => numberFormatter.format(v));

  const listFormatter = new Intl.ListFormat(locale, {
    type: 'unit'
  });

  return listFormatter.format(formattedValues);
}

console.log(formatMeasurementList(
  [5.123, 10.789, 15.456],
  'en-US',
  'kilometer',
  { maximumFractionDigits: 1 }
));
// Output: "5.1 km, 10.8 km, 15.5 km"

console.log(formatMeasurementList(
  [1, 5, 10],
  'en-US',
  'kilometer',
  { unitDisplay: 'long' }
));
// Output: "1 kilometer, 5 kilometers, 10 kilometers"

Die Funktion übergibt zusätzliche Optionen an den Zahlenformatierer, wodurch die Kontrolle über Dezimalstellen, Einheitenanzeige und andere Formatierungseinstellungen ermöglicht wird.

Listen 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 distances = [5, 10, 15];

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

const formattedDistances = distances.map(d => numberFormatter.format(d));

const listFormatter = new Intl.ListFormat(userLocale, {
  type: 'unit'
});

console.log(listFormatter.format(formattedDistances));
// Output variiert je nach Locale des Benutzers

Dieser Ansatz zeigt Messlisten entsprechend den Formatierungserwartungen jedes Benutzers an. Verschiedene Benutzer sehen die gleichen Daten, formatiert nach ihren Locale-Konventionen.

Messlisten in Anwendungen anzeigen

Sie können dieses Muster überall dort verwenden, wo Sie Benutzern mehrere Messungen anzeigen. Dazu gehören Fitness-Anwendungen, die Zwischenzeiten anzeigen, Wetter-Anwendungen, die Temperaturvorhersagen anzeigen, Rezept-Anwendungen, die Zutatenmengen anzeigen, und wissenschaftliche Anwendungen, die experimentelle Daten anzeigen.

const splitTimes = [5, 10, 15, 20];

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

const formattedTimes = splitTimes.map(t => numberFormatter.format(t));

const listFormatter = new Intl.ListFormat(navigator.language, {
  type: 'unit'
});

const result = listFormatter.format(formattedTimes);

document.getElementById('split-times').textContent = result;
// Displays: "5 km, 10 km, 15 km, 20 km" (or locale equivalent)

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.