Hoe een nummer afdrukken met komma’s als duizenden scheiders in Javascript

<script type="text/javascript">
  // Using Regular expression
  function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
  function commas() {
    var num1 = document.myform.number1.value;
    // Using Regular expression
    document.getElementById('result1').value = toCommas(parseInt(num1));
    // Using toLocaleString()
    document.getElementById('result2').value = parseInt(num1).toLocaleString('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    });
    // Using Intl.NumberFormat()
    document.getElementById('result3').value = new Intl.NumberFormat('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    }).format(num1);
  }
</script>
<FORM NAME="myform">
  <INPUT TYPE="text" NAME="number1" VALUE="123456789">
  <br>
  <INPUT TYPE="button" NAME="button" Value="=>" onClick="commas()">
  <br>Using Regular expression
  <br>
  <INPUT TYPE="text" ID="result1" NAME="result1" VALUE="">
  <br>Using toLocaleString()
  <br>
  <INPUT TYPE="text" ID="result2" NAME="result2" VALUE="">
  <br>Using Intl.NumberFormat()
  <br>
  <INPUT TYPE="text" ID="result3" NAME="result3" VALUE="">
</FORM>

Antwoord 8

Intl.NumberFormat

Native JS-functie. Ondersteund door IE11, Edge, nieuwste Safari, Chrome, Firefox, Opera, Safari op iOS en Chrome op Android.

var number = 3500;
console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale

Antwoord 9

Ik ben behoorlijk onder de indruk van het aantal antwoorden op deze vraag. Ik vind het antwoord van uKolkaleuk:

n.toLocaleString()

Maar helaas werkt het in sommige landen, zoals het Spaans, niet (IMHO) zoals verwacht voor getallen onder de 10.000:

Number(1000).toLocaleString('ES-es')

Geeft 1000en niet 1.000.

Zie toLocaleString werkt niet op nummers minder dan 10000 in alle browsersom te weten waarom.

Dus ik moest het antwoord gebruiken door Elias Zamariahet juiste scheidingsteken voor duizendtallen te kiezen:

n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

Deze werkt goed als one-liner voor beide landen die ,of .als scheidingsteken voor duizendtallen en begint in alle gevallen vanaf 1.000.

Number(1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

Geeft 1.000met een Spaanse landinstellingscontext.

Als je absolute controle wilt hebben over de manier waarop een getal wordt opgemaakt, kun je ook het volgende proberen:

let number   = 1234.567
let decimals = 2
let decpoint = '.' // Or Number(0.1).toLocaleString().substring(1, 2)
let thousand = ',' // Or Number(10000).toLocaleString().substring(2, 3)
let n = Math.abs(number).toFixed(decimals).split('.')
n[0] = n[0].split('').reverse().map((c, i, a) =>
  i > 0 && i < a.length && i % 3 == 0 ? c + thousand : c
).reverse().join('')
let final = (Math.sign(number) < 0 ? '-' : '') + n.join(decpoint)
console.log(final)

Geeft 1,234.57.

Deze heeft geen reguliere expressie nodig. Het werkt door het getal aan te passen aan het gewenste aantal decimalen met eerst toFixeden vervolgens te delen rond de komma .als die er is. De linkerkant wordt vervolgens omgezet in een reeks cijfers die wordt omgekeerd. Vervolgens wordt vanaf het begin om de drie cijfers een scheidingsteken voor duizendtallen toegevoegd en wordt het resultaat weer omgekeerd. Het uiteindelijke resultaat is de vereniging van de twee delen. Het teken van het ingevoerde getal wordt eerst met Math.absverwijderd en indien nodig teruggeplaatst.

Het is geen one-liner, maar niet veel langer en gemakkelijk om te zetten in een functie. Er zijn variabelen toegevoegd voor de duidelijkheid, maar deze kunnen worden vervangen door hun gewenste waarden als ze van tevoren bekend zijn. U kunt de uitdrukkingen gebruiken die toLocaleStringgebruiken om de juiste tekens voor de decimale komma en het scheidingsteken voor duizendtallen voor de huidige landinstelling te vinden (houd er rekening mee dat hiervoor een moderner Javascript vereist is.)

Antwoord 10

Iedereen bedankt voor hun antwoorden. Ik heb op basis van enkele van de antwoorden een meer “one-size-fits-all” oplossing gemaakt.

Het eerste fragment voegt een functie toe die PHP‘s number_format()nabootst Nummer prototype. Als ik een getal opmaak, wil ik meestal decimalen, dus de functie neemt het aantal decimalen in beslag dat moet worden weergegeven. Sommige landen gebruiken komma’s als decimaalteken en decimalen als het scheidingsteken voor duizendtallen, dus de functie maakt het mogelijk deze scheidingstekens in te stellen.

Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';
    var parts = this.toFixed(decimals).split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);
    return parts.join(dec_point);
}

U zou dit als volgt gebruiken:

var foo = 5000;
console.log(foo.numberFormat(2)); // us format: 5,000.00
console.log(foo.numberFormat(2, ',', '.')); // european format: 5.000,00

Ik ontdekte dat ik het getal vaak terug moest krijgen voor wiskundige bewerkingen, maar parseFloat converteert 5.000 naar 5, door simpelweg de eerste reeks gehele getallen te nemen. Dus ik heb mijn eigen float-conversiefunctie gemaakt en deze toegevoegd aan het String-prototype.

String.prototype.getFloat = function(dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';
    var parts = this.split(dec_point);
    var re = new RegExp("[" + thousands_sep + "]");
    parts[0] = parts[0].replace(re, '');
    return parseFloat(parts.join(dec_point));
}

Nu kunt u beide functies als volgt gebruiken:

var foo = 5000;
var fooString = foo.numberFormat(2); // The string 5,000.00
var fooFloat = fooString.getFloat(); // The number 5000;
console.log((fooString.getFloat() + 1).numberFormat(2)); // The string 5,001.00

Antwoord 11

Ik denk dat dit de kortste reguliere expressie is die het doet:

/\B(?=(\d{3})+\b)/g
"123456".replace(/\B(?=(\d{3})+\b)/g, ",")

Ik heb het op een paar cijfers gecontroleerd en het werkte.

Antwoord 12

Number.prototype.toLocaleString()zou geweldig zijn geweest als het standaard door alle browsers werd aangeboden (Safari).

Ik heb alle andere antwoorden gecontroleerd, maar niemand leek ze te polyfillen. Hier is een poging daartoe, wat eigenlijk een combinatie is van de eerste twee antwoorden; als toLocaleStringwerkt, gebruikt het het, als het niet werkt, gebruikt het een aangepaste functie.

var putThousandsSeparators;
putThousandsSeparators = function(value, sep) {
  if (sep == null) {
    sep = ',';
  }
  // check if it needs formatting
  if (value.toString() === value.toLocaleString()) {
    // split decimals
    var parts = value.toString().split('.')
    // format whole numbers
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, sep);
    // put them back together
    value = parts[1] ? parts.join('.') : parts[0];
  } else {
    value = value.toLocaleString();
  }
  return value;
};
alert(putThousandsSeparators(1234567.890));

