Format number to always show 2 decimal places

Question

I would like to format my numbers to always display 2 decimal places  rounding where applicable   Examples   number     display ------     ------- 1          1 00 1 341      1 34 1 345      1 35   I have been using this    parseFloat num  toFixed 2     But it s displaying 1 as 1  rather than 1 00

User · Answer

x000D   x000D  var num1    0 1   document getElementById  num1   innerHTML    Math round num1   100    100  toFixed 2    var num2    1 341   document getElementById  num2   innerHTML    Math round num2   100    100  toFixed 2    var num3    1 345   document getElementById  num3   innerHTML    Math round num3   100    100  toFixed 2   x000D  span       border  1px solid  000      margin  5px      padding  5px    x000D   lt span id  num1  gt  lt  span gt   lt span id  num2  gt  lt  span gt   lt span id  num3  gt  lt  span gt  x000D   x000D   x000D

User · Answer

parseInt number   100    100  worked for me

User · Answer

Just run into this one of longest thread  below is my solution   parseFloat Math round  parseFloat num   100   toFixed 2     100   toFixed 2    Let me know if anyone can poke a hole

User · Answer

Extend Math object with precision method   x000D   x000D  Object defineProperty Math   precision    x000D     value  function  value precision type   x000D               var v   parseFloat value   x000D                   p   Math max precision 0   0  x000D                   t   type   round   x000D                return  Math t  v Math pow 10 p   Math pow 10 p   toFixed p   x000D              x000D          x000D   x000D  console log  x000D      Math precision 3 1 3      round 3 digits  x000D      Math precision 0 12345 2  ceil       ceil 2 digits x000D      Math precision 1 1     integer part x000D    x000D   x000D   x000D

User · Answer

Is this what you mean    x000D   x000D  function showAsFloat num  n   x000D        return  isNaN  num      num  toFixed n    2    num  x000D    x000D   x000D  document querySelector   result   textContent    x000D        x000D        command                        result   x000D        -----------------------------------------------   x000D        showAsFloat 1                      showAsFloat 1   x000D        showAsFloat 1 314                  showAsFloat 1 314   x000D        showAsFloat   notanumber             showAsFloat  notanumber    x000D        showAsFloat   23 44567    3          showAsFloat  23 44567   3   x000D        showAsFloat 2456198  5             showAsFloat  2456198   5   x000D        showAsFloat 0                      showAsFloat 0  x000D        join   n    x000D   lt pre id  result  gt  lt  pre gt  x000D   x000D   x000D

User · Answer

I had to decide between the parseFloat   and Number   conversions before I could make toFixed   call  Here s an example of a number formatting post-capturing user input   HTML    lt input type  number  class  dec-number  min  0  step  0 01    gt    Event handler       dec-number   on  change   function           const value     this  val           this  val value toFixed 2          The above code will result in TypeError exception  Note that although the html input type is  number   the user input is actually a  string  data type  However  toFixed   function may only be invoked on an object that is a Number   My final code would look as follows       dec-number   on  change   function           const value   Number   this  val            this  val value toFixed 2          The reason I favor to cast with Number   vs  parseFloat   is because I don t have to perform an extra validation neither for an empty input string  nor NaN value  The Number   function would automatically handle an empty string and covert it to zero

User · Answer

RegExp - alternative approach On input you have string  because you use parse  so we can get result by using only string manipulations and integer number calculations  x000D   x000D  let toFix2    n    gt  n replace   -    d      d d   d        s i d r   gt      let k    r 0  gt  5    d -  r  5  amp  amp  s   -      return s     i  k gt 99             k gt 99   00   k gt 9 k  0  k            TESTs  console log toFix2  1     console log toFix2  1 341     console log toFix2  1 345     console log toFix2  1 005     x000D   x000D   x000D   Explanation  s is sign  i is integer part  d are first two digits after dot  r are other digits  we use r 0  value to calc rounding  k contains information about last two digits  represented as integer number  if r 0  is  gt  5 then we add 1 to d - but in case when we have minus number  s   -   and r is exact equal to 5 then in this case we substract 1  for compatibility reasons - in same way Math round works for minus numbers e g Math round -1 5   -1  after that if last two digits k are greater than 99 then we add one to integer part i

