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 Methode formatToParts() von Intl.NumberFormat Instanzen gibt ein Array von Objekten zurück, die jeweils einen Teil des formatierten Strings repräsentieren würden, der von format() zurückgegeben wird. Es ist nützlich, um benutzerdefinierte Strings aus den lokale-spezifischen Token zu erstellen.

Probieren Sie es aus

Syntax

formatToParts(number)

Parameter

number: Eine Number, BigInt, oder ein String, der formatiert werden soll. Strings werden auf die gleiche Weise wie bei der Zahlenumwandlung geparst, außer dass formatToParts() den genauen Wert verwendet, den der String repräsentiert, um einen Präzisionsverlust bei der impliziten Umwandlung in eine Zahl zu vermeiden.

Rückgabewert

Ein Array von Objekten, das die formatierte Zahl in Teilen enthält. Jedes Objekt hat zwei Eigenschaften, type und value, die jeweils einen String enthalten. Die String-Verkettung von value in der angegebenen Reihenfolge führt zum gleichen String wie format(). Der type kann einer der folgenden sein:

literal: Jeder String, der Teil des Formatmusters ist; zum Beispiel " ". Beachten Sie, dass gängige Token wie der Dezimaltrennzeichen oder die Plus-/Minuszeichen eigene Tokentypen haben.
integer: Der ganzzahlige Teil der Zahl oder ein Segment davon, wenn Gruppierung verwendet wird (gesteuert durch options.useGrouping).
group: Der Gruppentrennzeichen-String, wie ",". Nur vorhanden, wenn Gruppierung verwendet wird (gesteuert durch options.useGrouping).
decimal: Der Dezimaltrennzeichen-String, wie ".". Nur vorhanden, wenn fraction vorhanden ist.
fraction: Der bruchartige Teil der Zahl.
compact: Der kompakte Exponent, wie "M" oder "thousands". Nur vorhanden, wenn options.notation "compact" ist. Die Form ("short" oder "long") kann über options.compactDisplay gesteuert werden.
exponentSeparator: Der Exponententrennzeichen, wie "E". Nur vorhanden, wenn options.notation "scientific" oder "engineering" ist.
exponentMinusSign: Das Exponenten-Minuszeichen, wie "-". Nur vorhanden, wenn options.notation "scientific" oder "engineering" ist und der Exponent negativ ist.
exponentInteger: Der ganzzahlige Wert des Exponenten. Nur vorhanden, wenn options.notation "scientific" oder "engineering" ist.
nan: Ein String, der NaN repräsentiert, wie "NaN". Dies ist das einzige Token, das die Zahl selbst repräsentiert, wenn die Zahl NaN ist.
infinity: Ein String, der Infinity oder -Infinity repräsentiert, wie "∞". Dies ist das einzige Token, das die Zahl selbst repräsentiert, wenn die Zahl Infinity oder -Infinity ist.
plusSign: Das Pluszeichen, wie "+".
minusSign: Das Minuszeichen, wie "-".
percentSign: Das Prozentzeichen, wie "%". Nur vorhanden, wenn options.style "percent" ist.
unit: Der Einheitstring, wie "l" oder "litres". Nur vorhanden, wenn options.style "unit" ist. Die Form ("short", "narrow", oder "long") kann über options.unitDisplay gesteuert werden.
currency: Der Währungsstring, wie "$", "€", "Dollar", oder "Euro". Nur vorhanden, wenn options.style "currency" ist. Die Form ("code", "symbol", "narrowSymbol", oder "name") kann über options.currencyDisplay gesteuert werden.
unknown: Reserviert für jedes Token, das nicht als eines der oben genannten erkannt wird; sollte selten auftreten.

Beispiele

Verwendung von formatToParts()

Die Methode format() 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 €"

In vielen Benutzeroberflächen möchten Sie jedoch möglicherweise die Formatierung dieses Strings anpassen oder ihn mit anderen Texten durchsetzen. Die Methode formatToParts() produziert dieselben Informationen in Teilen:

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

Jetzt sind die Informationen separat verfügbar und können auf eine benutzerdefinierte Weise formatiert und neu verkettet werden. Zum Beispiel durch Verwendung von Array.prototype.map(), Pfeilfunktionen, einer switch-Anweisung, Template-Strings und Array.prototype.join(), um zusätzliche Markup für bestimmte Komponenten einzufü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

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

Browser-Kompatibilität

BCD tables only load in the browser