Intl.NumberFormat.prototype.formatToParts()

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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 AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung InternetNode.js
Support simple
Expérimentale
Chrome Support complet 63
Notes Désactivée
Support complet 63
Notes Désactivée
Notes Need to set the flag on the commandline via --js-flags
Désactivée From version 63: this feature is behind the harmony-number-format-to-parts runtime flag.
Edge ? Firefox Support complet 58IE ? Opera ? Safari ? WebView Android Aucun support NonChrome Android Support complet 63
Notes Désactivée
Support complet 63
Notes Désactivée
Notes Need to set the flag on the commandline via --js-flags
Désactivée From version 63: this feature is behind the harmony-number-format-to-parts runtime flag.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Nonnodejs ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
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 les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,