Comment formater les nombres en tant que chaînes de devises

Question

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

"$ 2,500.00"

Quelle est la meilleure façon de procéder ?

Answer 1

Nombre.prototype.toFixed

Cette solution est compatible avec tous les principaux navigateurs :

  const profits = 2489.8237;

  profits.toFixed(3) // Returns 2489.824 (rounds up)
  profits.toFixed(2) // Returns 2489.82
  profits.toFixed(7) // Returns 2489.8237000 (pads the decimals)

Il suffit d'ajouter le symbole de la monnaie (par exemple, le symbole de l'euro). "$" + profits.toFixed(2) ) et vous aurez votre montant en dollars.

Fonction personnalisée

Si vous avez besoin de l'utilisation de , entre chaque chiffre, vous pouvez utiliser cette fonction :

function formatMoney(number, decPlaces, decSep, thouSep) {
    decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces,
    decSep = typeof decSep === "undefined" ? "." : decSep;
    thouSep = typeof thouSep === "undefined" ? "," : thouSep;
    var sign = number < 0 ? "-" : "";
    var i = String(parseInt(number = Math.abs(Number(number) || 0).toFixed(decPlaces)));
    var j = (j = i.length) > 3 ? j % 3 : 0;

    return sign +
        (j ? i.substr(0, j) + thouSep : "") +
        i.substr(j).replace(/(\decSep{3})(?=\decSep)/g, "$1" + thouSep) +
        (decPlaces ? decSep + Math.abs(number - i).toFixed(decPlaces).slice(2) : "");
}

document.getElementById("b").addEventListener("click", event => {
  document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});

<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>

Utilisez-le comme ça :

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

Si vous utilisez toujours '.' et ',', vous pouvez les omettre dans votre appel de méthode, et la méthode les utilisera par défaut pour vous.

(123456789.12345).formatMoney(2);

Si les deux symboles sont inversés dans votre culture (par exemple, pour les Européens) et que vous souhaitez utiliser les valeurs par défaut, il suffit de coller les deux lignes suivantes dans le fichier de configuration de l'utilisateur. formatMoney méthode :

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

Fonction personnalisée (ES6)

Si vous pouvez utiliser la syntaxe ECMAScript moderne (c'est-à-dire via Babel), vous pouvez utiliser cette fonction plus simple à la place :

function formatMoney(amount, decimalCount = 2, decimal = ".", thousands = ",") {
  try {
    decimalCount = Math.abs(decimalCount);
    decimalCount = isNaN(decimalCount) ? 2 : decimalCount;

    const negativeSign = amount < 0 ? "-" : "";

    let i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
    let j = (i.length > 3) ? i.length % 3 : 0;

    return
      negativeSign +
      (j ? i.substr(0, j) + thousands : '') +
      i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) +
      (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
  } catch (e) {
    console.log(e)
  }
};

document.getElementById("b").addEventListener("click", event => {
  document.getElementById("x").innerText = "Result was: " + formatMoney(document.getElementById("d").value);
});

<label>Insert your amount: <input id="d" type="text" placeholder="Cash amount" /></label>
<br />
<button id="b">Get Output</button>
<p id="x">(press button to get output)</p>

Answer 2

Solution courte n°1 :

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

Solution courte n°2 :

n.toFixed(2).replace(/./g, function(c, i, a) {
    return i && c !== "." && !((a.length - i) % 3) ? ',' + c : c;
});

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/

---

Solution étendue :

Vous pouvez également étendre le prototype de Number pour ajouter un support supplémentaire pour un nombre quelconque de décimales. [0 .. n] et la taille des groupes de numéros [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"

DEMO / TESTS : http://jsfiddle.net/hAfMM/435/

---

Solution 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"

DEMO / TESTS : http://jsfiddle.net/hAfMM/612/

Answer 3

Jetez un coup d'œil au JavaScript Numéro et voir s'il peut vous aider.

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

Pour les utiliser en même temps, le type de la valeur doit redevenir un nombre, car ils produisent tous deux une chaîne de caractères.

Exemple :

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

Answer 4

Vous trouverez ci-dessous le Patrick Desjardins (alias Daok) avec un peu de commentaires ajoutés et quelques changements mineurs :

/*
decimal_sep: character used as decimal separator, 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 the 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) à ne faire que lorsque ce n'est pas NaN .

2. decimal_sep ne peut plus être une chaîne de caractères vide (une sorte de séparateur décimal est une doit )

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 car this est un Number objet

JSFiddle

Answer 5

comptabilité.js est une petite bibliothèque JavaScript pour le formatage des nombres, de l'argent et des devises.