How to format numbers

Question

I want to format numbers using JavaScript  For example  10       gt  10 00 100      gt  100 00 1000     gt  1 000 00 10000    gt  10 000 00 100000   gt  100 000 00

User · Answer

On browsers that support the ECMAScript   2016 Internationalization API Specification  ECMA-402   you can use an Intl NumberFormat instance   var nf   Intl NumberFormat    var x   42000000  console log nf format x       42 000 000 in many locales                               42 000 000 in many other locales    x000D   x000D  if  typeof Intl      undefined      Intl NumberFormat    x000D    console log  This browser doesn t support Intl NumberFormat    x000D    else   x000D    var nf   Intl NumberFormat    x000D    var x   42000000  x000D    console log nf format x       42 000 000 in many locales x000D                                  42 000 000 in many other locales x000D    x000D   x000D   x000D

User · Answer

Use the Number function toFixed and this function to add the commas   function addCommas nStr        nStr            var x   nStr split           var x1   x 0       var x2   x length  gt  1         x 1            var rgx      d    d 3         while  rgx test x1             x1   x1 replace rgx    1            2              return x1   x2    n   10000  r   n toFixed 2     10000 00  addCommas r      10 000 00   http   www mredkj com javascript numberFormat html

User · Answer

If you want to use built-in code  you can use toLocaleString   with minimumFractionDigits  Browser compatibility for the extended options on toLocaleString   was limited when I first wrote this answer  but the current status looks good   x000D   x000D  var n   100000  var value   n toLocaleString    undefined     leave undefined to use the browser s locale                  or use a string like  en-US  to override it      minimumFractionDigits  2      console log value      In en-US  logs  100 000 00     In de-DE  logs  100 000 00     In hi-IN  logs  1 00 000 00  x000D   x000D   x000D   If you re using Node js  you will need to npm install the intl package

User · Answer

