Format numbers in JavaScript similar to C#

Question

Is there a simple way to format numbers in JavaScript, similar to the formatting methods available in C# (or VB.NET) via ToString("format_provider") or String.Format()?

http://stackoverflow.com/questions/8449580/jquery-number-formatting-issue/8449695#8449695 — RAJ, Aug 30 '12 at 08:14
You should probably have a look at the JQuery NUMBERFORMATTER plugin: [Jquery Number Formatter](https://code.google.com/p/jquery-numberformatter/) And this question: [Javascript easier way to format numbers](https://stackoverflow.com/questions/726144/javascript-easier-way-to-format-numbers/) — karim79, Jul 01 '09 at 10:00

score 76 · Answer 1 · edited Nov 15 '22 at 15:11

76

Generally

In jQuery

autoNumeric (a decent number formatter & input helper with locale support for jQuery 1.5+)
jQuery Format (a clientSide implementation of Java's SimpleDateFormat and NumberFormat)
jquery-numberformatter (number formatter with locale support)

edited Nov 15 '22 at 15:11

Glorfindel

21,988
13
81
109

answered Jul 01 '09 at 09:57

rahul

184,426
49
232
263

11

A word of warning: The jQuery number formatter you link to (I tried with v1.1.0) is completely broken and useless. As in: It does not work *at all*. Here is a decent formatting plugin: http://www.asual.com/jquery/format/ – Tomalak Aug 16 '10 at 12:35
@Tomalak, You should post that as an answer. That's definitely the best number formatter plugin I've used. I wish there were documentation outside of the unit tests though. – Brad Nov 13 '11 at 03:07
@Brad That's a little late. But good to hear that you've found it useful! – Tomalak Nov 13 '11 at 08:50
6

@Tomalak It's never too late. Here I am looking at this more than a year later! – Cymen Dec 09 '11 at 23:32
3

And me nearly three years later! – shufler Jun 29 '12 at 19:16
What about percent formatting? Does asual.com/jquer/format handles it? – Maxim Kim Jul 24 '12 at 03:37
1

autoNumeric is quite full-featured and recently updated to 1.8.0. – Prethen Jan 09 '13 at 20:42
+1 for autoNumeric, though as of this writing (v 1.8.1), input types other than "are NOT supported including HTML 5 number type[s]." – user456584 Jan 18 '13 at 16:53
...And as of that writing, I've discovered "accounting.js" which for many use cases is an even more effective solution. – user456584 Jan 18 '13 at 21:13

Vishal Barot · Answer 2 · 2012-01-28T10:00:41.740

Yes, there is definitely a way to format numbers properly in javascript, for example:

var val=2489.8237

val.toFixed(3) //returns 2489.824 (round up)
val.toFixed(2) //returns 2489.82
val.toFixed(7) //returns 2489.8237000 (padding)

With the use of variablename.toFixed .

And there is another function toPrecision() . For more detail you also can visit

http://raovishal.blogspot.com/2012/01/number-format-in-javascript.html

jfriend00 · Answer 3 · 2016-02-19T01:22:24.740

Here's a simple JS function to add commas to an integer number in string format. It will handle whole numbers or decimal numbers. You can pass it either a number or a string. It obviously returns a string.

function addCommas(str) {
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;

    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
        first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

Here's a set of test cases: http://jsfiddle.net/jfriend00/6y57j/

You can see it being used in this previous jsFiddle: http://jsfiddle.net/jfriend00/sMnjT/. You can find functions that will handle decimal numbers too with a simple Google search for "javascript add commas".

Converting a number to a string can be done many ways. The easiest is just to add it to a string:

var myNumber = 3;
var myStr = "" + myNumber;   // "3"

Within, the context of your jsFiddle, you'd get commas into the counter by changing this line:

jTarget.text(current);

to this:

jTarget.text(addCommas(current));

You can see it working here: http://jsfiddle.net/jfriend00/CbjSX/

@blackessej - I added more onto the end of my answer that shows how addCommas can be added to your fiddle. — jfriend00, Aug 19 '11 at 21:40
Added support for decimal numbers in the `addCommas()` function so it works for numbers with a decimal part. — jfriend00, Mar 29 '14 at 22:29

patrick · Answer 4 · 2015-04-28T22:40:43.847

12

I wrote a simple function (not yet another jQuery plugin needed!!) that converts a number to a decimal separated string or an empty string if the number wasn't a number to begin with:

function format(x) {
    return isNaN(x)?"":x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

format(578999); results in 578,999

format(10); results in 10

if you want to have a decimal point instead of a comma simply replace the comma in the code with a decimal point.

One of the comments correctly stated this only works for integers, with a few small adaptions you can make it work for floating points as well:

function format(x) {
    if(isNaN(x))return "";

    n= x.toString().split('.');
    return n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")+(n.length>1?"."+n[1]:"");
}

edited Apr 28 '15 at 22:40

answered Jan 15 '15 at 01:47

patrick

11,519
8
71
80

If you split the floating point part first, then do this with the integer, and then add the flowing point part again it should also work on fp's – patrick Apr 28 '15 at 22:22
`"412.8".replace(/\B(?=(\d{3})+(?!\d))/g, ",");` returns `412.8`. I think it could return `412.80` – Junior Mayhé Oct 13 '15 at 17:37

score 9 · Answer 5 · edited May 23 '17 at 11:46

Here are some solutions, all pass the test suite, test suite and benchmark included, if you want copy and paste to test, try This Gist.

Method 0 (RegExp)

Base on https://stackoverflow.com/a/14428340/1877620, but fix if there is no decimal point.

if (typeof Number.prototype.format === 'undefined') {
    Number.prototype.format = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');
        a[0] = a[0].replace(/\d(?=(\d{3})+$)/g, '$&,');
        return a.join('.');
    }
}

Method 1

if (typeof Number.prototype.format1 === 'undefined') {
    Number.prototype.format1 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.'),
            // skip the '-' sign
            head = Number(this < 0);

        // skip the digits that's before the first thousands separator 
        head += (a[0].length - head) % 3 || 3;

        a[0] = a[0].slice(0, head) + a[0].slice(head).replace(/\d{3}/g, ',$&');
        return a.join('.');
    };
}

Method 2 (Split to Array)

if (typeof Number.prototype.format2 === 'undefined') {
    Number.prototype.format2 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');

        a[0] = a[0]
            .split('').reverse().join('')
            .replace(/\d{3}(?=\d)/g, '$&,')
            .split('').reverse().join('');

        return a.join('.');
    };
}

Method 3 (Loop)

if (typeof Number.prototype.format3 === 'undefined') {
    Number.prototype.format3 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('');
        a.push('.');

        var i = a.indexOf('.') - 3;
        while (i > 0 && a[i-1] !== '-') {
            a.splice(i, 0, ',');
            i -= 3;
        }

        a.pop();
        return a.join('');
    };
}

