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 lokalisierungsbezogene Formatierung von Zeichenfolgen, die von diesem Intl.NumberFormat-Objekt erzeugt werden.

Probieren Sie es aus

Syntax

formatToParts(number)

Parameter

number: Eine Number, BigInt, oder Zeichenfolge, die formatiert werden soll. Zeichenfolgen werden auf die gleiche Weise geparst wie bei der Zahlumwandlung, außer dass formatToParts() den exakten Wert verwendet, den die Zeichenfolge darstellt, 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.

Beschreibung

Die formatToParts() Methode ist nützlich für die benutzerdefinierte Formatierung von Zahlzeichenfolgen. Sie gibt ein Array von Objekten zurück, das die lokalisierungsspezifischen Tokens enthält, aus denen es möglich ist, benutzerdefinierte Zeichenfolgen zu erstellen, während die lokalisierungsspezifischen 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 (das standardmäßig auf short eingestellt ist) angegeben ist, wenn notation auf compact gesetzt ist.
currency: Die Währungszeichenfolge, wie die Symbole "$" und "€" oder der Name "Dollar", "Euro", abhängig davon, wie currencyDisplay angegeben ist.
decimal: Die Dezimaltrennzeichen-Zeichenfolge (".").
exponentInteger: Der Exponent als ganze Zahl, wenn notation auf scientific oder engineering gesetzt ist.
exponentMinusSign: Die Exponenten-Minuszeichen-Zeichenfolge ("-").
exponentSeparator: Der Exponententrenner, wenn notation auf scientific oder engineering gesetzt ist.
fraction: Die Bruchzahl.
group: Die Gruppentrennzeichen-Zeichenfolge (",").
infinity: Die Infinity Zeichenfolge ("∞").
integer: Die ganze Zahl.
literal: Beliebige literale Zeichenfolgen oder Leerzeichen in der formatierten Zahl.
minusSign: Die Minuszeichen-Zeichenfolge ("-").
nan: Die NaN Zeichenfolge ("NaN").
plusSign: Die Pluszeichen-Zeichenfolge ("+").
percentSign: Das Prozentzeichen ("%").
unit: Die Einheitenzeichenfolge, wie "l" oder "Liter", abhängig davon, wie unitDisplay angegeben ist.
unknown: Die Zeichenfolge für unknown Typ Ergebnisse.

Beispiele

Vergleich von format und formatToParts

NumberFormat gibt lokalisierte, intransparente Zeichenfolgen 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 gibt es jedoch den Wunsch, die Formatierung dieser Zeichenfolge anzupassen. Die formatToParts Methode ermöglicht eine lokalisierungsbezogene Formatierung von Zeichenfolgen, die von NumberFormat Formatierern erzeugt werden, indem sie Ihnen die Zeichenfolge 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 ist die Information separat verfügbar und kann auf eine benutzerdefinierte Weise formatiert und wieder zusammengefügt werden. Zum Beispiel durch die Verwendung von Array.prototype.map(), Pfeilfunktionen, einer switch-Anweisung, 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