Chaque pays a sa monnaie et différents modèles ou façons d’afficher les montants monétaires. Lorsque nous exprimons correctement un nombre, il est plus facile à lire et à comprendre pour les lecteurs.
Lorsque vous utilisez des données d’une API ou d’une ressource externe, elles seront dans un format générique. Par exemple, si vous créez un magasin, vous pouvez avoir des données telles que les prix.
Cet article vous expliquera comment formater un nombre en tant que devise en JavaScript.
Plongeons-nous !
Nous utiliserons un nombre aléatoire, tel que 17225, comme indiqué dans les tableaux ci-dessous :
const Journals = [
{
"id": 01,
"name": "Software Development",
"price": 100.80,
},
{
"id": 02,
"name": "Introduction to Programming",
"price": 1534,
},
{
"id": 04,
"name": "Program or Be Programmed",
"price": 17225,
}
]Même l’ajout d’un signe monétaire ne résout pas le problème car les virgules et les décimales doivent être ajoutées aux bons endroits. Vous souhaitez également que chaque sortie de prix soit formatée correctement, en fonction de la devise.
Par exemple, 17225 serait 17 225,00 $ (Dollars américains), 17 225,00 (roupies), soit 17 225,00 € (euros), en fonction de la devise, de l’emplacement et du style que vous avez choisis. Vous pouvez également utiliser JavaScript Intl.NumberFormat() fonction pour convertir ces entiers en devises.
const price = 17225;
let KenyaShilling = new Intl.NumberFormat('en-Ke',
{
style: 'currency',
currency: 'KSH',
});
console.log(`The formatted version of {price} is {KenyaShilling.format(price)}`);
// The formatted version of 17225 is Ksh17,225.00Output
Ksh 17,225.00
Comment formater des nombres en tant que devise à l’aide du constructeur Intl.NumberFormat()
Vous pouvez créer des objets Intl.NumberFormat qui activent le formatage numérique sensible au langage, tel que le formatage monétaire, à l’aide du constructeur Intl.NumberFormat().
Ce constructeur prend en compte deux facteurs importants : les paramètres régionaux et les options, qui sont tous deux facultatifs.
new Intl.NumberFormat(locales, options) // we can also use Intl.NumberFormat(locales, options)
N’oubliez pas que Intl.NumberFormat() peut être utilisé avec ou sans « nouveau ». Les deux créeront une nouvelle instance Intl.NumberFormat.
Lorsqu’aucune locale ou option n’est donnée au constructeur Intl.NumberFormat() formatera simplement l’entier en ajoutant des virgules.
const price = 17225; console.log(new Intl.NumberFormat().format(price));
Output;
17,225
Comme indiqué ci-dessus, vous ne recherchez pas le formatage standard des nombres. Au lieu de cela, vous souhaitez structurer ces nombres en tant que devise afin qu’il renvoie le signe monétaire avec un formatage approprié plutôt que d’avoir à l’écrire manuellement.
Nous pouvons maintenant jeter un coup d’œil et explorer les deux paramètres.
Le premier argument : les paramètres régionaux
L’argument locale est un paramètre de chaîne facultatif qui peut être donné. Il désigne un territoire géographique, politique ou culturel particulier. Il prépare uniquement le numéro en fonction de l’emplacement et n’inclut pas le formatage de la devise.
const price = 172250; console.log(new Intl.NumberFormat('en-US').format(price)); // 172,250 console.log(new Intl.NumberFormat('en-IN').format(price)); // 1,72,250 console.log(new Intl.NumberFormat('en-DE').format(price)); // 172.250
Vous verrez que les chiffres et les prix ont été formatés au niveau régional en fonction de votre emplacement. Regardons maintenant le paramètre options pour voir comment nous pouvons changer les nombres pour représenter une devise.
Le deuxième argument : les options (style, devise…)
Il s’agit du paramètre principal, et vous pouvez l’utiliser pour appliquer un formatage supplémentaire, tel que le formatage monétaire. Il s’agit d’un objet JavaScript qui a des arguments supplémentaires, tels que :
Style : Cela spécifie le type de formatage que vous désirez. Cela inclut des valeurs telles que les décimales, les devises et les unités.
Monnaie; est un choix supplémentaire. Vous pouvez utiliser cette option pour indiquer la devise à formater, comme USD, CAD, GBP, INRet beaucoup plus.
// format number to US dollar
let USDollar = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
// format number to British pounds
let Pounds = Intl.NumberFormat('en-GB', {
style: 'currency',
currency: 'GBP',
});
// format number to Indian rupee
let Rupee = new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR',
});
// format number to Euro
let Euro = Intl.NumberFormat('en-DE', {
style: 'currency',
currency: 'EUR',
});
console.log('Dollars: ' + USDollar.format(price));
// Dollars: $172,250.00
console.log(`Pounds: ${pounds.format(price)}`);
// Pounds: £172,250.00
console.log('Rupees: ' + rupee.format(price));
// Rupees: ₹1,72,250.00
console.log(`Euro: ${euro.format(price)}`);
// Euro: €172,250.00Le troisième argument : les chiffres significatifs maximum
MaximumSignificantDigits est une autre option. Cela vous permet d’arrondir les variables de prix en fonction du nombre de chiffres significatifs que vous choisissez.
Par exemple, si vous changez la valeur en 3, 172 250,00 devient 172 000.
let euro= Intl.NumberFormat('en-'Euro, {
style: 'currency',
currency: 'EUR',
maximumSignificantDigits: 3,
});
console.log(`Euro: ${euro.format(price)}`);
// Euro: £172,000La portée de cet article est juste les bases de l’utilisation de JavaScript pour convertir un nombre aléatoire en format monétaire.
Bon codage !