Example

console.log('======== Demo ========')
var n = 0;
for (var i=1; i<20; i++) {
    n = (n * 10) + (i % 10)/100;
    console.log(n.format(2), (-n).format(2));
}

Separator

If we want custom thousands separator or decimal separator, use replace():

123456.78.format(2).replace(',', ' ').replace('.', ' ');

Test suite

function assertEqual(a, b) {
    if (a !== b) {
        throw a + ' !== ' + b;
    }
}

function test(format_function) {
    console.log(format_function);
    assertEqual('NaN', format_function.call(NaN, 0))
    assertEqual('Infinity', format_function.call(Infinity, 0))
    assertEqual('-Infinity', format_function.call(-Infinity, 0))

    assertEqual('0', format_function.call(0, 0))
    assertEqual('0.00', format_function.call(0, 2))
    assertEqual('1', format_function.call(1, 0))
    assertEqual('-1', format_function.call(-1, 0))
    // decimal padding
    assertEqual('1.00', format_function.call(1, 2))
    assertEqual('-1.00', format_function.call(-1, 2))
    // decimal rounding
    assertEqual('0.12', format_function.call(0.123456, 2))
    assertEqual('0.1235', format_function.call(0.123456, 4))
    assertEqual('-0.12', format_function.call(-0.123456, 2))
    assertEqual('-0.1235', format_function.call(-0.123456, 4))
    // thousands separator
    assertEqual('1,234', format_function.call(1234.123456, 0))
    assertEqual('12,345', format_function.call(12345.123456, 0))
    assertEqual('123,456', format_function.call(123456.123456, 0))
    assertEqual('1,234,567', format_function.call(1234567.123456, 0))
    assertEqual('12,345,678', format_function.call(12345678.123456, 0))
    assertEqual('123,456,789', format_function.call(123456789.123456, 0))
    assertEqual('-1,234', format_function.call(-1234.123456, 0))
    assertEqual('-12,345', format_function.call(-12345.123456, 0))
    assertEqual('-123,456', format_function.call(-123456.123456, 0))
    assertEqual('-1,234,567', format_function.call(-1234567.123456, 0))
    assertEqual('-12,345,678', format_function.call(-12345678.123456, 0))
    assertEqual('-123,456,789', format_function.call(-123456789.123456, 0))
    // thousands separator and decimal
    assertEqual('1,234.12', format_function.call(1234.123456, 2))
    assertEqual('12,345.12', format_function.call(12345.123456, 2))
    assertEqual('123,456.12', format_function.call(123456.123456, 2))
    assertEqual('1,234,567.12', format_function.call(1234567.123456, 2))
    assertEqual('12,345,678.12', format_function.call(12345678.123456, 2))
    assertEqual('123,456,789.12', format_function.call(123456789.123456, 2))
    assertEqual('-1,234.12', format_function.call(-1234.123456, 2))
    assertEqual('-12,345.12', format_function.call(-12345.123456, 2))
    assertEqual('-123,456.12', format_function.call(-123456.123456, 2))
    assertEqual('-1,234,567.12', format_function.call(-1234567.123456, 2))
    assertEqual('-12,345,678.12', format_function.call(-12345678.123456, 2))
    assertEqual('-123,456,789.12', format_function.call(-123456789.123456, 2))
}

