Format Currency | CSS-Tricks

This function will round numbers to two decimal places, and ensure that the returned value has two decimal places. For example 12.006 will return 12.01, .3 will return 0.30, and 5 will return 5.00

function CurrencyFormatted(amount) {
	var i = parseFloat(amount);
	if(isNaN(i)) { i = 0.00; }
	var minus = '';
	if(i < 0) { minus = '-'; }
	i = Math.abs(i);
	i = parseInt((i + .005) * 100);
	i = i / 100;
	s = new String(i);
	if(s.indexOf('.') < 0) { s += '.00'; }
	if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
	s = minus + s;
	return s;
}

Comments

Chase Moskal

# July 27, 2011

If you want a smaller function:


function currency(N){N=parseFloat(N);if(!isNaN(N))N=N.toFixed(2);else N='0.00';return N;}

// >> currency("-14"): "-14.00"

If you want a smaller, more inline alternative, you can do this:


// Right after you declare your number (N), the rest of the line does the formatting.
var N=24.686; N=parseFloat(N);if(!isNaN(N))N=N.toFixed(2);else N='0.00';
// >> N: "24.69"

-Chase

Chase Moskal

Permalink to comment# October 12, 2013
Hey, here’s myself from the future. I re-gazed upon this, and further improved things:

function currency(n){n=parseFloat(n);return isNaN(n)?false:n.toFixed(2);}
```
currency(2); //--> '2.00'
currency(3.253); //--> '3.25'
currency(3.257); //--> '3.26'

currency("3.2"); //--> '3.20'
currency("butts"); //--> false
```

Andras

# June 11, 2013

Is it a css trick?

Thang

# July 29, 2015

Hi all!!

Is there any way to add comma while typing number? and we can edit all of number.

Ex: 123,456,555, we can edit number 1 –> 6

Thanks

Paul C Allsopp

Permalink to comment# August 16, 2015

On keyup check the length of the field. If it is greater than 4 and contains no period, add a comma after every 3rd number from the right. When a period is encountered, set a flag to stop the formatting.
Michael Max

Permalink to comment# December 31, 2016

// with comma for thousands
function format_currency(amount){
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = ”;
if(i < 0) { minus = ‘-‘; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = Number(i).toLocaleString(‘en’);
if(s.indexOf(‘.’) < 0) { s += ‘.00’; }
if(s.indexOf(‘.’) == (s.length – 2)) { s += ‘0’; }
s = minus + s;
return s
}

Manie

# September 14, 2015

The website’s name is css-tricks but you give a Java solution?

Chris Coyier

Permalink to comment# September 21, 2015

http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java
bigtrees

Permalink to comment# April 11, 2017

He didn’t give a java solution, he gave a javascript solution. ;)

mahesh

# February 9, 2016

thanks
i want to put auto price changer to my website

please review my website: http://www.phonegallery.in

techrex

# September 28, 2016

Personally, I prefer to use currencyFormatter.js (https://osrec.github.io/currencyFormatter.js/). Cross browser and light. Can format numbers according to currency and/or locales:

OSREC.CurrencyFormatter.format(2534234, { currency: 'INR' }); // Returns ₹ 25,34,234.00
OSREC.CurrencyFormatter.format(2534234, { currency: 'EUR' }); // Returns 2.534.234,00 €
OSREC.CurrencyFormatter.format(2534234, { currency: 'EUR', locale: 'fr' }); // Returns 2 534 234,00 €

Atul kumar Shukla

# February 19, 2018

function formateIndianCurrency(rupees) {

var rsFormated = 0;
var indianRupees = 0;
var ngative = false;
if (rupees != "" && rupees != undefined) {
    rupees = rupees.toString();
    // Check Negative
    if (rupees < 0) {
        rupees = rupees.slice(1);
        ngative = true;
    }

    rupees = rupees.split(".");
    if (rupees.length <= 2 && (rupees[0] != undefined && rupees[0] != "")) {
        indianRupees = rupees[0];
        indianRupees = indianRupees.toString();
        var lastThree = indianRupees.substring(indianRupees.length - 3);
        var otherNumbers = indianRupees.substring(0,
                indianRupees.length - 3);
        if (otherNumbers != '') {
            lastThree = ',' + lastThree;
        }
        var formateRS = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",")
                + lastThree;
        if (rupees[1] != undefined) {
            formateRS = formateRS + '.' + rupees[1];
        }
        // Negative
        if (ngative) {
            formateRS = '-' + formateRS;
        }

        rsFormated = formateRS;
        return rsFormated;
    } else {
        rsFormated = "0.00";
        // Negative
        if (ngative) {
            rsFormated = '-' + rsFormated;
        }
        return rsFormated;
    }
} else {
    rsFormated = "0.00";
    return rsFormated;
}

}

Antonios Hadjigeorgalis

# October 8, 2018

as of 2018, this functionality is built in to Number.toLocaleString
There is an additional option currencyDisplay which defaults to symbol and shows the appropriate symbol for the currency.

  _currency (value) {
    if (isNaN(parseFloat(value, 10))) value = 0
    return Number(value).toLocaleString('en',
      { style: 'currency', currency: 'USD', useGrouping: true })
  }

Dayley Senior

Permalink to comment# November 26, 2018

I have multiple Javascript variables, inputs and outputs. I am thinking it would be easier to format the outputs in case I later want to use the variable again for another calculation. (Or can you confirm that it wouldn’t in anyway confuse the calculation trying to multiply ‘12345’ with ‘12,345.00’ due to the comma and period symbol? 12345 * 12,345.00 = ?)

I am not sure how to implement this currency format. How can I pass my output, for example: through the currency format? The calculations for MyOutputAmount has already been done and I am using ‘spans’ for the outputs.

Antonios Hadjigeorgalis

# November 28, 2018

A comma in the value means that it is a string. You want to use these functions only for displaying the value, not when there are further calculations to make.

Dayley Senior

Permalink to comment# November 28, 2018

Ahh yes of course. That makes perfect sense to be honest.
However how would I apply this function to my span outputs?

Comments

Leave a Reply Cancel reply