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.

La méthode Intl.Numberformat.prototype.formatToParts() permet de produire des fragments de chaînes à partir d'un nombre pour le mettre en forme avec des formateurs NumberTimeFormat.

Syntaxe

Intl.NumberFormat.prototype.formatToParts(nombre);

Paramètres

nombre Facultatif: Le nombre qu'on souhaite mettre en forme.

Valeur de retour

Un tableau Array contenant des objets correspondants aux différents fragments du nombres.

La méthode formatToParts() est peut être utilisée lorsqu'on met en forme des chaînes de caractères représentant des valeurs numériques. Cette méthode renvoie un tableau (Array) d'objets qui sont les différents fragments spécifiques aux locales et qui permettent de construire des chaînes dans un format spécifiques tout en conservant les parties liées à la locale. formatToParts() renvoie une structure analogue à :

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

Les valeurs possibles pour l'attribut type sont :

currency: Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont currencyDisplay est indiquée.
decimal: Le séparateur décimal utilisé (".").
fraction: La partie fractionnaire du nombre.
group: La chaîne de caractères utilisée pour indiquer un groupe (",").
infinity: La chaîne de caractères qui représente la valeur Infinity ("∞").
integer: La partie entière du nombre.
literal: Toute chaîne de caractères littérale ou blanc utilisée dans le nombre mis en forme.
minusSign: La chaîne de caractères utilisée pour le signe moins ("-").
nan: La chaîne de caractères utilisée pour représenter la valeur NaN ("NaN").
plusSign: La chaîne de caractères utilisée pour le signe plus ("+").
percentSign: La châine de caractères utilisée pour le symbole pourcent ("%").

Exemples

NumberFormat produit une chaîne localisée opaque qui ne peut pas être manipulée directement :

var number = 3500;

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

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

Toutefois, pour certaines applications, on souhaite adapter la mise en forme de cette chaîne de caractères. La méthode formatToParts permet d'obtenir cette flexibilité tout en conservant les différents fragments produits par NumberFormat :

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

Maintenant que la chaîne est décomposée, on peut la réassembler d'une façon spécifique. On peut, par exemple utiliser Array.prototype.map(), une fonction fléchée, une instruction switch, des littéraux de gabarits et Array.prototype.reduce().

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

Grâce à cette fonction, on pourra mettre en gras le suffixe associé à la devise :

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

Prothèse d'émulation (polyfill)

Une prothèse pour cette fonctionnalité est disponible dans le dépôt associé à la proposition.

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Intl.NumberFormat
Intl.NumberFormat.prototype.format
Formater des dates : Intl.DateTimeFormat.prototype.formatToParts()