Intl.NumberFormat.prototype.formatToParts()

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.

Description

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

Spécification État Commentaires
ECMAScript Internationalization API 4.0 (ECMA-402)
La définition de 'Intl.NumberFormat.prototype.formatToParts' dans cette spécification.
Projet Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
formatToParts
Expérimentale
Chrome Support complet 64Edge Support complet 12Firefox Support complet 58IE Support complet 11Opera Support complet 51Safari ? WebView Android Support complet 64Chrome Android Support complet 64Firefox Android Support complet 58Opera Android ? Safari iOS ? Samsung Internet Android Support complet 9.0nodejs ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi