What is the JS equivalent to the PHP function number_format?

Question

PHP Function:

function formatNumberForDisplay($number, $decimal=0, $decimalSeperator='.', $numberSeperator=',')
{
     return number_format($number, $decimal, $decimalSeperator, $numberSeperator);
}

Can anybody suggest to me the equivalent functionality in jQuery/JavaScript?

http://stackoverflow.com/questions/1068284/format-numbers-in-javascript — Bhavik Maneck, Oct 10 '12 at 13:23

score 115 · Answer 1 · answered Dec 07 '15 at 19:42

The same equivalent of number_format in js can found here

function number_format (number, decimals, dec_point, thousands_sep) {
    // Strip all characters but numerical ones.
    number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
    var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            return '' + Math.round(n * k) / k;
        };
    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

Even though this was posted quite a while ago, I still thought I'd say thank you - this brilliant answer saved my day! — The Codesee, Jun 25 '16 at 09:16

Ahmed-Anas · Answer 2 · 2018-10-25T08:50:33.090

55

Just use toLocaleString on an integer object.

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

let x = 1234567;
//if x is a string/non-number, use parseInt/parseFloat to convert to a number. Thanks @Aleksandr Kopelevich
x.toLocaleString('us', {minimumFractionDigits: 2, maximumFractionDigits: 2})

edited Oct 25 '18 at 08:50

answered Dec 15 '16 at 07:47

Ahmed-Anas

5,471
9
50
72

15

This should be the right answer. Just one thing though: this function doesnt work with Strings. So if you are getting the value directly from a JSON object (for example), apply a parseInt() or parseFloat() to this string. – AKOP Jun 04 '18 at 05:10

score 50 · Accepted Answer · edited May 11 '16 at 07:19

50

is this what you'd like to get?

yourFloatVarHere.toFixed(2);

voilà.

edited May 11 '16 at 07:19

Raptor

53,206
45
230
366

answered Jan 15 '13 at 19:16

MoVod

1,083
10
10

24

@MoVod: what about formatting number like 1 340.23 or 1,340.00(note thousand separator)? – zergussino Aug 08 '13 at 11:33
3

toFixed() rounds up decimal point when it is >5, but number_format() in php does when decimal point is >=5. I am having an issue in validation – Annapurna Feb 21 '18 at 09:10
25

This doesn't even do half the job of PHP's [number_format()](http://php.net/manual/en/function.number-format.php) unfortunately. – BadHorsie Mar 01 '18 at 16:27
2

insufficient. if you run `(95**12).toFixed(0)` you get `"5.40360087662637e+23"`, but if you in php run `number_format(95**12,0)` you get `540,360,087,662,636,990,201,856` – hanshenrik Oct 03 '20 at 13:09

Artur INTECH · Answer 4 · 2015-03-25T13:18:04.420

19

Native "Intl" object approach:

var amount = 5000.25;
var locale = 'de';
var options = {style: 'currency', currency: 'eur', minimumFractionDigits: 2, maximumFractionDigits: 2};
var formatter = new Intl.NumberFormat(locale, options);

console.log(formatter.format(amount));

http://jsfiddle.net/arturrelax/sa9jL138/1/

More information at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

edited Mar 25 '15 at 13:18

answered Dec 12 '14 at 08:01

Artur INTECH

6,024
2
37
34

2

Browser compatibility note: Mobile Safari and IE < 11 are not supported. Not suggested to use. – Raptor May 11 '16 at 07:20

Vasileios Pallas · Answer 5 · 2020-10-04T19:08:35.427

I know it's an old thread, but I made my own function, which is in pure Javascript.

Simple Solution

https://gist.github.com/VassilisPallas/d73632e9de4794b7dd10b7408f7948e8/bf17eccef8521b4e5869bdc6a5b09a771356fbff

This works fine with finite numbers

function number_format(number, decimals, dec_point, thousands_point) {

    if (number == null || !isFinite(number)) {
        throw new TypeError("number is not valid");
    }

    if (!decimals) {
        var len = number.toString().split('.').length;
        decimals = len > 1 ? len : 0;
    }

    if (!dec_point) {
        dec_point = '.';
    }

    if (!thousands_point) {
        thousands_point = ',';
    }

    number = parseFloat(number).toFixed(decimals);

    number = number.replace(".", dec_point);

    var splitNum = number.split(dec_point);
    splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_point);
    number = splitNum.join(dec_point);

    return number;
}