User · Answer

For the most accurate rounding  create this function   function round value  decimals        return Number Math round value   e   decimals    e-   decimals  toFixed decimals       and use it to round to 2 decimal places   console log  seeked to     round 1 005  2     gt  1 01   Thanks to Razu  this article  and MDN s Math round reference

User · Answer

var quantity   12   var import1   12 55   var total   quantity   import1   var answer   parseFloat total  toFixed 2    document write answer

User · Answer

x000D   x000D  function number format string decimals 2 decimal     thousands     pre  R    pos   Reais    x000D    var numbers   string toString   match   d  g  join      x000D    numbers   numbers padStart decimals 1   0    x000D    var splitNumbers   numbers split     reverse    x000D    var mask       x000D    splitNumbers forEach function d i   x000D      if  i    decimals    mask   decimal   mask    x000D      if  i gt  decimals 1   amp  amp    i-2   decimals 1    0    mask   thousands   mask    x000D      mask   d   mask  x000D        x000D    return pre   mask   pos  x000D    x000D  var element   document getElementById  format    x000D  var money  number format  10987654321  2           x000D  element innerHTML   money  x000D   format  x000D  display inline-block  x000D  padding 10px  x000D  border 1px solid  ddd  x000D  background  f5f5f5  x000D    x000D   lt div id  format  gt Test 123456789 lt  div gt  x000D   x000D   x000D

User · Answer

You can try this code       function FormatNumber number  numberOfDigits   2            try               return new Intl NumberFormat  en-US   format parseFloat number  toFixed 2              catch  error                return 0                       var test1   FormatNumber  1000000 4444        alert test1      1 000 000 44      var test2   FormatNumber 100000000000 55555555  4       alert test2      100 000 000 000 56

User · Answer

If you re already using jQuery  you could look at using the jQuery Number Format plugin   The plugin can return formatted numbers as a string  you can set decimal  and thousands separators  and you can choose the number of decimals to show     number  123  2       Returns  123 00    You can also get jQuery Number Format from GitHub

User · Answer

For modern browsers  use toLocaleString   var num   1 345  num toLocaleString undefined    maximumFractionDigits  2  minimumFractionDigits  2       Specify a locale tag as first parameter to control the decimal separator  For a dot  use for example English U S  locale   num toLocaleString  en-US     maximumFractionDigits  2  minimumFractionDigits  2       which gives      1 35   Most countries in Europe use a comma as decimal separator  so if you for example use Swedish Sweden locale   num toLocaleString  sv-SE     maximumFractionDigits  2  minimumFractionDigits  2       it will give      1 35

User · Answer

This answer will fail if value   1 005   As a better solution  the rounding problem can be avoided by using numbers represented in exponential notation   Number Math round 1 005  e2    e-2       1 01   Cleaner code as suggested by  Kon  and the original author   Number Math round parseFloat value    e    decimalPlaces      e-    decimalPlaces    You may add toFixed   at the end to retain the decimal point e g  1 00 but note that it will return as string   Number Math round parseFloat value    e    decimalPlaces      e-    decimalPlaces  toFixed decimalPlaces    Credit  Rounding Decimals in JavaScript

User · Answer

here is another solution to round only using floor  meaning  making sure calculated amount won t be bigger than the original amount  sometimes needed for transactions    Math floor num  100   100

User · Answer

I do like   var num   12 749  parseFloat  Math round num   100    100  toFixed 2       123 75   Round the number with 2 decimal points  then make sure to parse it with parseFloat    to return Number  not String unless you don t care if it is String or Number

User · Answer

Math round num   100    100  toFixed 2     Live Demo   x000D   x000D  var num1    1   x000D  document getElementById  num1   innerHTML    Math round num1   100    100  toFixed 2   x000D   x000D  var num2    1 341   x000D  document getElementById  num2   innerHTML    Math round num2   100    100  toFixed 2   x000D   x000D  var num3    1 345   x000D  document getElementById  num3   innerHTML    Math round num3   100    100  toFixed 2   x000D  span   x000D      border  1px solid  000  x000D      margin  5px  x000D      padding  5px  x000D    x000D   lt span id  num1  gt  lt  span gt  x000D   lt span id  num2  gt  lt  span gt  x000D   lt span id  num3  gt  lt  span gt  x000D   x000D   x000D    Note that it will round to 2 decimal places  so the input 1 346 will return 1 35