Due to the bugs found by JasperV  mdash  good points   mdash  I have rewritten my old code  I guess I only ever used this for positive values with two decimal places   Depending on what you are trying to achieve  you may want rounding or not  so here are two versions split across that divide   First up  with rounding   I ve introduced the toFixed   method as it better handles rounding to specific decimal places accurately and is well support  It does slow things down however   This version still detaches the decimal  but using a different method than before  The w 0 part removes the decimal  For more information on that  this is a good answer  This then leaves the remaining integer  stores it in k and then subtracts it again from the original number  leaving the decimal by itself   Also  if we re to take negative numbers into account  we need to while loop  skipping three digits  until we hit b  This has been calculated to be 1 when dealing with negative numbers to avoid putting something like - 100 00  The rest of the loop is the same as before   function formatThousandsWithRounding n  dp     var w   n toFixed dp   k   w 0  b   n  lt  0   1   0        u   Math abs w-k   d       u toFixed dp   substr 2  dp         s      k  i   s length  r         while    i- 3   gt  b     r         s substr i  3    r      return s substr 0  i   3    r    d       d            In the snippet below you can edit the numbers to test yourself    x000D   x000D  function formatThousandsWithRounding n  dp   x000D    var w   n toFixed dp   k   w 0  b   n  lt  0   1   0  x000D        u   Math abs w-k   d       u toFixed dp   substr 2  dp   x000D        s      k  i   s length  r       x000D    while    i- 3   gt  b     r         s substr i  3    r    x000D    return s substr 0  i   3    r    d       d       x000D     x000D   x000D  var dp  x000D  var createInput   function v   x000D    var inp   jQuery   lt input class  input    gt    val v   x000D    var eql   jQuery   lt span gt  amp nbsp   amp nbsp  lt  span gt     x000D    var out   jQuery   lt div class  output    gt    css  display    inline-block    x000D    var row   jQuery   lt div class  row    gt     x000D    row append inp  append eql  append out   x000D    inp keyup function    x000D      out text formatThousandsWithRounding Number inp val     Number dp val       x000D        x000D    inp keyup    x000D    jQuery  body   append row   x000D    return inp  x000D     x000D   x000D  jQuery function    x000D    var numbers     x000D      0  99 999  -1000  -1000000  1000000 42  -1000000 57  -1000000 999 x000D       inputs        x000D    dp   jQuery   dp    x000D    for   var i 0  i lt numbers length  i       x000D      inputs   inputs add createInput numbers i     x000D      x000D    dp on  input change   function    x000D      inputs keyup    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  dp  type  range  min  0  max  5  step  1  value  2  title  number of decimal places     gt  x000D   x000D   x000D    Now the other version  without rounding   This takes a different route and attempts to avoid mathematical calculation  as this can introduce rounding  or rounding errors   If you don t want rounding  then you are only dealing with things as a string i e  1000 999 converted to two decimal places will only ever be 1000 99 and not 1001 00   This method avoids using  split   and RegExp   however  both of which are very slow in comparison  And whilst I learned something new from Michael s answer about toLocaleString  I also was surprised to learn that it is  mdash  by quite a way  mdash  the slowest method out of them all  at least in Firefox and Chrome  Mac OSX    Using lastIndexOf   we find the possibly existent decimal point  and from there everything else is pretty much the same  Save for the padding with extra 0s where needed  This code is limited to 5 decimal places  Out of my test this was the faster method   var formatThousandsNoRounding   function n  dp     var e       s   e n  l   s length  b   n  lt  0   1   0        i   s lastIndexOf       j   i    -1   l   i        r   e  d   s substr j 1  dp     while    j- 3   gt  b     r         s substr j  3    r      return s substr 0  j   3    r         dp         d     d length  lt  dp              00000   substr 0  dp - d length  e  e         x000D   x000D  var formatThousandsNoRounding   function n  dp   x000D    var e       s   e n  l   s length  b   n  lt  0   1   0  x000D        i   s lastIndexOf       j   i    -1   l   i  x000D        r   e  d   s substr j 1  dp   x000D    while    j- 3   gt  b     r         s substr j  3    r    x000D    return s substr 0  j   3    r    x000D      dp         d     d length  lt  dp    x000D         00000   substr 0  dp - d length  e  e   x000D     x000D   x000D  var dp  x000D  var createInput   function v   x000D    var inp   jQuery   lt input class  input    gt    val v   x000D    var eql   jQuery   lt span gt  amp nbsp   amp nbsp  lt  span gt     x000D    var out   jQuery   lt div class  output    gt    css  display    inline-block    x000D    var row   jQuery   lt div class  row    gt     x000D    row append inp  append eql  append out   x000D    inp keyup function    x000D      out text formatThousandsNoRounding Number inp val     Number dp val       x000D        x000D    inp keyup    x000D    jQuery  body   append row   x000D    return inp  x000D     x000D   x000D  jQuery function    x000D    var numbers     x000D      0  99 999  -1000  -1000000  1000000 42  -1000000 57  -1000000 999 x000D       inputs        x000D    dp   jQuery   dp    x000D    for   var i 0  i lt numbers length  i       x000D      inputs   inputs add createInput numbers i     x000D      x000D    dp on  input change   function    x000D      inputs keyup    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  dp  type  range  min  0  max  5  step  1  value  2  title  number of decimal places     gt  x000D   x000D   x000D    I ll update with an in-page snippet demo shortly  but for now here is a fiddle   https   jsfiddle net bv2ort0a 2     Old Method  Why use RegExp for this   mdash  don t use a hammer when a toothpick will do i e  use string manipulation   var formatThousands   function n  dp     var s       Math floor n    d   n   1  i   s length  r         while    i -  3   gt  0     r         s substr i  3    r      return s substr 0  i   3    r         d         Math round d   Math pow 10  dp    2               walk through  formatThousands  1000000 42      First strip off decimal   s    1000000   d     0 42   Work backwards from the end of the string          000         000      000    Finalise by adding the leftover prefix and the decimal suffix  with rounding to dp no  decimal points     1      000 000      42    fiddlesticks  http   jsfiddle net XC3sS

User · Answer

Use   num   num toFixed 2     Where 2 is the number of decimal places  Edit   Here s the function to format number as you want  function formatNumber number        number   number toFixed 2            x   number split           x1   x 0       x2   x length  gt  1         x 1            var rgx      d    d 3         while  rgx test x1             x1   x1 replace rgx    1            2              return x1   x2      Sorce  www mredkj com

User · Answer

You may want to consider using toLocaleString   Working Example   x000D   x000D  const number   1234567890 123   console log number toLocaleString  en-US        US format  console log number toLocaleString  en-IN        Indian format x000D   x000D   x000D   Tested in Chrome v60 and v88 Source  Number prototype toLocaleString     MDN

User · Answer

function formatNumber1 number      var comma              string   Math max 0  number  toFixed 0         length   string length        end      d 4     test string    length   3   0    return  end   string slice 0  end    comma         string slice end  replace    d 3      d  g    1    comma        function formatNumber2 number      return Math max 0  number  toFixed 0  replace         d 3           g             Source  http   jsperf com number-format

User · Answer

