Вопрос: Как я могу форматировать числа в виде долларовой валюты в JavaScript?


Я хотел бы отформатировать цену в JavaScript.
Мне нужна функция, которая принимает floatкак аргумент и возвращает stringотформатирован следующим образом:

"$ 2,500.00"

Каков наилучший способ сделать это?


1366


источник


Ответы:


Вы можете использовать:

  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)

Затем вы можете добавить знак «$».

Если вам требуется «,» за тысячу, вы можете использовать:

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) : "");
 };

И используйте его с:

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

Если вы всегда будете использовать '.' и ',', вы можете оставить их вне вызова метода, и метод по умолчанию их вам.

(123456789.12345).formatMoney(2);

Если в вашей культуре есть два символа, переворачиваемые (например, европейцы), просто вставьте следующие две строки в formatMoneyметод:

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

1500



Короткое решение (работает повсюду)

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

Современное решение (новые браузеры + узел)

new Intl.NumberFormat().format(12345.67);  // 12,345.67

new Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'USD'
}).format(12345.67);  // $12,345.67

Детали для современного решения предоставляются aross в его блестящий ответ ,

ИСПЫТАНИЯ:

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/


Расширенное короткое решение

Вы также можете расширить прототип Numberобъект для добавления дополнительной поддержки любого числа десятичных знаков [0 .. n]и размер числовых групп [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"

ДЕМО / ИСПЫТАНИЯ: http://jsfiddle.net/hAfMM/435/


Супер расширенное короткое решение

В этом супер расширенная версия вы можете установить различные типы разделителей:

/**
 * 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"

ДЕМО / ИСПЫТАНИЯ: http://jsfiddle.net/hAfMM/612/


976



Intl.numberformat

Javascript имеет число форматера, и он является частью API интернационализации.

// 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 скрипка

Некоторые примечания по поддержке браузера

  • Все основные браузеры поддержать его в настоящее время
  • Крупнейшими нарушителями в плане поддержки являются UC Mobile ( держаться подальше от этого ) и Opera Mini (калека от дизайна)
  • Eсть шайба поддерживать его в старых браузерах
  • Посмотри на Могу ли я использовать для получения дополнительной информации

Intl.NumberFormat vs Number.prototype.toLocaleString

Последнее замечание, сравнивающее это со старым. toLocaleString, Оба они предлагают практически ту же функциональность. Однако toLocaleString в своих старых воплощениях (pre-Intl) фактически не поддерживает локали : он использует локаль системы. Поэтому, чтобы убедиться, что вы используете правильную версию, MDN предлагает проверить наличие Intl, Поэтому, если вам все равно нужно проверить Intl, почему бы не использовать Это вместо? Однако, если вы решите использовать прокладку, это также патчи toLocaleString, поэтому в этом случае вы можете использовать его без каких-либо проблем:

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

727



Below is the Patrick Desjardins (alias Daok) code with a bit of comments added and some minor changes:

/* 
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) : ''); 
}

and here some 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));

The minor changes are:

  1. moved a bit the Math.abs(decimals) to be done only when is not NaN.

  2. decimal_sep can not be empty string anymore (a some sort of decimal separator is a MUST)

  3. we use typeof thousands_sep === 'undefined' as suggested in How best to determine if an argument is not sent to the JavaScript function

  4. (+n || 0) is not needed because this is a Number object


157



Take a look at the JavaScript Number object and see if it can help you.

  • toLocaleString() will format a number using location specific thousands separator.
  • toFixed() will round the number to a specific number of decimal places.

To use these at the same time the value must have its type changed back to a number because they both output a string.

Example:

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

157



accounting.js is a tiny JavaScript library for number, money and currency formatting.


118



Here's the best js money formatter I've seen:

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) : "");
};

It was re-formatted and borrowed from here: https://stackoverflow.com/a/149099/751484

You'll have to supply your own currency designator (you used $ above).

Call it like this (although note that the args default to 2, comma, & period, so you don't need to supply any args if that's your preference):

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

95



If amount is a number, say -123, then

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

will produce the string "-$123.00".

Here's a complete working example.


91



There are already some great answers here. Here's another attempt, just for fun:

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];
}

And some 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"

Edited: now it will handle negative numbers as well


70



I think what you want is f.nettotal.value = "$" + showValue.toFixed(2);


67



So why hasn't anyone suggested the following?

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

Works for most/some browsers:

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


54