Hoe getallen opmaken?

Ik wil getallen opmaken met JavaScript.

Bijvoorbeeld:

10     => 10.00
100    => 100.00
1000   => 1,000.00
10000  => 10,000.00
100000 => 100,000.00

Antwoord 1, autoriteit 100%

Als u ingebouwde code wilt gebruiken, kunt u toLocaleString()met minimumFractionDigits.

Browsercompatibiliteit voor de uitgebreide opties op toLocaleString()was beperkttoen ik dit antwoord voor het eerst schreef, maar de huidige status ziet er goed uit. Als je Node.js gebruikt, moet je npm installde intlpakket.

var value = (100000).toLocaleString(
  undefined, // leave undefined to use the visitor's browser 
             // locale or a string like 'en-US' to override it.
  { minimumFractionDigits: 2 }
);
console.log(value);

Antwoord 2, autoriteit 22%

Korte oplossing:

var n = 1234567890;
String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')
// "1,234,567,890"

Antwoord 3, autoriteit 21%

Gebruik

num = num.toFixed(2);

waar 2 het aantal decimalen is

EDIT:

Hier is de functie om nummer te formatteren zoals u wilt

function formatNumber(number)
{
    number = number.toFixed(2) + '';
    x = number.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Sorce: www.mredkj.com


4, Autoriteit 17%

op browsers die ondersteuning de ECMASCIPS® 2016 internationalisering API-specificatie (ECMA-402) , u kunt een Intl.NumberFormatinstantie:

var nf = Intl.NumberFormat();
var x = 42000000;
console.log(nf.format(x)); // 42,000,000 in many locales
                           // 42.000.000 in many other locales

5, Autoriteit 13%

vanwege de bugs gevonden door Jasperv – goede punten! – Ik heb mijn oude code herschreven. Ik denk dat ik dit alleen heb gebruikt voor positieve waarden met twee decimalen.

Afhankelijk van wat u probeert te bereiken, wilt u misschien afronding of niet, dus hier zijn twee versies splitsen over die delen.

First Up, met afronding.

Ik heb de methode toFixed()geïntroduceerd, omdat deze het afronden op specifieke decimalen beter afhandelt en goed wordt ondersteund. Het vertraagt echter wel.

Deze versie ontkoppelt nog steeds het decimaalteken, maar gebruikt een andere methode dan voorheen. Het w|0gedeelte verwijdert het decimaalteken. Voor meer informatie hierover is dit een goed antwoord. Dit laat dan het resterende gehele getal achter, slaat het op in ken trekt het vervolgens weer af van het oorspronkelijke getal, waarbij het decimaalteken alleen blijft.

Als we ook rekening willen houden met negatieve getallen, moeten we een while-lus uitvoeren (drie cijfers overslaan) totdat we braken. Dit is berekend als 1 bij het omgaan met negatieve getallen om te voorkomen dat iets als -,100.00

De rest van de lus is hetzelfde als voorheen.

function formatThousandsWithRounding(n, dp){
  var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
      u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
      s = ''+k, i = s.length, r = '';
  while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
  return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};

In het onderstaande fragment kun je de cijfers bewerken om jezelf te testen.


Antwoord 6, autoriteit 3%

Gebruik de cijferfunctie toFixeden deze functie om de komma’s toe te voegen.

function addCommas(nStr)
{
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
n = 10000;
r = n.toFixed(2); //10000.00
addCommas(r); // 10,000.00

http://www.mredkj.com/javascript/numberFormat.html


Antwoord 7, autoriteit 3%

Ik denk dat je met deze jQuery-numberformatterje probleem kunt oplossen.

Natuurlijk gaat dit ervan uit dat je geen problemen hebt met het gebruik van jQuery in je project. Houd er rekening mee dat de functionaliteit is gekoppeld aan de gebeurtenis blur.

$("#salary").blur(function(){
      $(this).parseNumber({format:"#,###.00", locale:"us"});
      $(this).formatNumber({format:"#,###.00", locale:"us"});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/timdown/jshashtable/hashtable.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hardhub/jquery-numberformatter/src/jquery.numberformatter.js"></script>
<input type="text" id="salary">

Antwoord 8, autoriteit 2%

function numberWithCommas(x) {
  x=String(x).toString();
  var afterPoint = '';
  if(x.indexOf('.') > 0)
     afterPoint = x.substring(x.indexOf('.'),x.length);
  x = Math.floor(x);
  x=x.toString();
  var lastThree = x.substring(x.length-3);
  var otherNumbers = x.substring(0,x.length-3);
  if(otherNumbers != '')
      lastThree = ',' + lastThree;
  return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
}
console.log(numberWithCommas(100000));
console.log(numberWithCommas(10000000));

Antwoord 9, autoriteit 2%

Ditis een artikel over uw probleem. Het toevoegen van een duizend-scheidingsteken is niet ingebouwd in JavaScript, dus je zult je eigen functie als volgt moeten schrijven (voorbeeld genomen van de gelinkte pagina):

function addSeperator(nStr){
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  }
  return x1 + x2;
}

Antwoord 10

Misschien kunt u overwegen om toLocaleString()

Werkvoorbeeld:

const number = 1234567890.123;
console.log(number.toLocaleString('en-US')); // US format
console.log(number.toLocaleString('en-IN')); // Indian format

Antwoord 11

Of je kunt de bibliotheek sugar.jsen de formatmethode:

format( place = 0 , Thousand = ‘,’ , decimal = ‘.’ )Maakt het getal op in een leesbare tekenreeks. Als plaats niet gedefinieerd is, wordt automatisch
de plaats bepalen. duizenden is het teken dat wordt gebruikt voor de duizenden
scheidingsteken. decimaal is het teken dat voor de komma wordt gebruikt.

Voorbeelden:

(56782).format() > "56,782"
(56782).format(2) > "56,782.00"
(4388.43).format(2, ' ') > "4 388.43"
(4388.43).format(3, '.', ',') > "4.388,430"

Antwoord 12

Laat me ook mijn oplossing hier neerzetten. Ik heb elke regel van commentaar voorzien om het lezen te vergemakkelijken en ik heb ook enkele voorbeelden gegeven, zodat het er groot uit kan zien.

function format(number) {
    var decimalSeparator = ".";
    var thousandSeparator = ",";
    // make sure we have a string
    var result = String(number);
    // split the number in the integer and decimals, if any
    var parts = result.split(decimalSeparator);
    // if we don't have decimals, add .00
    if (!parts[1]) {
      parts[1] = "00";
    }
    // reverse the string (1719 becomes 9171)
    result = parts[0].split("").reverse().join("");
    // add thousand separator each 3 characters, except at the end of the string
    result = result.replace(/(\d{3}(?!$))/g, "$1" + thousandSeparator);
    // reverse back the integer and replace the original integer
    parts[0] = result.split("").reverse().join("");
    // recombine integer with decimals
    return parts.join(decimalSeparator);
}
document.write("10 => " + format(10) + "<br/>");
document.write("100 => " + format(100) + "<br/>");
document.write("1000 => " + format(1000) + "<br/>");
document.write("10000 => " + format(10000) + "<br/>");
document.write("100000 => " + format(100000) + "<br/>");
document.write("100000.22 => " + format(100000.22) + "<br/>");

13

Hierdoor krijgt u uw komma-gescheiden waarden en voegen de vaste notatie aan het einde toe.

   nStr="1000";
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    commaSeperated = x1 + x2 + ".00";
    alert(commaSeperated);

bron


14

function formatNumber1(number) {
  var comma = ',',
      string = Math.max(0, number).toFixed(0),
      length = string.length,
      end = /^\d{4,}$/.test(string) ? length % 3 : 0;
  return (end ? string.slice(0, end) + comma : '') + string.slice(end).replace(/(\d{3})(?=\d)/g, '$1' + comma);
 }
 function formatNumber2(number) {
  return Math.max(0, number).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',');
 }

Bron: http://jsperf.com/number-format


Antwoord 15

Dit is ongeveer 3 keer snellere versie van het geaccepteerde antwoord. Het creëert geen array en vermijdt het maken van objecten en het samenvoegen van tekenreeksen voor hele getallen aan het einde. Dit kan handig zijn als u veel waarden weergeeft, b.v. in een tabel.

function addThousandSeparators(number) {
    var whole, fraction
    var decIndex = number.lastIndexOf('.')
    if (decIndex > 0) {
        whole = number.substr(0, decIndex)
        fraction = number.substr(decIndex)
    } else {
        whole = number
    }
    var rgx = /(\d+)(\d{3})/
    while (rgx.test(whole)) {
        whole = whole.replace(rgx, '$1' + ',' + '$2')
    }
    return fraction ? whole + fraction : whole
}

Antwoord 16

               function formatThousands(n,dp,f) {
                    // dp - decimal places
                    // f - format >> 'us', 'eu'
                    if (n == 0) {
                        if(f == 'eu') {
                            return "0," + "0".repeat(dp);   
                        }
                        return "0." + "0".repeat(dp);
                    }
                    /* round to 2 decimal places */
                    //n = Math.round( n * 100 ) / 100;
                    var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
                    while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
                    var a = s.substr(0, i + 3) + r + (d ? '.' + Math.round((d+1) * Math.pow(10,dp)).toString().substr(1,dp) : '');
                    /* change format from 20,000.00 to 20.000,00 */
                    if (f == 'eu') {
                        var b = a.toString().replace(".", "#");
                        b = b.replace(",", ".");
                        return b.replace("#", ",");
                    }                   
                    return a;
                }

Other episodes