Let me also throw my solution in here  I ve commented each line for ease of reading and also provided some examples  so it may look big    x000D   x000D  function format number    x000D   x000D      var decimalSeparator        x000D      var thousandSeparator        x000D   x000D         make sure we have a string x000D      var result   String number   x000D   x000D         split the number in the integer and decimals  if any x000D      var parts   result split decimalSeparator   x000D   x000D         if we don t have decimals  add  00 x000D      if   parts 1     x000D        parts 1     00   x000D        x000D     x000D         reverse the string  1719 becomes 9171  x000D      result   parts 0  split     reverse   join      x000D   x000D         add thousand separator each 3 characters  except at the end of the string x000D      result   result replace    d 3        g    1    thousandSeparator   x000D   x000D         reverse back the integer and replace the original integer x000D      parts 0    result split     reverse   join      x000D   x000D         recombine integer with decimals x000D      return parts join decimalSeparator   x000D    x000D   x000D  document write  10   gt      format 10      lt br  gt     x000D  document write  100   gt      format 100      lt br  gt     x000D  document write  1000   gt      format 1000      lt br  gt     x000D  document write  10000   gt      format 10000      lt br  gt     x000D  document write  100000   gt      format 100000      lt br  gt     x000D  document write  100000 22   gt      format 100000 22      lt br  gt     x000D   x000D   x000D

User · Answer

Short solution   var n   1234567890  String n  replace          d 3      g   1        1 234 567 890

User · Answer

Or you could use the  sugar js library  and the format method      format  place   0   thousands         decimal         Formats the number to a readable string  If place is undefined  will automatically   determine the place  thousands is the character used for the thousands   separator  decimal is the character used for the decimal point    Examples    56782  format    gt   56 782   56782  format 2   gt   56 782 00   4388 43  format 2        gt   4 388 43   4388 43  format 3             gt   4 388 430

User · Answer

This will get you your comma seperated values as well as add the fixed notation to the end               nStr  1000       nStr            x   nStr split           x1   x 0       x2   x length  gt  1         x 1            var rgx      d    d 3         while  rgx test x1             x1   x1 replace rgx    1            2              commaSeperated   x1   x2     00       alert commaSeperated     Source

User · Answer

I think with this jQuery-numberformatter you could solve your problem   Of course  this is assuming that you don t have problem with using jQuery in your project  Please notice that the functionality is tied to the blur event    x000D   x000D      salary   blur function    x000D          this  parseNumber  format        00   locale  us     x000D          this  formatNumber  format        00   locale  us     x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  https   cdn jsdelivr net gh timdown jshashtable hashtable js  gt  lt  script gt  x000D   x000D   lt script src  https   cdn jsdelivr net gh hardhub jquery-numberformatter src jquery numberformatter js  gt  lt  script gt  x000D   x000D   lt input type  text  id  salary  gt  x000D   x000D   x000D

User · Answer

x000D   x000D  function numberWithCommas x    x000D    x String x  toString    x000D    var afterPoint       x000D    if x indexOf       gt  0  x000D       afterPoint   x substring x indexOf      x length   x000D    x   Math floor x   x000D    x x toString    x000D    var lastThree   x substring x length-3   x000D    var otherNumbers   x substring 0 x length-3   x000D    if otherNumbers        x000D        lastThree         lastThree  x000D    return otherNumbers replace   B     d 2       d   g         lastThree   afterPoint  x000D    x000D   x000D  console log numberWithCommas 100000    x000D  console log numberWithCommas 10000000    x000D   x000D   x000D    Output     1 00 000    1 00 00 000

User · Answer

function formatThousands n dp f                           dp - decimal places                        f - format  gt  gt   us    eu                      if  n    0                            if f     eu                                 return  0      0  repeat dp                                                        return  0      0  repeat dp                                                 round to 2 decimal places                          n   Math round  n   100     100                      var s       Math floor n    d   n   1  i   s length  r                           while    i -  3   gt  0     r         s substr i  3    r                        var a   s substr 0  i   3    r    d         Math round  d 1    Math pow 10 dp   toString   substr 1 dp                                change format from 20 000 00 to 20 000 00                        if  f     eu                             var b   a toString   replace                                    b   b replace                                    return b replace                                                                         return a

User · Answer

This is about 3 times faster version of the accepted answer  It doesn t create array and avoids object creation and string concatenation for whole numbers at the end  This might be useful if you render lots of values e g  in a table   function addThousandSeparators number        var whole  fraction     var decIndex   number lastIndexOf          if  decIndex  gt  0            whole   number substr 0  decIndex          fraction   number substr decIndex        else           whole   number           var rgx      d    d 3        while  rgx test whole             whole   whole replace rgx    1            2             return fraction   whole   fraction   whole

User · Answer

This is an article about your problem  Adding a thousands-seperator is not built in to JavaScript  so you ll have to write your own function like this  example taken from the linked page    function addSeperator nStr     nStr          x   nStr split         x1   x 0     x2   x length  gt  1         x 1          var rgx      d    d 3       while  rgx test x1         x1   x1 replace rgx    1            2          return x1   x2

User · Answer

If you re using jQuery  you could use the format or number format plugins

[javascript] How to format numbers?

Examples related to javascript