Formater un nombre en tant que chaîne de devise en JavaScript

Harshit Jindal 12 octobre 2023
  1. Utilisez la méthode Intl.NumberFormat() pour mettre en forme un nombre sous forme de chaîne monétaire en JavaScript
  2. Utilisez la méthode toLocaleString() pour mettre en forme un nombre sous forme de chaîne monétaire en JavaScript
  3. Utilisez la bibliothèque Numeral.js pour mettre en forme un nombre sous forme de chaîne monétaire en JavaScript
Formater un nombre en tant que chaîne de devise en JavaScript

Un nombre est représenté de plusieurs façons, date/heure, devise, nombre, et bien plus encore. Lorsqu’elle est représentée comme une valeur monétaire, son impact augmente et devient beaucoup plus lisible. Par exemple, une valeur monétaire écrite 10000 a beaucoup moins d’impact qu’un nombre représenté par $ 10,000.00. Cela nous en dit beaucoup plus sur le nombre, les différents symboles monétaires et les différentes séparations par virgule. Ce didacticiel explique comment mettre en forme un nombre sous forme de chaîne monétaire en JavaScript.

Utilisez la méthode Intl.NumberFormat() pour mettre en forme un nombre sous forme de chaîne monétaire en JavaScript

Cette méthode est utilisée pour représenter les nombres dans un formatage sensible à la langue et représenter la devise en fonction des paramètres fournis. Il prend deux paramètres en entrée: locales et options.

  1. locales: il spécifie la langue et les paramètres de la région. Il s’agit d’une petite chaîne composée d’une combinaison de langue et de région séparées par un tiret. Par exemple, la locale en-IN prend le format de l’Inde et la langue anglaise. La première virgule à partir de la droite sépare des milliers et reste en termes de centaines.
  2. options: C’est un objet composé de tonnes de propriétés, ou on peut dire des options. lors du formatage d’un nombre sous forme de chaîne monétaire, 3 options principales sont requises.
  3. style: C’est simplement le style de notre formatage des nombres. Il peut avoir 3 valeurs différentes decimal, currency, percent selon le cas d’utilisation. Dans notre cas, nous définirons le style comme currency.
  4. currency: il spécifie le type de devise du symbole à inclure avant la chaîne numérique de formatage, par exemple, le dollar américain et l’euro.
  5. minimumFractionDigits: Il spécifie les chiffres minimum affichés après la décimale dans la chaîne formatée.
const money = 10000;
const currency = function(number) {
  return new Intl
      .NumberFormat(
          'en-IN',
          {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
      .format(number);
};
console.log(currency(money));

Le code ci-dessus permet de convertir un nombre donné en une chaîne de devise indienne.

Utilisez la méthode toLocaleString() pour mettre en forme un nombre sous forme de chaîne monétaire en JavaScript

Cette méthode est essentiellement la même que Intl.NumberFormat() mais n’est généralement pas utilisée à cause de sa vitesse lente avec plusieurs éléments. Pour les éléments uniques, la vitesse des deux méthodes est similaire. Il a les mêmes paramètres que Intl.NumberFormat(). Il diffère simplement en vitesse en raison de la mise en œuvre interne différente des deux méthodes.

const number = 2000;
number.toLocaleString(
    'en-IN', {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
console.log(number);

Le code ci-dessus permet de convertir un nombre donné en une chaîne de devise indienne.

Utilisez la bibliothèque Numeral.js pour mettre en forme un nombre sous forme de chaîne monétaire en JavaScript

Numeral.js est l’une des bibliothèques les plus utilisées pour le formatage des nombres. Pour formater les nombres sous forme de chaîne monétaire à l’aide de cette bibliothèque, nous créons d’abord une instance d’un nombre. C’est le type de données standard utilisé par cette bibliothèque qui convertit les nombres ou les chaînes en nombre avant d’effectuer le formatage. Ensuite, nous pouvons spécifier le format de la devise en utilisant la fonction format().

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

Le code ci-dessus permet d’inclure la bibliothèque Numeral.js dans le navigateur.

var number = 1000;
var myNumeral = numeral(number);
var currencyString = myNumeral.format('$0,0.00');

Nous avons créé un chiffre, puis appelé la fonction de formatage pour formater le chiffre en USD avec 2 décimales. Le code ci-dessus fournit une manière beaucoup plus claire de spécifier le format de devise.

Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

Article connexe - JavaScript Format

Article connexe - JavaScript Number