Intl.NumberFormat().format(1234);
// returns "1,234" if the user's locale is en_US, for example

var nf = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
nf.format(123456.789); // ‘$123,456.79’

// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00
// European formatting (custom symbol and separators), could also use options object as second param:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99
// Negative values are formatted nicely, too:
accounting.formatMoney(-500000, "£ ", 0); // £ -500,000
// Simple `format` string allows control of symbol position [%v = value, %s = symbol]:
accounting.formatMoney(5318008, { symbol: "GBP",  format: "%v %s" }); // 5,318,008.00 GBP

function commafy( num){
  var parts = (''+(num<0?-num:num)).split("."), s=parts[0], L, i=L= s.length, o='';
  while(i--){ o = (i===0?'':((L-i)%3?'':',')) 
                  +s.charAt(i) +o }
  return (num<0?'-':'') + o + (parts[1] ? '.' + parts[1] : ''); 
}

/**
 * Format a number as a string with commas separating the thousands.
 * @param num - The number to be formatted (e.g. 10000)
 * @return A string representing the formatted number (e.g. "10,000")
 */
var formatNumber = function(num) {
    var array = num.toString().split('');
    var index = -3;
    while (array.length + index > 0) {
        array.splice(index, 0, ',');
        // Decrement by 4 since we just added another unit to the array.
        index -= 4;
    }
    return array.join('');
};

let amount =350256.95
var formatter = new Intl.NumberFormat('en-IN', {
  minimumFractionDigits: 2,
});
// Use it.
formatter.format(amount);

3,50,256.95

function $(dollarAmount)
{
    const locale = 'en-US';
    const options = { style: 'currency', currency: 'USD' };
    return Intl.NumberFormat(locale, options).format(dollarAmount);
}

function no$(dollarAmount)
{
    return $(dollarAmount).replace('$','');
}

