Question Comment puis-je formater des nombres en tant que chaîne monétaire en dollars dans JavaScript?


Je voudrais formater un prix en JavaScript.
Je voudrais une fonction qui prend un float comme un argument et renvoie un string formaté comme ceci:

"$ 2,500.00"

Quelle est la meilleure façon de faire cela?


1389


origine


Réponses:


Vous pouvez utiliser:

  var profits=2489.8237
  profits.toFixed(3) //returns 2489.824 (round up)
  profits.toFixed(2) //returns 2489.82
  profits.toFixed(7) //returns 2489.8237000 (padding)

Ensuite, vous pouvez ajouter le signe de '$'.

Si vous avez besoin de ',' pour mille, vous pouvez utiliser:

Number.prototype.formatMoney = function(c, d, t){
    var n = this, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))), 
    j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

Et utilisez-le avec:

(123456789.12345).formatMoney(2, '.', ',');

Si vous allez toujours utiliser '.' et ',', vous pouvez les laisser hors de votre appel de méthode, et la méthode les par défaut pour vous.

(123456789.12345).formatMoney(2);

Si votre culture a les deux symboles inversés (c'est-à-dire les Européens), collez simplement les deux lignes suivantes formatMoney méthode:

    d = d == undefined ? "," : d, 
    t = t == undefined ? "." : t, 

1515



Solution courte et rapide (fonctionne partout!)

(12345.67).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');  // 12,345.67

L'idée derrière cette solution est de remplacer les sections appariées par une première correspondance et une virgule, c.-à-d. '$&,'. L'appariement est fait en utilisant approche lookahead. Vous pouvez lire l'expression comme "correspondre à un nombre s'il est suivi par une séquence de trois ensembles de nombres (un ou plusieurs) et un point".

TESTS:

1        --> "1.00"
12       --> "12.00"
123      --> "123.00"
1234     --> "1,234.00"
12345    --> "12,345.00"
123456   --> "123,456.00"
1234567  --> "1,234,567.00"
12345.67 --> "12,345.67"

DEMO:  http://jsfiddle.net/hAfMM/9571/


Solution courte étendue

Vous pouvez également étendre le prototype de Number objet pour ajouter un support supplémentaire de n'importe quel nombre de décimales [0 .. n] et la taille des groupes de nombres [0 .. x]:

/**
 * Number.prototype.format(n, x)
 * 
 * @param integer n: length of decimal
 * @param integer x: length of sections
 */
Number.prototype.format = function(n, x) {
    var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\.' : '$') + ')';
    return this.toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,');
};

1234..format();           // "1,234"
12345..format(2);         // "12,345.00"
123456.7.format(3, 2);    // "12,34,56.700"
123456.789.format(2, 4);  // "12,3456.79"

DÉMO / TESTS:  http://jsfiddle.net/hAfMM/435/


Solution courte super étendue

Dans ce version super étendue vous pouvez définir différents types de délimiteurs:

/**
 * Number.prototype.format(n, x, s, c)
 * 
 * @param integer n: length of decimal
 * @param integer x: length of whole part
 * @param mixed   s: sections delimiter
 * @param mixed   c: decimal delimiter
 */
Number.prototype.format = function(n, x, s, c) {
    var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
        num = this.toFixed(Math.max(0, ~~n));

    return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
};

12345678.9.format(2, 3, '.', ',');  // "12.345.678,90"
123456.789.format(4, 4, ' ', ':');  // "12 3456:7890"
12345678.9.format(0, 3, '-');       // "12-345-679"

DÉMO / TESTS:  http://jsfiddle.net/hAfMM/612/


1014



Intl.numberformat

Javascript a un formateur de nombres, et cela fait partie de l'API Internationalization.

// Create our number formatter.
var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  // the default value for minimumFractionDigits depends on the currency
  // and is usually already 2
});

formatter.format(2500); /* $2,500.00 */

JS violon

Quelques notes sur le support du navigateur

  • Tous les principaux navigateurs le soutenir de nos jours
  • Les plus grands contrevenants en termes de soutien sont UC Mobile (reste loin de ça) et Opera Mini (estropié par la conception)
  • Il y a un cale pour le supporter sur les anciens navigateurs
  • Jettes un coup d'oeil à Puis-je utiliser pour plus d'informations

Intl.NumberFormat vs Number.prototype.toLocaleString

Une note finale comparant cela à l'ancien.toLocaleString. Ils offrent tous les deux la même fonctionnalité. Cependant, toLocaleString dans ses anciennes versions (pré-Intl) ne prend pas en charge les locales: il utilise les paramètres régionaux du système. Par conséquent, pour être sûr que vous utilisez la bonne version, MDN suggère de vérifier l'existence de Intl. Donc, si vous avez besoin de vérifier pour Intl de toute façon, pourquoi ne pas utiliser il au lieu? Cependant, si vous choisissez d'utiliser la cale, cela aussi des correctifs toLocaleString, alors dans ce cas, vous pouvez l'utiliser sans aucun tracas:

(2500).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
}); /* $2,500.00 */

758



Jetez un coup d'oeil au JavaScript Nombre objet et voir si cela peut vous aider.

  • toLocaleString() formatera un nombre en utilisant un séparateur de milliers spécifique à l'emplacement.
  • toFixed() arrondira le nombre à un nombre spécifique de décimales.

Pour les utiliser en même temps, la valeur de ce type doit être redéfinie sur un nombre, car les deux affichent une chaîne.

Exemple:

Number(someNumber.toFixed(1)).toLocaleString()

160



Voici le Patrick Desjardins (alias Daok) code avec un peu de commentaires ajoutés et quelques modifications mineures:

/* 
decimal_sep: character used as deciaml separtor, it defaults to '.' when omitted
thousands_sep: char used as thousands separator, it defaults to ',' when omitted
*/
Number.prototype.toMoney = function(decimals, decimal_sep, thousands_sep)
{ 
   var n = this,
   c = isNaN(decimals) ? 2 : Math.abs(decimals), //if decimal is zero we must take it, it means user does not want to show any decimal
   d = decimal_sep || '.', //if no decimal separator is passed we use the dot as default decimal separator (we MUST use a decimal separator)

   /*
   according to [https://stackoverflow.com/questions/411352/how-best-to-determine-if-an-argument-is-not-sent-to-the-javascript-function]
   the fastest way to check for not defined parameter is to use typeof value === 'undefined' 
   rather than doing value === undefined.
   */   
   t = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, //if you don't want to use a thousands separator you can pass empty string as thousands_sep value

   sign = (n < 0) ? '-' : '',

   //extracting the absolute value of the integer part of the number and converting to string
   i = parseInt(n = Math.abs(n).toFixed(c)) + '', 

   j = ((j = i.length) > 3) ? j % 3 : 0; 
   return sign + (j ? i.substr(0, j) + t : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ''); 
}

et voici quelques tests:

//some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert(123456789.67392.toMoney() + '\n' + 123456789.67392.toMoney(3) + '\n' + 123456789.67392.toMoney(0) + '\n' + (123456).toMoney() + '\n' + (123456).toMoney(0) + '\n' + 89.67392.toMoney() + '\n' + (89).toMoney());

//some tests (do not forget parenthesis when using negative numbers and number with no decimals)
alert((-123456789.67392).toMoney() + '\n' + (-123456789.67392).toMoney(-3));

Les changements mineurs sont:

  1. déplacé un peu le Math.abs(decimals) à faire seulement quand n'est pas NaN.

  2. decimal_sep ne peut plus être une chaîne vide (une sorte de séparateur décimal est un MUST)

  3. nous utilisons typeof thousands_sep === 'undefined' comme suggéré dans Comment déterminer si un argument n'est pas envoyé à la fonction JavaScript

  4. (+n || 0) n'est pas nécessaire parce que this est un Number objet


157



accounting.js est une petite bibliothèque JavaScript pour le formatage de nombres, d'argent et de devises.


120



Voici le meilleur formateur js money que j'ai vu:

Number.prototype.formatMoney = function(decPlaces, thouSeparator, decSeparator) {
    var n = this,
        decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
        decSeparator = decSeparator == undefined ? "." : decSeparator,
        thouSeparator = thouSeparator == undefined ? "," : thouSeparator,
        sign = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
};

Il a été reformaté et emprunté d'ici: https://stackoverflow.com/a/149099/751484

Vous devrez fournir votre propre indicatif de devise (vous avez utilisé $ ci-dessus).

Appelez-le comme ceci (bien que notez que les arguments par défaut à 2, virgule, & période, donc vous n'avez pas besoin de fournir des arguments si c'est votre préférence):

var myMoney=3543.75873;
var formattedMoney = '$' + myMoney.formatMoney(2,',','.'); // "$3,543.76"

95



Si le montant est un nombre, dites -123, puis

amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });

produira la chaîne "-$123.00".

Voici un travail complet Exemple.


95



Il y a déjà quelques bonnes réponses ici. Voici une autre tentative, juste pour le plaisir:

function formatDollar(num) {
    var p = num.toFixed(2).split(".");
    return "$" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {
        return  num=="-" ? acc : num + (i && !(i % 3) ? "," : "") + acc;
    }, "") + "." + p[1];
}

Et quelques tests:

formatDollar(45664544.23423) // "$45,664,544.23"
formatDollar(45) // "$45.00"
formatDollar(123) // "$123.00"
formatDollar(7824) // "$7,824.00"
formatDollar(1) // "$1.00"

Edité: maintenant il va gérer aussi les nombres négatifs


70



Je pense que ce que tu veux c'est f.nettotal.value = "$" + showValue.toFixed(2);


67



Alors pourquoi personne n'a suggéré ce qui suit?

(2500).toLocaleString("en-GB", {style: "currency", currency: "GBP", minimumFractionDigits: 2}) 

Fonctionne pour la plupart / certains navigateurs:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Browser_Compatibility


55