Complex Solution

This solves the issue with big numbers

https://gist.github.com/VassilisPallas/d73632e9de4794b7dd10b7408f7948e8

 const splitThousands = (number) => (dec_point, thousands_point) => {
  const splitNum = number.toString().split(dec_point);
  splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_point);
  return splitNum.join(dec_point);
};

const isBigNumber = (number) => number.toString().includes("e");

const isBigFloat = (number) => number.toString().includes("-");

const calcTrailing = (dec, len) => Number(dec) + 2 - len;

const handleBigFloats = (number, decimals) => {
  if (!decimals) {
    return "0";
  }

  const [numbers, dec] = number.toString().replace(".", "").split("e-");
  const trailingZeros = calcTrailing(dec, numbers.length);
  const res = `${"0.".padEnd(trailingZeros + 2, "0")}${numbers}`;

  return decimals ? res.substring(0, 2) + res.substring(2, decimals + 2) : res;
};

const handleBigNumbers = (number, decimals, dec_point, thousands_point) => {
  if (isBigFloat(number)) {
    return handleBigFloats(number, decimals);
  }

  return splitThousands(BigInt(number))(dec_point, thousands_point);
};

function handleFiniteNumbers(number, decimals, dec_point, thousands_point) {
  if (!isFinite(number)) {
    throw new TypeError("number is not finite number");
  }

  if (!decimals) {
    const len = number.toString().split(".").length;
    decimals = len > 1 ? len : 0;
  }

  return splitThousands(
    parseFloat(number).toFixed(decimals).replace(".", dec_point)
  )(dec_point, thousands_point);
}

const numberFormat = (
  number,
  decimals,
  dec_point = ".",
  thousands_point = ","
) => {
  if (number == null || typeof number !== "number") {
    throw new TypeError("number is not valid");
  }

  if (isBigNumber(number)) {
    return handleBigNumbers(number, decimals, dec_point, thousands_point);
  }

  return handleFiniteNumbers(number, decimals, dec_point, thousands_point);
};

https://jsfiddle.net/p2ft9n4v/1/

found a bug: if you run ```number_format(95**12,0)``` in your function you get `"5.40360087662637e+23"`, but if you run it in php you get `"540,360,087,662,636,990,201,856"` — hanshenrik, Oct 03 '20 at 22:35

score 16 · Answer 6 · answered Jan 17 '20 at 22:08

16

Closer function to php number_format($number) should be number.toLocaleString('en') of javascript

answered Jan 17 '20 at 22:08

Mihai Galan

400
4
13

2

This is a great suggestion. To take it a step further, I'd add parseInt() to it: parseInt(data).toLocaleString('en'); – phoenix May 30 '20 at 15:44

score 7 · Answer 7 · edited Jul 18 '16 at 07:57

7

Here is another short solution that should behaviour like the php-equivalent.

function number_format(number,decimals,dec_point,thousands_sep) {
    number  = number*1;//makes sure `number` is numeric value
    var str = number.toFixed(decimals?decimals:0).toString().split('.');
    var parts = [];
    for ( var i=str[0].length; i>0; i-=3 ) {
        parts.unshift(str[0].substring(Math.max(0,i-3),i));
    }
    str[0] = parts.join(thousands_sep?thousands_sep:',');
    return str.join(dec_point?dec_point:'.');
}

