Intl.NumberFormat.prototype.formatToParts()

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2019 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Methode formatToParts() von Intl.NumberFormat-Instanzen gibt ein Array von Objekten zurück, die jeweils einen Teil der formatierten Zeichenfolge darstellen, die format() zurückgeben würde. Sie ist nützlich, um aus den gebietsschemaspezifischen Bestandteilen eigene Zeichenfolgen zusammenzusetzen.

Probieren Sie es aus

const amount = 654321.987;
const options = { style: "currency", currency: "USD" };
const numberFormat = new Intl.NumberFormat("en-US", options);

const parts = numberFormat.formatToParts(amount);
const partValues = parts.map((p) => p.value);

console.log(partValues);
// Expected output: Array ["$", "654", ",", "321", ".", "99"]

Syntax

formatToParts(number)

Parameter

number: Ein Number, BigInt oder eine Zeichenfolge, die formatiert werden soll. Zeichenfolgen werden wie bei der Zahlenkonvertierung interpretiert. formatToParts() verwendet jedoch den exakten Wert, den die Zeichenfolge darstellt, und vermeidet so einen Präzisionsverlust bei der impliziten Umwandlung in eine Zahl.

Rückgabewert

Ein Array von Objekten, die die Bestandteile der formatierten Zahl enthalten. Jedes Objekt hat zwei Eigenschaften, type und value, die jeweils eine Zeichenfolge enthalten. Werden die value-Zeichenfolgen in der angegebenen Reihenfolge verkettet, ergibt sich dieselbe Zeichenfolge wie bei format(). type kann einen der folgenden Werte haben:

literal: Eine beliebige Zeichenfolge, die Teil des Formatmusters ist, zum Beispiel " ". Häufige Bestandteile wie das Dezimaltrennzeichen oder die Plus- und Minuszeichen haben eigene Token-Typen.
integer: Der ganzzahlige Teil der Zahl oder, bei Verwendung einer Zifferngruppierung, ein Abschnitt davon (gesteuert durch options.useGrouping).
group: Das Trennzeichen für Zifferngruppen, zum Beispiel ",". Nur vorhanden, wenn eine Zifferngruppierung verwendet wird (gesteuert durch options.useGrouping).
decimal: Das Dezimaltrennzeichen, zum Beispiel ".". Nur vorhanden, wenn fraction vorhanden ist.
fraction: Der Nachkommateil der Zahl.
compact: Der kompakte Exponent, zum Beispiel "M" oder "thousands". Nur vorhanden, wenn options.notation den Wert "compact" hat. Die Darstellungsform ("short" oder "long") kann über options.compactDisplay gesteuert werden.
exponentSeparator: Das Exponententrennzeichen, zum Beispiel "E". Nur vorhanden, wenn options.notation den Wert "scientific" oder "engineering" hat.
exponentMinusSign: Das Minuszeichen des Exponenten, zum Beispiel "-". Nur vorhanden, wenn options.notation den Wert "scientific" oder "engineering" hat und der Exponent negativ ist.
exponentInteger: Der ganzzahlige Wert des Exponenten. Nur vorhanden, wenn options.notation den Wert "scientific" oder "engineering" hat.
nan: Eine Zeichenfolge, die NaN darstellt, zum Beispiel "NaN". Wenn die Zahl NaN ist, ist dies der einzige Token, der die Zahl selbst darstellt.
infinity: Eine Zeichenfolge, die Infinity oder -Infinity darstellt, zum Beispiel "∞". Wenn die Zahl Infinity oder -Infinity ist, ist dies der einzige Token, der die Zahl selbst darstellt.
plusSign: Das Pluszeichen, zum Beispiel "+".
minusSign: Das Minuszeichen, zum Beispiel "-".
percentSign: Das Prozentzeichen, zum Beispiel "%". Nur vorhanden, wenn options.style den Wert "percent" hat.
unit: Die Zeichenfolge für die Einheit, zum Beispiel "l" oder "litres". Nur vorhanden, wenn options.style den Wert "unit" hat. Die Darstellungsform ("short", "narrow" oder "long") kann über options.unitDisplay gesteuert werden.
currency: Die Zeichenfolge für die Währung, zum Beispiel "$", "€", "Dollar" oder "Euro". Nur vorhanden, wenn options.style den Wert "currency" hat. Die Darstellungsform ("code", "symbol", "narrowSymbol" oder "name") kann über options.currencyDisplay gesteuert werden.
unknown: Für Tokens reserviert, die keinem der oben genannten Typen entsprechen; sollte nur selten vorkommen.

Beispiele

formatToParts() verwenden

Die Methode format() gibt lokalisierte Zeichenfolgen zurück, deren Bestandteile nicht direkt bearbeitet werden können:

const number = 3500;

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

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

In vielen Benutzeroberflächen möchten Sie die Formatierung dieser Zeichenfolge jedoch anpassen oder sie mit anderen Texten kombinieren. Die Methode formatToParts() liefert dieselben Informationen als einzelne Bestandteile:

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: "€" },
];

Die Informationen liegen nun getrennt vor und können individuell formatiert und wieder zusammengesetzt werden. Beispielsweise können Sie mit Array.prototype.map(), Pfeilfunktionen, einer switch-Anweisung, Template-Literalen und Array.prototype.join() zusätzliche Markup-Elemente für bestimmte Bestandteile einfügen.

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

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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden