Intl.DurationFormat.prototype.formatToParts() — Methode · JavaScript-Referenz

Signatur

Intl.DurationFormat.prototype.formatToParts(duration)

Beschreibung

formatToParts() erzeugt denselben sprachabhängigen Text wie Intl.DurationFormat.prototype.format(). Statt eines fertigen Strings bekommst du aber ein Array von Objekten. Jedes Objekt beschreibt ein Stück der Ausgabe, etwa eine Zahl, einen Einheitennamen oder ein Trennzeichen. Fügt man alle value-Felder aneinander, entsteht genau der String, den format() liefern würde.

Die Methode ist nützlich, wenn einzelne Teile einer Dauer unterschiedlich dargestellt werden sollen. Typische Fälle: Zahlen fett setzen, Einheiten in eigene -Elemente packen, Trennzeichen austauschen oder nur bestimmte Einheiten weiterverarbeiten. Die Lokalisierung (Reihenfolge, Pluralformen, Trennzeichen) übernimmt dabei weiter die Intl-API.

Jedes Teil-Objekt hat die Eigenschaften type und value. Mögliche Werte für type sind "integer", "group", "decimal", "fraction", "minusSign", "unit" und "literal". Teile, die zu einer bestimmten Zeiteinheit gehören, haben zusätzlich die Eigenschaft unit im Singular (z. B. "hour", "minute"). Trennzeichen zwischen zwei Einheiten, etwa ", ", haben keine unit.

Parameter

Name	Typ	Default	Beschreibung
$duration Pflicht	Object \| Temporal.Duration		Ein Objekt mit mindestens einer der Eigenschaften `years`, `months`, `weeks`, `days`, `hours`, `minutes`, `seconds`, `milliseconds`, `microseconds` und `nanoseconds`. Alle Werte müssen ganze Zahlen sein und dasselbe Vorzeichen haben. Ein `Temporal.Duration`-Objekt funktioniert ebenfalls.

Rückgabewert

Typ

Array<{ type: string, value: string, unit?: string }>

Beschreibung

Ein Array von Teil-Objekten. Die aneinandergehängten value-Felder ergeben genau den String von format().

Beispiele

Grundlegende Zerlegung einer Dauer

const df = new Intl.DurationFormat("en", { style: "long" });
const parts = df.formatToParts({ hours: 7, minutes: 8, seconds: 30 });
console.log(parts);

[ { type: "integer", value: "7", unit: "hour" }, { type: "literal", value: " ", unit: "hour" }, { type: "unit", value: "hours", unit: "hour" }, { type: "literal", value: ", " }, { type: "integer", value: "8", unit: "minute" }, { type: "literal", value: " ", unit: "minute" }, { type: "unit", value: "minutes", unit: "minute" }, { type: "literal", value: ", " }, { type: "integer", value: "30", unit: "second" }, { type: "literal", value: " ", unit: "second" }, { type: "unit", value: "seconds", unit: "second" } ]

Zahlen in HTML hervorheben (mit Escaping)

const escapeHtml = (s) =>
  s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);

const df = new Intl.DurationFormat("en", { style: "long" });
const html = df
  .formatToParts({ hours: 2, minutes: 15 })
  .map(({ type, value }) =>
    type === "integer" ? `<strong>${escapeHtml(value)}</strong>` : escapeHtml(value)
  )
  .join("");

console.log(html);

2 hours, 15 minutes

Digitale Anzeige: Teile nach Einheit auswerten

const df = new Intl.DurationFormat("en", { style: "digital" });
const parts = df.formatToParts({ hours: 1, minutes: 5, seconds: 3 });

// Nur die Zahlen je Einheit sammeln
const values = Object.fromEntries(
  parts
    .filter((p) => p.type === "integer")
    .map((p) => [p.unit, p.value])
);

console.log(parts.map((p) => p.value).join(""));
console.log(values);

1:05:03 { hour: "1", minute: "05", second: "03" }

Siehe auch

Intl.DateTimeFormat.prototype.formatToParts() Intl.DurationFormat.prototype.format() Intl.ListFormat.prototype.formatToParts() Intl.NumberFormat.prototype.formatToParts() Intl.RelativeTimeFormat.prototype.formatToParts()