User · Answer

var num   new Number 14 12   console log num toPrecision 2     outputs 14 console log num toPrecision 3     outputs 14 1 console log num toPrecision 4     outputs 14 12 console log num toPrecision 5     outputs 14 120

User · Answer

Simplest answer   var num   1 2353453  num toFixed 2      1 24   Example  http   jsfiddle net E2XU7

User · Answer

var number   123456 789    console log new Intl NumberFormat  en-IN     maximumFractionDigits  2    format number      https   developer mozilla org en docs Web JavaScript Reference Global Objects NumberFormat

User · Answer

num       replace     0-9       0-9  1 2          1 2

User · Answer

Are you looking for floor   var num   1 42482  var num2   1  var fnum   Math floor num  toFixed 2   var fnum2   Math floor num2  toFixed 2   alert fnum     and     fnum2     both values will be 1 00

User · Answer

Convert a number into a string  keeping only two decimals   var num   5 56789  var n   num toFixed 2     The result of n will be   5 57

User · Answer

Number 1  toFixed 2              1 00 Number 1 341  toFixed 2          1 34 Number 1 345  toFixed 2          1 34 NOTE  See andy s comment below  Number 1 3450001  toFixed 2      1 35    x000D   x000D  document getElementById  line1   innerHTML   Number 1  toFixed 2   x000D  document getElementById  line2   innerHTML   Number 1 341  toFixed 2   x000D  document getElementById  line3   innerHTML   Number 1 345  toFixed 2   x000D  document getElementById  line4   innerHTML   Number 1 3450001  toFixed 2   x000D   lt span id  line1  gt  lt  span gt  x000D   lt br  gt  x000D   lt span id  line2  gt  lt  span gt  x000D   lt br  gt  x000D   lt span id  line3  gt  lt  span gt  x000D   lt br  gt  x000D   lt span id  line4  gt  lt  span gt  x000D   x000D   x000D

User · Answer

A much more generic solution for rounding to N places  function roundN num n     return parseFloat Math round num   Math pow 10  n    Math pow 10 n   toFixed n       console log roundN 1 2   console log roundN 1 34 2   console log roundN 1 35 2   console log roundN 1 344 2   console log roundN 1 345 2   console log roundN 1 344 3   console log roundN 1 345 3   console log roundN 1 3444 3   console log roundN 1 3455 3    Output  1 00 1 34 1 35 1 34 1 35 1 344 1 345 1 344 1 346

User · Answer

function currencyFormat  num        return       num toFixed 2  replace    d      d 3       d   g    1       console info currencyFormat 2665          2 665 00 console info currencyFormat 102665        102 665 00

User · Answer

This is how I solve my problem    parseFloat parseFloat floatString  toFixed 2

User · Answer

Try below code   function numberWithCommas number         var newval   parseFloat Math round number   100    100  toFixed 2       return newval toString   replace   B     d 3       d   g

User · Answer

Where specific formatting is required  you should write your own routine or use a library function that does what you need  The basic ECMAScript functionality is usually insufficient for displaying formatted numbers   A thorough explanation of rounding and formatting is here  http   www merlyn demon co uk js-round htm RiJ  As a general rule  rounding and formatting should only be peformed as a last step before output  Doing so earlier may introduce unexpectedly large errors and destroy the formatting

User · Answer

Here s also a generic function that can format to any number of decimal places   function numberFormat val  decimalPlaces         var multiplier   Math pow 10  decimalPlaces       return  Math round val   multiplier    multiplier  toFixed decimalPlaces

User · Answer

You are not giving us the whole picture    javascript alert parseFloat 1  toFixed 2   shows 1 00 in my browsers when I paste it int0 the location bar   However if you do something to it afterwards  it will revert    var num   2 document getElementById  spanId   innerHTML  parseFloat num  toFixed 2 -1    shows 1 and not 1 00

[javascript] Format number to always show 2 decimal places

Examples related to javascript

Examples related to floating-point

Examples related to number-formatting