{"id":2129,"date":"2018-07-17T19:41:52","date_gmt":"2018-07-18T00:41:52","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2129"},"modified":"2020-12-11T00:18:59","modified_gmt":"2020-12-11T05:18:59","slug":"javascript-format-number-two-decimal-places","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/07\/17\/javascript-format-number-two-decimal-places\/","title":{"rendered":"JavaScript: How to format a number to two decimal places"},"content":{"rendered":"<p>Let&#8217;s say we need to present a number on a web page so that it is always a floating point number with two decimal places. This is for cases where absolute precision is not needed but we want to always present a number output in a uniform way.<\/p>\n<p>Here is an example of how to format a long floating point number to two decimal places using JavaScripts <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">Number()<\/code> object and <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">toFixed()<\/code>\u00a0 function:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">let price = 8.333333333333;\nlet priceRounded = Number((price).toFixed(2));\nconsole.log('Original Price: ' + price);\nconsole.log('Price Rounded: ' + priceRounded);<\/pre>\n<p>which yields:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"raw\">Original Price: 8.333333333333\nPrice Rounded: 8.33<\/pre>\n<p>Here is what developer.mozilla.org says about <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">Number()<\/code>:<\/p>\n<blockquote><p>The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor.<\/p>\n<p>The primary uses of the Number object are:<\/p>\n<p>If the argument cannot be converted into a number, it returns NaN.<br \/>\nIn a non-constructor context (i.e., without the new operator), Number can be used to perform a type conversion.<\/p><\/blockquote>\n<p>w3schools says this about <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">Number()<\/code>:<\/p>\n<blockquote><p>The Number() function converts the object argument to a number that represents the object&#8217;s value.<\/p>\n<p>If the value cannot be converted to a legal number, NaN is returned.<\/p>\n<p>Note: If the parameter is a Date object, the Number() function returns the number of milliseconds since midnight January 1, 1970 UTC.<\/p><\/blockquote>\n<p>The <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">numObj.toFixed(digits)<\/code> function basically takes in a number and returns a string with the number of decimal places specified in the parenthesis.<\/p>\n<p>For more information about Number, see:<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Number\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Number<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/jsref_Number.asp\">https:\/\/www.w3schools.com\/jsref\/jsref_Number.asp<\/a><\/p>\n<p>For more information about toFixed(), see:<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Number\/toFixed\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Number\/toFixed<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/jsref_tofixed.asp\">https:\/\/www.w3schools.com\/jsref\/jsref_tofixed.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s say we need to present a number on a web page so that it is always a floating point number with two decimal places. This is for cases where absolute precision is not needed but we want to always present a number output in a uniform way. Here is an example of how to &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/07\/17\/javascript-format-number-two-decimal-places\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: How to format a number to two decimal places<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[45,146,145],"class_list":["post-2129","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-javascript","tag-number","tag-tofixed"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2129"}],"version-history":[{"count":9,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2129\/revisions"}],"predecessor-version":[{"id":3265,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2129\/revisions\/3265"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}