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 Zutatmengen als „2 Tassen, 1 Esslöffel, 3 Teelöffel" auflisten.

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

JavaScript bietet zwei APIs zur Lösung dieses Problems. Intl.NumberFormat formatiert einzelne Messungen mit Einheiten. Intl.ListFormat kombiniert mehrere Werte zu einer grammatikalisch korrekten Liste. Diese Lektion erklärt, wie Sie beide APIs zusammen verwenden, um Listen von Messungen zu formatieren, die den Benutzererwartungen in jedem Gebietsschema entsprechen.

Listen von Messungen erfordern zwei Formatierungsschritte

Wenn Sie eine Liste von Messungen formatieren, können Sie keinen der beiden Formatierungsschritte überspringen. Wenn Sie die Liste ohne Formatierung der Messungen formatieren, erhalten Sie gebietsschema-gerechte Trennzeichen, aber eine falsche Einheitendarstellung. Wenn Sie die Messungen ohne Formatierung der Liste formatieren, erhalten Sie korrekte Einheiten, aber falsche Trennzeichen.

const distances = [5, 10, 15];

// Wrong: list formatted but not measurements
console.log(distances.join(', '));
// Output: "5, 10, 15" (missing units)

// Wrong: measurements formatted but not list
const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});
console.log(distances.map(d => formatter.format(d)).join(', '));
// Output: "5 km, 10 km, 15 km" (hardcoded comma might be wrong for some locales)

Der korrekte Ansatz formatiert zuerst die Messungen und formatiert 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));
// Result: ["5 km", "10 km", "15 km"]

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

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

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

Verwenden Sie den Typ unit für Messlisten

Der Intl.ListFormat-Konstruktor akzeptiert eine type-Option, die steuert, wie Listenelemente kombiniert werden. Die type: 'unit'-Option formatiert Listen nach 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.

Vergleichen Sie dies mit type: 'conjunction', das vor dem letzten Element ein „und" 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 Fließtext natürlich, wirkt jedoch in technischen Kontexten inkorrekt. Verwenden Sie bei der Anzeige mehrerer Messungen type: 'unit', um den Standardkonventionen für wissenschaftliches und technisches Schreiben zu folgen.

Formatieren Sie Entfernungsmessungen in Listen

Entfernungsmessungen verwenden Einheitenkennungen wie kilometer, meter, mile und foot. Nachdem Sie jede Entfernung mit ihrer Einheit formatiert haben, kombinieren Sie sie zu einer Liste.

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"

Sie können Entfernungen mit Dezimalstellen formatieren, indem Sie Zahlenformatierungsoptionen festlegen.

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 verarbeitet Rundung und Dezimalstellen, bevor der Listenformatierer die Werte kombiniert.

Formatieren Sie Gewichtsmessungen in Listen

Gewichtsmessungen folgen dem gleichen Muster unter Verwendung von Einheitenkennungen 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 das Gewicht stattdessen 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.

Formatieren Sie Temperaturmessungen in Listen

Temperaturmessungen verwenden Einheitenkennungen 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 die 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 Einheitenkennung ändert sich.

Volumenmessungen in Listen formatieren

Volumenmessungen verwenden Einheitenkennungen 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"

Volumenmessungen 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 Zahlenformatierer verarbeitet die Dezimalpräzision, bevor der Listenformatierer die Werte verarbeitet.

Geschwindigkeitsmessungen in Listen formatieren

Geschwindigkeitsmessungen 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 funktioniert 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 Listentrennzeichenformat

Der Locale-Parameter steuert, wie Listenelemente getrennt und interpunktiert 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 Kilometerabkürzungen in diesen Locales ähnlich bleiben, können Abstands- und Trennzeichenkonventionen variieren. Die Intl.ListFormat-API verarbeitet diese locale-spezifischen 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.

Zahlen-Locale mit Listen-Locale abgleichen

Verwenden Sie beim Formatieren von Messwertlisten dieselbe Locale sowohl für den Zahlenformatierer als auch für den Listenformatierer. Dies gewährleistet eine konsistente 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 dieselbe Locale verwenden.

Die Verwendung unterschiedlicher Locales für die Zahlen- und Listenformatierung führt zu inkonsistenter Ausgabe.

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 dieselbe Locale für beide Formatierer.

Listendarstellungsstil steuern

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 im Englischen. Der Stil narrow verwendet minimale Abstände und lässt Trennzeichen zwischen Elementen weg.

Verschiedene Locales zeigen mehr Variation zwischen den Stilen. Die Locale bestimmt die genaue Formatierung für jede Stilebene.

Mit langen Einheitennamen kombinieren

Sie können Messungen mit vollständigen Einheitennamen anstelle von Abkürzungen formatieren, indem Sie unitDisplay: 'long' im Zahlenformatierer 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 Zahlenformatierer behandelt Singular- und Pluralformen automatisch. Der Listenformatierer 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 Zahlenformatierer verwendet "Kilometer" für 1 und "Kilometer" für 5. Der Listenformatierer kombiniert sie mit entsprechenden Trennzeichen.

Formatierer 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 Formatierer 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 Leistungsunterschied wird signifikant, wenn viele Listen formatiert werden.

Wiederverwendbare Formatter-Funktion erstellen

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 Messungstyp 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 Number-Formatter und ermöglicht so die Kontrolle über Dezimalstellen, Einheitendarstellung und andere Formatierungseinstellungen.

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 navigator.language-Eigenschaft 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 varies by user's locale

Dieser Ansatz zeigt Messungslisten entsprechend den Formatierungserwartungen jedes Benutzers an. Verschiedene Benutzer sehen dieselben Daten gemäß ihren Locale-Konventionen formatiert.

Messungslisten in Anwendungen anzeigen

Sie können dieses Muster überall verwenden, wo Sie mehrere Messungen für Benutzer anzeigen. Dies umfasst Fitness-Anwendungen, die Zwischenzeiten anzeigen, Wetter-Anwendungen, die Temperaturvorhersagen anzeigen, Rezept-Anwendungen, die Zutatmengen 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 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.