Signatur
Beschreibung
formatRangeToParts() ist das Gegenstück zu formatRange(), so wie formatToParts() das Gegenstück zu format() ist. Statt einer fertigen Zeichenkette wie "$3 – $5" erhältst du ein Array von Objekten. Jedes Objekt beschreibt ein einzelnes Teilstück: Währungssymbol, Ganzzahlteil, Dezimaltrennzeichen, Bereichstrenner usw.
Jedes Teilstück hat drei Eigenschaften:
type: die Art des Teilstücks, z. B."integer","group","decimal","fraction","currency","literal","percentSign","unit","compact","minusSign","plusSign","exponentSeparator","exponentInteger"oder"approximatelySign".value: der tatsächlich ausgegebene Text dieses Teilstücks.source:"startRange","endRange"oder"shared". Daran erkennst du, ob das Teilstück zum Startwert, zum Endwert oder zu beiden gehört (z. B. ein gemeinsames Währungssymbol oder der Bereichstrenner).
Die Methode eignet sich, wenn du Preis- oder Messbereiche individuell gestalten willst. Beispiele: Start- und Endwert unterschiedlich hervorheben, nur die Ziffern fett setzen oder den Bereichstrenner austauschen. Die locale-typische Reihenfolge und Zeichensetzung bleibt dabei erhalten. Die Zeichenkette musst du also nicht selbst zusammenbauen oder zerlegen.
Wenn Start- und Endwert nach dem Runden gleich sind, fasst die Engine sie zusammen. Dann gehören alle Teilstücke zu "shared", und oft steht ein "approximatelySign" (z. B. ~) davor.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $startRange Pflicht | number | bigint | string | Startwert des Bereichs. Zeichenketten werden als exakte Dezimalzahl gelesen, ohne Umweg über Number. So bleibt die Genauigkeit auch bei sehr großen Werten erhalten. |
|
| $endRange Pflicht | number | bigint | string | Endwert des Bereichs. Es gelten dieselben Regeln wie bei startRange. |
Rückgabewert
value-Werte ergeben genau die Zeichenkette von formatRange(startRange, endRange).Beispiele
Grundlegende Zerlegung eines Preisbereichs
const nf = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
});
console.log(nf.formatRange(3, 5));
console.log(nf.formatRangeToParts(3, 5));Zusammengefasster Bereich nach dem Runden
const nf = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
});
// 2.9 und 3.1 werden beide zu 3 gerundet
const parts = nf.formatRangeToParts(2.9, 3.1);
console.log(parts.map(({ type, value, source }) => `${type}:${value}:${source}`));Start- und Endwert als HTML hervorheben
const escapeHtml = (s) =>
s.replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]));
const formatPriceRange = (min, max, locale = "de-DE") => {
const nf = new Intl.NumberFormat(locale, { style: "currency", currency: "EUR" });
return nf
.formatRangeToParts(min, max)
.map(({ value, source }) => {
const text = escapeHtml(value);
return source === "shared" ? text : `<strong class="${source}">${text}</strong>`;
})
.join("");
};
document.querySelector("#preis").innerHTML = formatPriceRange(19.99, 49.5);Nur die Zahlenteile des Endwerts herausziehen
const nf = new Intl.NumberFormat("en-US", { notation: "compact" });
const endOnly = nf
.formatRangeToParts(1200, 3_400_000)
.filter((p) => p.source === "endRange")
.map((p) => p.value)
.join("");
console.log(nf.formatRange(1200, 3_400_000));
console.log(endOnly);