function addCommas(number, minDecimalPlaces = 0, maxDecimalPlaces = Math.max(3,minDecimalPlaces))
{
    const options = {};
    options.maximumFractionDigits = maxDecimalPlaces;
    options.minimumFractionDigits = minDecimalPlaces;
    return Intl.NumberFormat('en-US',options).format(number);
}

$(function(){
  function insertCommas(s) {
    // get stuff before the dot
    var d = s.indexOf('.');
    var s2 = d === -1 ? s : s.slice(0, d);
    // insert commas every 3 digits from the right
    for (var i = s2.length - 3; i > 0; i -= 3)
      s2 = s2.slice(0, i) + ',' + s2.slice(i);
    // append fractional part
    if (d !== -1)
      s2 += s.slice(d);
    return s2;
  }
  $('#theDudeAbides').text( insertCommas('1234567.89012' ) );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theDudeAbides"></div>

var formatNumber = function (number) {
  var splitNum;
  number = Math.abs(number);
  number = number.toFixed(2);
  splitNum = number.split('.');
  splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return splitNum.join(".");
}

var number = -123123231232;
formatNumber(number)

var number = 123123231232;
    number.toLocaleString()

document.body.textContent = numeral(1234567).format('0,0');

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

const strToNum = str => {
   //Find 1-3 digits followed by exactly 3 digits & a comma or end of string
   let regx = /(\d{1,3})(\d{3}(?:,|$))/;
   let currStr;
   do {
       currStr = (currStr || str.split(`.`)[0])
           .replace( regx, `$1,$2`)
   } while (currStr.match(regx)) //Stop when there's no match & null's returned
   return ( str.split(`.`)[1] ) ?
           currStr.concat(`.`, str.split(`.`)[1]) :
           currStr;
};
strToNum(`123`) // => 123
strToNum(`123456`) // => 123,456
strToNum(`-1234567.0987`) // => -1,234,567.0987

(-1234567.0987).toLocaleString();

new Date();

var number_format = function(number, decimal_pos, decimal_sep, thousand_sep) {
    var ts      = ( thousand_sep == null ? ',' : thousand_sep )
        , ds    = ( decimal_sep  == null ? '.' : decimal_sep )
        , dp    = ( decimal_pos  == null ? 2   : decimal_pos )
        , n     = Math.floor(Math.abs(number)).toString()
        , i     = n.length % 3 
        , f     = ((number < 0) ? '-' : '') + n.substr(0, i)
    ;
    for(;i<n.length;i+=3) {
        if(i!=0) f+=ts;
        f+=n.substr(i,3);
    }
    if(dp > 0) 
        f += ds + parseFloat(number).toFixed(dp).split('.')[1]
    return f;
}

function commaFormat(inputString) {
    inputString = inputString.toString();
    var decimalPart = "";
    if (inputString.indexOf('.') != -1) {
        //alert("decimal number");
        inputString = inputString.split(".");
        decimalPart = "." + inputString[1];
        inputString = inputString[0];
        //alert(inputString);
        //alert(decimalPart);
    }
    var outputString = "";
    var count = 0;
    for (var i = inputString.length - 1; i >= 0 && inputString.charAt(i) != '-'; i--) {
        //alert("inside for" + inputString.charAt(i) + "and count=" + count + " and outputString=" + outputString);
        if (count == 3) {
            outputString += ",";
            count = 0;
        }
        outputString += inputString.charAt(i);
        count++;
    }
    if (inputString.charAt(0) == '-') {
        outputString += "-";
    }
    //alert(outputString);
    //alert(outputString.split("").reverse().join(""));
    return outputString.split("").reverse().join("") + decimalPart;
}

   var formatted = (x+'').replace(/(\..*)$|(\d)(?=(\d{3})+(?!\d))/g, (digit, fract) => fract || digit + ',');

const number = 12345678.99;
const numberString = String(number).replace(
    /^\d+/,
    number => [...number].map(
        (digit, index, digits) => (
            !index || (digits.length - index) % 3 ? '' : ','
        ) + digit
    ).join('')
);
// numberString: 12,345,678.99

function formatNumber( num, fixed ) { 
    var decimalPart;
    var array = Math.floor(num).toString().split('');
    var index = -3; 
    while ( array.length + index > 0 ) { 
        array.splice( index, 0, '.' );              
        index -= 4;
    }
    if(fixed > 0){
        decimalPart = num.toFixed(fixed).split(".")[1];
        return array.join('') + "," + decimalPart; 
    }
    return array.join(''); 
};

formatNumber(17347, 0)  = 17.347
formatNumber(17347, 3)  = 17.347,000
formatNumber(1234563.4545, 3)  = 1.234.563,454