console.log('======== Testing ========');
test(Number.prototype.format);
test(Number.prototype.format1);
test(Number.prototype.format2);
test(Number.prototype.format3);

Benchmark

function benchmark(f) {
    var start = new Date().getTime();
    f();
    return new Date().getTime() - start;
}

function benchmark_format(f) {
    console.log(f);
    time = benchmark(function () {
        for (var i = 0; i < 100000; i++) {
            f.call(123456789, 0);
            f.call(123456789, 2);
        }
    });
    console.log(time.format(0) + 'ms');
}

async = [];
function next() {
    setTimeout(function () {
        f = async.shift();
        f && f();
        next();
    }, 10);
}

console.log('======== Benchmark ========');
async.push(function () { benchmark_format(Number.prototype.format); });
async.push(function () { benchmark_format(Number.prototype.format1); });
async.push(function () { benchmark_format(Number.prototype.format2); });
async.push(function () { benchmark_format(Number.prototype.format3); });
next();

score 7 · Answer 6 · answered Oct 02 '12 at 21:50

7

If you don't want to use jQuery, take a look at Numeral.js

answered Oct 02 '12 at 21:50

adamwdraper

193
3
4

score 4 · Answer 7 · answered Aug 19 '11 at 16:56

4

Firstly, converting an integer into string in JS is really simple:

// Start off with a number
var number = 42;
// Convert into a string by appending an empty (or whatever you like as a string) to it
var string = 42+'';
// No extra conversion is needed, even though you could actually do
var alsoString = number.toString();

If you have a number as a string and want it to be turned to an integer, you have to use the parseInt(string) for integers and parseFloat(string) for floats. Both of these functions then return the desired integer/float. Example:

// Start off with a float as a string
var stringFloat = '3.14';
// And an int as a string
var stringInt = '42';

// typeof stringInt  would give you 'string'

// Get the real float from the string
var realFloat = parseFloat(someFloat);
// Same for the int
var realInt = parseInt(stringInt);

// but typeof realInt  will now give you 'number'

What exactly are you trying to append etc, remains unclear to me from your question.

answered Aug 19 '11 at 16:56

zatatatata

4,761
1
20
41

thanks for that. Did you view my code on jsfiddle? I basically understand how to convert an integer to a string - what I don't understand, since I'm not very proficient at js yet, is how to do it with the context of the script that I'm using. Any further insights? – blackessej Aug 19 '11 at 17:10
@blackessej I don't understand what has to be appended after a coma. If it's just counting, I'd suggest using float, and if you want 2 decimal places for example, you could simply increment the number by 0.01 each time, not by 1. – zatatatata Aug 19 '11 at 17:16
you'll really have to bear with me - I don't understand how to convert my number to a string within my code. – blackessej Aug 19 '11 at 17:18
Please be sure to use `parseInt(..., 10)` though, to make sure base 10 is used. – pimvdb Aug 19 '11 at 17:29
Not an answer to the question. He wants (and so do I) to turn `XXXXXXX.YYYY` into `X,XXX,XXX.YYYY`. – Tomáš Zato Jul 07 '14 at 16:58

gavenkoa · Answer 8 · 2014-07-07T18:20:59.067

3

http://code.google.com/p/javascript-number-formatter/ :

