{"id":1398,"date":"2016-07-15T23:06:09","date_gmt":"2016-07-15T17:06:09","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=1398"},"modified":"2017-04-01T02:51:33","modified_gmt":"2017-03-31T20:51:33","slug":"comma-separate-number-javascript-safari-compatiable","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/comma-separate-number-javascript-safari-compatiable\/","title":{"rendered":"Comma Separate Number in Javascript – Safari Compatiable"},"content":{"rendered":"

JS Comma Separate Number – Not-Browser Compliant<\/h2>\n

In Javascript, it’s quite simple to convert a straight number to a number with thousands-place commas.<\/p>\n

var number = 1234;  \/\/ number\r\nnumber.toLocaleString();\r\n\r\n\/\/ Output (Most Browsers):\r\n\/\/ 1,234\r\n\r\n\/\/ Output (Safari):\r\n\/\/ 1234<\/pre>\n
And if your number was a string, you can simply do something like this to make it work as well:<\/p>\n
var number = \"1234\"  \/\/ string\r\nparseInt( number ).toLocaleString();<\/pre>\n
\/\/ Output (Most Browsers):\r\n\/\/ 1,234\r\n\r\n\/\/ Output (Safari):\r\n\/\/ 1234<\/pre>\n
As you can see above though,\u00a0– it doesn’t work on Safari web browsers. \u00a0That is true for both desktop and iOS mobile phones\/tablets.<\/p>\n
\"How<\/a>
How to add a comma in the thousands place using Javascript so it’s compatible with all browsers – including Safari.<\/figcaption><\/figure>\n
JS Comma Separate Number – Browser Compliant<\/h2>\n
To fix this, you need to create a slightly more complex formula, but it can still be done in one line if you’d like.<\/p>\n
var number = 1234;  \/\/ number\r\nnumber.toString().replace(\/.(?=(?:.{3})+$)\/g, '$&,')\r\n\r\n\/\/ Output (Most Browsers):\r\n\/\/ 1,234\r\n\r\n\/\/ Output (Safari):\r\n\/\/ 1,234\r\n<\/pre>\n
You could also create a function out of this if you’d like to make it a bit cleaner to reuse.<\/p>\n
function formatThousands(num) {\r\n    return num.toString().replace(\/.(?=(?:.{3})+$)\/g, '$&,')\r\n}\r\n\r\nvar number = 1234;  \/\/ number\r\nformatThousands(number);\r\n\r\n\/\/ Output (Most Browsers):\r\n\/\/ 1,234\r\n\r\n\/\/ Output (Safari):\r\n\/\/ 1,234<\/pre>\n
Lastly, of note – I didn’t come up with this magic – rather am documenting it here so that I (or others) could find this quickly\/easily. \u00a0The source of this solution (and a few other neat tips) can be found on the CSS Tricks website<\/a>.<\/p>\n
JS Comma Separate Number – Browser Compliant Handling Decimals<\/h2>\n
Added 2017-03-31<\/h4>\n
One other item of note is that the above function won’t handle decimal \u00a0numbers. \u00a0One tweak to the function and we can easily accomplish this however.<\/p>\n
function formatThousands(num) {\r\n    var values = num.toString().split('.');\r\n    return values[0].replace(\/.(?=(?:.{3})+$)\/g, '$&,') + ( values.length == 2 ? '.' + values[1] : '' )\r\n}\r\n\r\nvar number = 1234.56;  \/\/ number\r\nformatThousands(number);\r\n\r\n\/\/ Output (Most Browsers):\r\n\/\/ 1,234.56\r\n\r\n\/\/ Output (Safari):\r\n\/\/ 1,234.56<\/pre>","protected":false},"excerpt":{"rendered":"
JS Comma Separate Number – Not-Browser Compliant In Javascript, it’s quite simple to convert a straight number to […]<\/p>\n","protected":false},"author":1,"featured_media":1399,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[12,5],"tags":[],"class_list":["post-1398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-jquery","category-website-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2016\/07\/Javascript-Safari-Number-Thousands-Separated-By-Comma.jpg","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-my","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=1398"}],"version-history":[{"count":3,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1398\/revisions"}],"predecessor-version":[{"id":1480,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/1398\/revisions\/1480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/1399"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=1398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=1398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=1398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}