edited Jul 18 '16 at 07:57

Oki Erie Rinaldi

1,835
1
22
31

answered Jan 15 '16 at 18:05

Dennis Bohn

121
1
5

2

love this kind of short function. but, we have to force `number` as a number/integer by adding `number = number*1;` at the first line in the function. because sometimes the browser recognizes it as a string, and then `toFixed` function will not be recognized (undefined function number.toFixed()) – Oki Erie Rinaldi Jul 18 '16 at 07:04

spreadzz · Answer 8 · 2014-11-24T12:18:14.290

Here is a simple function that you can use to achieve almost the same result of number_format in php:

function number_format(user_input){
    var filtered_number = user_input.replace(/[^0-9]/gi, '');
    var length = filtered_number.length;
    var breakpoint = 1;
    var formated_number = '';

    for(i = 1; i <= length; i++){
        if(breakpoint > 3){
            breakpoint = 1;
            formated_number = ',' + formated_number;
        }
        var next_letter = i + 1;
        formated_number = filtered_number.substring(length - i, length - (i - 1)) + formated_number; 

        breakpoint++;
    }

    return formated_number;
}

Another way is to use ajax to make a call to a php script where you run number_format on the number and return it with ajax as a string. But it`s a bit messy.

score 1 · Answer 9 · answered Oct 10 '12 at 13:24

1

It no easy, try to use simple jquery-plugins such as:

jquery-numberformatter

Jquery-Price-Format

answered Oct 10 '12 at 13:24

RDK

4,540
2
20
29

score 0 · Answer 10 · answered Sep 27 '16 at 08:24

My take on this:

var number_format = function(num) {
  stringNum = num.toString();
  stringNum = stringNum.split("");
  c = 0;
  if (stringNum.length>3) {
    for (i=stringNum.length; i>-1; i--) {
      if ( (c==3) && ((stringNum.length-i)!=stringNum.length) ) {
        stringNum.splice(i, 0, ",");
        c=0;
      }
      c++
    }
    return stringNum;
  }
  return num;
}

$("body").append(number_format(100000000));

Максим Калябин · Answer 11 · 2019-01-30T08:53:44.730

Another variant of exposed examples:

const numberFormat = (value, decimals, decPoint, thousandsSep) => {
    decPoint = decPoint || '.';
    decimals = decimals !== undefined ? decimals : 2;
    thousandsSep = thousandsSep || ' ';

    if (typeof value === 'string') {
        value = parseFloat(value);
    }

    let result = value.toLocaleString('en-US', {
        maximumFractionDigits: decimals,
        minimumFractionDigits: decimals
    });

    let pieces = result.split('.');
    pieces[0] = pieces[0].split(',').join(thousandsSep);

    return pieces.join(decPoint);
};

Subasish Prodhan · Answer 12 · 2021-11-03T20:08:01.713

0

The JS equivalent will be:

var number = //input value

parseFloat(number).toFixed(3);

edited Nov 03 '21 at 20:08

answered Nov 02 '21 at 17:30

Subasish Prodhan

9
2

PHP: number_format(10000) => 100,00 parseFloat(10000).toFixed(3) => 10000.000 Not the same result, also it does not add, for thousands. – Firas Abd Alrahman Dec 03 '22 at 21:04

score 0 · Answer 13 · answered May 16 '23 at 08:18

var value = 500000 

Number(value).toLocalString();

Output will be

500,000

Please be aware if the value is retrieved from a function or anywhere you have to ensure that if the value is a string or number since I use the Number() function to convert the value from string to number.

score -3 · Answer 14 · answered May 10 '19 at 12:25

-3

I'm to do it just calling the JS function as follows and it works:

var formattedNumber = number_format(value)

answered May 10 '19 at 12:25

Ajju

3
2

What is the JS equivalent to the PHP function number_format?

14 Answers14

Simple Solution

Complex Solution

Linked

Related