Short, fast, flexible yet standalone. Only 75 lines including MIT license info, blank lines & comments.
Accept standard number formatting like #,##0.00 or with negation -000.####.
Accept any country format like # ##0,00, #,###.##, #'###.## or any type of non-numbering symbol.
Accept any numbers of digit grouping. #,##,#0.000 or #,###0.## are all valid.
Accept any redundant/fool-proof formatting. ##,###,##.# or 0#,#00#.###0# are all OK.
Auto number rounding.
Simple interface, just supply mask & value like this: format( "0.0000", 3.141592)

UPDATE

As say Tomáš Zato here one line solution:

(666.0).toLocaleString()
numObj.toLocaleString([locales [, options]])

which described in ECMA-262 5.1 Edition:

and will work in future versions of browsers...

edited Jul 07 '14 at 18:20

answered Jan 15 '13 at 14:08

gavenkoa

45,285
19
251
303

Because I don't want to use library when I just need a simple function...? – Tomáš Zato Jul 07 '14 at 16:59
Is that simple function: https://code.google.com/p/javascript-number-formatter/source/browse/format.js ? I think - yes (60 lines of code). – gavenkoa Jul 07 '14 at 17:09
You have very properly said *"I think"*. That's because whether something is simple or not is matter of opinion. There is no absolute truth amongst opinions giving us chance to have endless arguments. – Tomáš Zato Jul 07 '14 at 17:28
This is SO and your behavior is typical among SO users. – gavenkoa Jul 07 '14 at 17:33
2

Seems you're really ready to go flaming over my comment. Don't you have anything better to do? Anyway, a one liner cross-country code is `(6666.0).toLocaleString()`. And you're welcome to call any behavior whatever you want if you're aware that such comments are out of topic and might disappear. Also please stop trying to make me undownvote your post. You're doomed to fail because I didn't downvote it... I prever comments over downvotes. – Tomáš Zato Jul 07 '14 at 17:58
Also I agree with your "*When downvote write why!*". However I'm dissapoined that you actually don't seem to want to know the answer. You just want to argue. – Tomáš Zato Jul 07 '14 at 17:59
This library pushed to Google code just in time when ECMA-262 5.1 Edition released (June 2011). `toLocaleString()` is good thing and I don't know about it. Now I understand your arguments. Thanks! – gavenkoa Jul 07 '14 at 18:18

score 2 · Answer 9 · answered Oct 24 '12 at 07:26

2

For example:

var flt = '5.99';
var nt = '6';

var rflt = parseFloat(flt);
var rnt = parseInt(nt);

answered Oct 24 '12 at 07:26

Jake Badlands

1,016
3
23
46

score 1 · Answer 10 · answered Dec 13 '13 at 10:49

1

To get a decimal with 2 numbers after the comma, you could just use:

function nformat(a) {
   var b = parseInt(parseFloat(a)*100)/100;
   return b.toFixed(2);
}

answered Dec 13 '13 at 10:49

Nekudotayim

173
5

score 1 · Answer 11 · answered Feb 09 '18 at 10:47

1

May I suggest numbro for locale based formatting and number-format.js for the general case. A combination of the two depending on use-case may help.

answered Feb 09 '18 at 10:47

John Stephenson

499
4
13

score 1 · Answer 12 · answered Feb 24 '12 at 11:57

Using JQuery.

$(document).ready(function()
 {
    //Only number and one dot
    function onlyDecimal(element, decimals)
    {
        $(element).keypress(function(event)
        {
            num = $(this).val() ;
            num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
            {
                event.preventDefault();

            }
            if($(this).val() == parseFloat(num).toFixed(decimals))
            {
                event.preventDefault();
            }
        });
    }

     onlyDecimal("#TextBox1", 3) ;



});

score 0 · Answer 13 · edited Apr 23 '13 at 04:14

Here's another version:

$.fn.digits = function () {
    return this.each(function () {
        var value = $(this).text();
        var decimal = "";
        if (value) {
            var pos = value.indexOf(".");
            if (pos >= 0) {
                decimal = value.substring(pos);
                value = value.substring(0, pos);
            }
            if (value) {
                value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                $(this).text(value);
            }
        }
        else {
            value = $(this).val()
            if (value) {
                var pos = value.indexOf(".");
                if (pos >= 0) {
                    decimal = value.substring(pos);
                    value = value.substring(0, pos);
                }
                if (value) {
                    value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                    if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                    $(this).val(value);
                }
            }
        }
    })
};

score 0 · Answer 14 · answered Apr 22 '15 at 17:23

I made a simple function, maybe someone can use it

function secsToTime(secs){
  function format(number){
    if(number===0){
      return '00';
    }else {
      if (number < 10) {
          return '0' + number
      } else{
          return ''+number;
      }
    }
  }

  var minutes = Math.floor(secs/60)%60;
  var hours = Math.floor(secs/(60*60))%24;
  var days = Math.floor(secs/(60*60*24));
  var seconds = Math.floor(secs)%60;

  return (days>0? days+"d " : "")+format(hours)+':'+format(minutes)+':'+format(seconds);
}

this can generate the followings outputs:

5d 02:53:39
4d 22:15:16
03:01:05
00:00:00

score 0 · Answer 15 · answered May 15 '16 at 20:07

In case you want to format number for view rather than for calculation you can use this

function numberFormat( number ){

    var digitCount = (number+"").length;
    var formatedNumber = number+"";
    var ind = digitCount%3 || 3;
    var temparr = formatedNumber.split('');

    if( digitCount > 3 && digitCount <= 6 ){

        temparr.splice(ind,0,',');
        formatedNumber = temparr.join('');

    }else if (digitCount >= 7 && digitCount <= 15) {
        var temparr2 = temparr.slice(0, ind);
        temparr2.push(',');
        temparr2.push(temparr[ind]);
        temparr2.push(temparr[ind + 1]);
        // temparr2.push( temparr[ind + 2] ); 
        if (digitCount >= 7 && digitCount <= 9) {
            temparr2.push(" million");
        } else if (digitCount >= 10 && digitCount <= 12) {
            temparr2.push(" billion");
        } else if (digitCount >= 13 && digitCount <= 15) {
            temparr2.push(" trillion");

        }
        formatedNumber = temparr2.join('');
    }
    return formatedNumber;
}

Input: {Integer} Number

Outputs: {String} Number

22,870 => if number 22870

22,87 million => if number 2287xxxx (x can be whatever)

22,87 billion => if number 2287xxxxxxx

22,87 trillion => if number 2287xxxxxxxxxx

You get the idea

score 0 · Answer 16 · answered Sep 28 '17 at 22:37

To further jfriend00's answer (I dont't have enough points to comment) I have extended his/her answer to the following:

function log(args) {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === "object") {
            str += JSON.stringify(arguments[i]);
        } else {
            str += arguments[i];
        }
    }
    var div = document.createElement("div");
    div.innerHTML = str;
    document.body.appendChild(div);
}

Number.prototype.addCommas = function (str) {
    if (str === undefined) {
     str = this;
    }
    
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;
    
    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
       first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

var testCases = [
    1, 12, 123, -1234, 12345, 123456, -1234567, 12345678, 123456789,
    -1.1, 12.1, 123.1, 1234.1, -12345.1, -123456.1, -1234567.1, 12345678.1, 123456789.1
];
 
for (var i = 0; i < testCases.length; i++) {
 log(testCases[i].addCommas());
}
 
/*for (var i = 0; i < testCases.length; i++) {
    log(Number.addCommas(testCases[i]));
}*/

jin_maxtor · Answer 17 · 2020-05-25T00:26:27.293

You can do it in the following way: So you will not only format the number but you can also pass as a parameter how many decimal digits to display, you set a custom decimal and mile separator.

function format(number, decimals = 2, decimalSeparator = '.', thousandsSeparator = ',') {
    const roundedNumber = number.toFixed(decimals);
    let integerPart = '', fractionalPart = '';
    if (decimals == 0) {
        integerPart = roundedNumber;
        decimalSeparator = '';
    } else {
        let numberParts = roundedNumber.split('.');
        integerPart = numberParts[0];
        fractionalPart = numberParts[1];
    }
    integerPart = integerPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, `$1${thousandsSeparator}`);
    return `${integerPart}${decimalSeparator}${fractionalPart}`;
}

Use:

let min = 1556454.0001;
let max = 15556982.9999;
console.time('number format');
for (let i = 0; i < 15000; i++) {
    let randomNumber = Math.random() * (max - min) + min;

    let formated = format(randomNumber, 4, ',', '.'); // formated number

    console.debug('number: ', randomNumber, 'formated: ', formated);
}
console.timeEnd('number format');

Remember to use === instead of == where you are checking `if (decimals == 0) {` - it should be `if (decimals === 0) {` — Gabriel Graves, Sep 14 '21 at 06:47