Formater un champ monétaire en JavaScript

Dans plusieurs langages de programmation, quand vient le temps de manipuler des valeurs monétaires, on doit tenir compte d'un certain nombre de décimales. En SQL, plusieurs préféreront utiliser le type numeric en indiquant la précision plutôt que de prendre le type money qui se limite à 4 décimales.

Quand le montant contient plus de 2 décimales, on voudrait certainement tronquer celles-ci pour obtenir un nombre sous cette forme : 22,58 $. On pourrait utiliser le truc classique de multiplier par 100 pour obtenir une valeur entière et de le diviser à nouveau par 100 pour conserver deux chiffres après la virgule :

var num = 22.5812;
console.log(Math.round(num*100)/100); // 22.58

Dans certains cas, ça fait l'affaire pour éliminer les décimales superflues. Le hic, c'est que les décimales se terminent par zéro, elles seront aussi tronquées et ne seront pas affichées à l'écran :

var num = 22.5009;
console.log(Math.round(num*100)/100); // 22.5

Ce n'est pas tout à fait le résultat attendu. Les 0 sont essentiellement inutiles dans le nombre, sauf qu'on voudrait afficher les zéros non-significatifs dans un montant monétaire. Et c'est la même chose si la valeur est entière :

var num = 22.00; // ou 22
console.log(Math.round(num*100)/100);  // 22

J'ai vu plusieurs façons de faire apparaître les zéros par programmation mais je vous suggère une fonction built-in toute simple de l'objet Number qui vous évitera d'écrire plusieurs lignes de code : toFixed(). Il suffit d'indiquer le nombre de décimales à conserver pour le résultat final :

num = 22;
console.log( num.toFixed(2) ); // 22.00

num = 22.5;
console.log( num.toFixed(2) ); // 22.50

num = 22.4949;
console.log( num.toFixed(2) ); // 22.49

num = 22.5456;
console.log( num.toFixed(2) ); // 22.55

num = 22.9900;
console.log( num.toFixed(2) ); // 22.99

Un autre point qu'il faut penser quand on travaille avec des champs monétaires dans l'interface, c'est que l'utilisateur pourrait avoir tendance à saisir une virgule à la place du point. Assurez-vous de faire le remplacement avant d'effectuer des calculs ou d'insérer la valeur dans la base de données.

console.log(9.99 * 2); // 19.98
console.log(9,99 * 2); // oups, 9198 !