JavaScript; How to set dot after three digits?
Solution 1
ECMAScript Internationalization API has a number formatting funciton. Intl.NumberFormat()
You can use it like this with pure javascript:
var calculation = document.getElementById('money').value;
//1st way
var moneyFormatter = new Intl.NumberFormat();
document.getElementById('formattedMoney').innerText = moneyFormatter.format(calculation);
// 2nd way, using currency
var moneyFormatter2 = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2
});
document.getElementById('formattedMoney2').innerText = moneyFormatter2.format(calculation);
<label>Calculation:</label> <input type="text" value="123456789.25" name="money" id="money" />
<ul>
<li>Number Format: <b><span id="formattedMoney"></span></b><br/><br/></li>
<li>Currency Format: <b><span id="formattedMoney2"></span><b/></li>
</ul>
IE11, Firefox and Chrome support it, but i am not sure about other browsers.
http://www.ecma-international.org/ecma-402/1.0/#sec-11.1.2
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
Solution 2
You should use an additional String#replace
with a regular expression (to match digits in groups of threes before the ,
) and a replacement function (to prepend .
to each match).
Your Updated Code:
var calculation = $('select[name=somevalue1] option:selected').data('calc') - ($('select[name=somevalue1] option:selected').data('calc') / 100 * $('select[name=somevalue2] option:selected').data('calc')) - ($('select[name=somevalue1] option:selected').data('calc') - ($('select[name=somevalue1] option:selected').data('calc') / 100 * $('select[name=somevalue2] option:selected').data('calc'))) / 100 * $('select[name=somevalue3] option:selected').data('calc')
function format(n) {
return n.toFixed(2).replace('.', ',').replace(/\d{3}(?=(\d{3})*,)/g, function(s) {
return '.' + s
})
}
$('#calculation').text(format(calculation))
Demo Implementation:
var calculations = [
1234.56,
1234567.89,
1234,
.12
]
function format (n) {
return n.toFixed(2).replace('.', ',').replace(/\d{3}(?=(\d{3})*,)/g, function (s) {
return '.' + s
})
}
console.log(calculations.map(format))
Solution 3
On modern browsers (Chrome 24+, Firefox 29+, IE11) you can use Number.prototype.toLocaleString()
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
var number = 3500.12;
console.log(number.toLocaleString());
This uses the locale of the browser to format the number automatically. My browser is set to German so the output is
3.500,12
If someone with a different locale uses your site they will see the numbers as they expect them.
Admin
Updated on June 17, 2022Comments
-
Admin almost 2 years
I have the following JavaScript code:
var calculation = $('select[name=somevalue1] option:selected').data('calc')-($('select[name=somevalue1] option:selected').data('calc')/100*$('select[name=somevalue2] option:selected').data('calc'))-($('select[name=somevalue1] option:selected').data('calc')-($('select[name=somevalue1] option:selected').data('calc')/100*$('select[name=somevalue2] option:selected').data('calc')))/100*$('select[name=somevalue3] option:selected').data('calc'); $('#calculation').text((calculation).toFixed(2).replace(".",","))
That will calculate a number, change
.
to,
and round it to two digits after comma.What I need to do is to add a dot after tree digits before come.
Means:
1.234,56
instead of1234,56
1.234.567,89
instead of1234567,89
Does anybody know a way to do that?