JavaScript; How to set dot after three digits?

Question

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 of 1234,56

1.234.567,89 instead of 1234567,89

Does anybody know a way to do that?

@cartant 1. I don't really understand how it works. 2. I don't want to use a library. — , Mar 24 '17 at 06:11

score 11 · Accepted Answer · 2017-03-24T06:38:21.723

This code worked for me:

<p id="calculation"></p>

<script>
    function numberWithCommas(x) {
        var parts = x.toString().split(".");
        parts[0]=parts[0].replace(/\B(?=(\d{3})+(?!\d))/g,".");
        return parts.join(",");
        }

        var calculation = 1231739216.34367;

        document.getElementById("calculation").innerHTML = numberWithCommas((calculation).toFixed(2))
</script>

This code will:

Round (for business) to two digits after dezimal.
Change the decimal dot to comma.
Set a dot every third digit before decimal.

er-han · Answer 2 · 2017-03-24T07:06:12.450

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

score 2 · Answer 3 · answered Mar 24 '17 at 06:17

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))

score 2 · Answer 4 · answered Mar 24 '17 at 07:15

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.

score 0 · Answer 5 · answered Mar 24 '17 at 06:23

This function will work for you:

function formatNumber(num) {
  var first = num.split(',');
  var digits = first[0].split('').reverse();
  var new_digits = [];
  for(var i =0; i<digits.length; i++) {
    if((i+1)%3==0) {
      new_digits.push(digits[i]);
      new_digits.push('.');
    }
    else {
      new_digits.push(digits[i]);
    }
  }
  var new_num = new_digits.reverse().join("")+','+first[1];
  return new_num;
}

JavaScript; How to set dot after three digits?

5 Answers5

Your Updated Code:

Demo Implementation:

Linked