Intl.NumberFormat.prototype.formatToParts()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Die formatToParts()-Methode von Instanzen des Intl.NumberFormat ermöglicht eine lokalisierungsbewusste Formatierung von Strings, die von diesem Intl.NumberFormat-Objekt erzeugt werden.

Syntax

formatToParts()
formatToParts(number)

Parameter

number Optional: Eine Number oder BigInt, die formatiert werden soll.

Rückgabewert

Ein Array von Objekten, das die formatierte Zahl in Teilen enthält.

Die formatToParts()-Methode ist nützlich für die benutzerdefinierte Formatierung von Zahlstrings. Sie gibt ein Array von Objekten zurück, das die lokalisierungsabhängigen Tokens enthält, aus denen benutzerdefinierte Strings erstellt werden können, während die lokalisierungsabhängigen Teile erhalten bleiben. Die Struktur, die die formatToParts()-Methode zurückgibt, sieht folgendermaßen aus:

[
  { type: "integer", value: "3" },
  { type: "group", value: "." },
  { type: "integer", value: "500" },
];

Mögliche Typen sind die folgenden:

compact: Der Exponent in „long“- oder „short“-Form, abhängig davon, wie compactDisplay (standardmäßig short) angegeben wird, wenn notation auf compact gesetzt ist.
currency: Der Währungsstring, wie etwa die Symbole „$“ und „€“ oder der Name „Dollar“, „Euro“, abhängig davon, wie currencyDisplay angegeben wird.
decimal: Der Dezimaltrennstring („.“).
exponentInteger: Der Exponent-Wert, wenn notation auf scientific oder engineering gesetzt ist.
exponentMinusSign: Der Exponent-Minuszeichen-String („-“).
exponentSeparator: Der Exponent-Trennzeichen, wenn notation auf scientific oder engineering gesetzt ist.
fraction: Der Bruchteil der Zahl.
group: Der Gruppentrennstring („,“).
infinity: Der Infinity String („∞“).
integer: Der ganzzahlige Teil der Zahl.
literal: Alle Literalstrings oder Leerzeichen in der formatierten Zahl.
minusSign: Der Minuszeichen-String („-“).
nan: Der NaN-String („NaN“).
plusSign: Der Pluszeichen-String („+“).
percentSign: Der Prozentzeichen-String („%“).
unit: Der Einheit-String, wie „l“ oder „litres“, abhängig davon, wie unitDisplay angegeben wird.
unknown: Der String für unknown-Typ-Ergebnisse.

Beispiele

Vergleich von `format` und `formatToParts`

NumberFormat gibt lokalisierte, undurchsichtige Strings aus, die nicht direkt manipuliert werden können:

const number = 3500;

const formatter = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
});

formatter.format(number);
// "3.500,00 €"

Jedoch besteht in vielen Benutzeroberflächen der Wunsch, die Formatierung dieses Strings anzupassen. Die formatToParts-Methode ermöglicht eine lokalisierungsbewusste Formatierung der von NumberFormat-Formatierern erzeugten Strings, indem sie den String in Teilen bereitstellt:

formatter.formatToParts(number);

// return value:
[
  { type: "integer", value: "3" },
  { type: "group", value: "." },
  { type: "integer", value: "500" },
  { type: "decimal", value: "," },
  { type: "fraction", value: "00" },
  { type: "literal", value: " " },
  { type: "currency", value: "€" },
];

Nun sind die Informationen getrennt verfügbar und können in einer angepassten Weise neu formatiert und wieder zusammengefügt werden. Beispielsweise durch Verwendung von Array.prototype.map(), Pfeilfunktionen, einem switch statement, Template Literals und Array.prototype.reduce().

const numberString = formatter
  .formatToParts(number)
  .map(({ type, value }) => {
    switch (type) {
      case "currency":
        return `<strong>${value}</strong>`;
      default:
        return value;
    }
  })
  .reduce((string, part) => string + part);

Dies wird die Währung fett darstellen, wenn die formatToParts()-Methode verwendet wird.

console.log(numberString);
// "3.500,00 <strong>€</strong>"

Spezifikationen

Specification
ECMAScript Internationalization API Specification # sec-intl.numberformat.prototype.formattoparts

Browser-Kompatibilität

BCD tables only load in the browser