Formatieren Sie Zahlen in JavaScript ähnlich wie in C #

Antworten:

76

Allgemein

In jQuery

— rahul
quelle
11
Ein Wort der Warnung: Der jQuery-Zahlenformatierer, auf den Sie verlinken (ich habe es mit v1.1.0 versucht), ist völlig kaputt und nutzlos. Wie in: Es funktioniert nicht bei allen . Hier ist ein anständiges Formatierungs-Plugin: asual.com/jquery/format
— Tomalak
@Tomalak, das solltest du als Antwort posten. Das ist definitiv das beste Zahlenformatierer-Plugin, das ich verwendet habe. Ich wünschte, es gäbe Unterlagen außerhalb der Unit-Tests.
— Brad
6
@Tomalak Es ist nie zu spät. Hier schaue ich mir das mehr als ein Jahr später an!
— Cymen
3
Und ich fast drei Jahre später!
— Shufler
1
autoNumeric ist ziemlich voll funktionsfähig und wurde kürzlich auf 1.8.0 aktualisiert.
— Prethen
47

Ja, es gibt definitiv eine Möglichkeit, Zahlen in Javascript richtig zu formatieren, zum Beispiel:

var val=2489.8237

val.toFixed(3) //returns 2489.824 (round up)
val.toFixed(2) //returns 2489.82
val.toFixed(7) //returns 2489.8237000 (padding)

Mit der Verwendung von Variablennamen. toFixed .

Und es gibt noch eine andere Funktion toPrecision(). Für mehr Details können Sie auch besuchen

http://raovishal.blogspot.com/2012/01/number-format-in-javascript.html

— Vishal Barot
quelle
25

Hier ist eine einfache JS-Funktion zum Hinzufügen von Kommas zu einer Ganzzahl im Zeichenfolgenformat. Es werden ganze Zahlen oder Dezimalzahlen verarbeitet. Sie können entweder eine Zahl oder eine Zeichenfolge übergeben. Es wird offensichtlich eine Zeichenfolge zurückgegeben.

function addCommas(str) {
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;

    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
        first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

Hier eine Reihe von Testfällen: http://jsfiddle.net/jfriend00/6y57j/

Sie können sehen, dass es in dieser vorherigen jsFiddle verwendet wird: http://jsfiddle.net/jfriend00/sMnjT/ . Mit einer einfachen Google-Suche nach "Javascript Add Commas" können Sie Funktionen finden, die auch Dezimalzahlen verarbeiten.

Das Konvertieren einer Zahl in eine Zeichenfolge kann auf viele Arten erfolgen. Am einfachsten ist es, es einem String hinzuzufügen:

var myNumber = 3;
var myStr = "" + myNumber;   // "3"

Im Kontext Ihrer jsFiddle erhalten Sie Kommas in den Zähler, indem Sie diese Zeile ändern:

jTarget.text(current);

dazu:

jTarget.text(addCommas(current));

Sie können es hier sehen: http://jsfiddle.net/jfriend00/CbjSX/

— jfriend00
quelle
@blackessej - Ich habe am Ende meiner Antwort mehr hinzugefügt, das zeigt, wie addCommas zu Ihrer Geige hinzugefügt werden kann.
— jfriend00
Unterstützung für Dezimalzahlen in der addCommas()Funktion hinzugefügt, damit sie für Zahlen mit einem Dezimalteil funktioniert.
— jfriend00
Nicht so heiß für negative Zahlen):
— Kristopher
2
@Kristopher - Ich habe Unterstützung für negative Zahlen hinzugefügt.
— jfriend00
1
Sehr schön. Ich benutze das jetzt.
— Kristopher
12

Ich habe eine einfache Funktion geschrieben (es wird kein weiteres jQuery-Plugin benötigt !!), die eine Zahl in eine durch Dezimalstellen getrennte Zeichenfolge oder eine leere Zeichenfolge konvertiert, wenn die Zahl zunächst keine Zahl war:

function format(x) {
    return isNaN(x)?"":x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

format(578999); führt zu 578,999

format(10); führt zu 10

Wenn Sie einen Dezimalpunkt anstelle eines Kommas haben möchten, ersetzen Sie einfach das Komma im Code durch einen Dezimalpunkt.

In einem der Kommentare wurde korrekt angegeben, dass dies nur für Ganzzahlen funktioniert. Mit ein paar kleinen Anpassungen können Sie es auch für Gleitkommazahlen verwenden:

function format(x) {
    if(isNaN(x))return "";

    n= x.toString().split('.');
    return n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")+(n.length>1?"."+n[1]:"");
}
— Patrick
quelle
Wenn Sie zuerst den Gleitkommateil teilen, dann tun Sie dies mit der Ganzzahl und fügen Sie dann den Fließkommateil wieder hinzu, es sollte auch auf fp's funktionieren
— patrick
"412.8".replace(/\B(?=(\d{3})+(?!\d))/g, ",");kehrt zurück 412.8. Ich denke, es könnte zurückkehren412.80
— Junior Mayhé
9

Hier sind einige Lösungen, die alle die Testsuite, die Testsuite und den Benchmark bestehen. Wenn Sie zum Testen kopieren und einfügen möchten, probieren Sie This Gist aus .

Methode 0 (RegExp)

Basieren Sie auf https://stackoverflow.com/a/14428340/1877620 , aber korrigieren Sie, wenn kein Dezimalpunkt vorhanden ist.

if (typeof Number.prototype.format === 'undefined') {
    Number.prototype.format = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');
        a[0] = a[0].replace(/\d(?=(\d{3})+$)/g, '$&,');
        return a.join('.');
    }
}

Methode 1

if (typeof Number.prototype.format1 === 'undefined') {
    Number.prototype.format1 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.'),
            // skip the '-' sign
            head = Number(this < 0);

        // skip the digits that's before the first thousands separator 
        head += (a[0].length - head) % 3 || 3;

        a[0] = a[0].slice(0, head) + a[0].slice(head).replace(/\d{3}/g, ',$&');
        return a.join('.');
    };
}

Methode 2 (Auf Array teilen)

if (typeof Number.prototype.format2 === 'undefined') {
    Number.prototype.format2 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');

        a[0] = a[0]
            .split('').reverse().join('')
            .replace(/\d{3}(?=\d)/g, '$&,')
            .split('').reverse().join('');

        return a.join('.');
    };
}

Methode 3 (Schleife)

if (typeof Number.prototype.format3 === 'undefined') {
    Number.prototype.format3 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('');
        a.push('.');

        var i = a.indexOf('.') - 3;
        while (i > 0 && a[i-1] !== '-') {
            a.splice(i, 0, ',');
            i -= 3;
        }

        a.pop();
        return a.join('');
    };
}

Beispiel

console.log('======== Demo ========')
var n = 0;
for (var i=1; i<20; i++) {
    n = (n * 10) + (i % 10)/100;
    console.log(n.format(2), (-n).format(2));
}

Separator

Wenn Sie ein benutzerdefiniertes Tausender- oder Dezimaltrennzeichen möchten, verwenden Sie replace ():

123456.78.format(2).replace(',', ' ').replace('.', ' ');

Testsuite

function assertEqual(a, b) {
    if (a !== b) {
        throw a + ' !== ' + b;
    }
}

function test(format_function) {
    console.log(format_function);
    assertEqual('NaN', format_function.call(NaN, 0))
    assertEqual('Infinity', format_function.call(Infinity, 0))
    assertEqual('-Infinity', format_function.call(-Infinity, 0))

    assertEqual('0', format_function.call(0, 0))
    assertEqual('0.00', format_function.call(0, 2))
    assertEqual('1', format_function.call(1, 0))
    assertEqual('-1', format_function.call(-1, 0))
    // decimal padding
    assertEqual('1.00', format_function.call(1, 2))
    assertEqual('-1.00', format_function.call(-1, 2))
    // decimal rounding
    assertEqual('0.12', format_function.call(0.123456, 2))
    assertEqual('0.1235', format_function.call(0.123456, 4))
    assertEqual('-0.12', format_function.call(-0.123456, 2))
    assertEqual('-0.1235', format_function.call(-0.123456, 4))
    // thousands separator
    assertEqual('1,234', format_function.call(1234.123456, 0))
    assertEqual('12,345', format_function.call(12345.123456, 0))
    assertEqual('123,456', format_function.call(123456.123456, 0))
    assertEqual('1,234,567', format_function.call(1234567.123456, 0))
    assertEqual('12,345,678', format_function.call(12345678.123456, 0))
    assertEqual('123,456,789', format_function.call(123456789.123456, 0))
    assertEqual('-1,234', format_function.call(-1234.123456, 0))
    assertEqual('-12,345', format_function.call(-12345.123456, 0))
    assertEqual('-123,456', format_function.call(-123456.123456, 0))
    assertEqual('-1,234,567', format_function.call(-1234567.123456, 0))
    assertEqual('-12,345,678', format_function.call(-12345678.123456, 0))
    assertEqual('-123,456,789', format_function.call(-123456789.123456, 0))
    // thousands separator and decimal
    assertEqual('1,234.12', format_function.call(1234.123456, 2))
    assertEqual('12,345.12', format_function.call(12345.123456, 2))
    assertEqual('123,456.12', format_function.call(123456.123456, 2))
    assertEqual('1,234,567.12', format_function.call(1234567.123456, 2))
    assertEqual('12,345,678.12', format_function.call(12345678.123456, 2))
    assertEqual('123,456,789.12', format_function.call(123456789.123456, 2))
    assertEqual('-1,234.12', format_function.call(-1234.123456, 2))
    assertEqual('-12,345.12', format_function.call(-12345.123456, 2))
    assertEqual('-123,456.12', format_function.call(-123456.123456, 2))
    assertEqual('-1,234,567.12', format_function.call(-1234567.123456, 2))
    assertEqual('-12,345,678.12', format_function.call(-12345678.123456, 2))
    assertEqual('-123,456,789.12', format_function.call(-123456789.123456, 2))
}

console.log('======== Testing ========');
test(Number.prototype.format);
test(Number.prototype.format1);
test(Number.prototype.format2);
test(Number.prototype.format3);

Benchmark

function benchmark(f) {
    var start = new Date().getTime();
    f();
    return new Date().getTime() - start;
}

function benchmark_format(f) {
    console.log(f);
    time = benchmark(function () {
        for (var i = 0; i < 100000; i++) {
            f.call(123456789, 0);
            f.call(123456789, 2);
        }
    });
    console.log(time.format(0) + 'ms');
}

async = [];
function next() {
    setTimeout(function () {
        f = async.shift();
        f && f();
        next();
    }, 10);
}

console.log('======== Benchmark ========');
async.push(function () { benchmark_format(Number.prototype.format); });
async.push(function () { benchmark_format(Number.prototype.format1); });
async.push(function () { benchmark_format(Number.prototype.format2); });
async.push(function () { benchmark_format(Number.prototype.format3); });
next();
— Steely Wing
quelle
4

Erstens ist das Konvertieren einer Ganzzahl in einen String in JS wirklich einfach:

// Start off with a number
var number = 42;
// Convert into a string by appending an empty (or whatever you like as a string) to it
var string = 42+'';
// No extra conversion is needed, even though you could actually do
var alsoString = number.toString();

Wenn Sie eine Zahl als Zeichenfolge haben und möchten, dass sie in eine Ganzzahl umgewandelt wird, müssen Sie die parseInt(string)für Ganzzahlen und parseFloat(string)für Gleitkommazahlen verwenden. Diese beiden Funktionen geben dann die gewünschte Ganzzahl / Float zurück. Beispiel:

// Start off with a float as a string
var stringFloat = '3.14';
// And an int as a string
var stringInt = '42';

// typeof stringInt  would give you 'string'

// Get the real float from the string
var realFloat = parseFloat(someFloat);
// Same for the int
var realInt = parseInt(stringInt);

// but typeof realInt  will now give you 'number'

Was genau Sie anhängen wollen, bleibt mir aus Ihrer Frage unklar.

— zatatatata
quelle
Dank dafür. Hast du meinen Code auf jsfiddle gesehen? Grundsätzlich verstehe ich, wie man eine Ganzzahl in einen String konvertiert - was ich nicht verstehe, da ich js noch nicht sehr gut beherrsche, ist, wie man es mit dem Kontext des Skripts macht, das ich verwende. Weitere Erkenntnisse?
— Blackessej
@blackessej Ich verstehe nicht, was nach einem Koma angehängt werden muss. Wenn es nur zählt, würde ich die Verwendung von float vorschlagen, und wenn Sie beispielsweise 2 Dezimalstellen möchten, können Sie die Zahl einfach jedes Mal um 0,01
— erhöhen
Sie müssen es wirklich mit mir aushalten - ich verstehe nicht, wie ich meine Nummer in eine Zeichenfolge in meinem Code konvertieren kann.
— Blackessej
Bitte verwenden Sie es jedoch unbedingt parseInt(..., 10), um sicherzustellen, dass Base 10 verwendet wird.
— Pimvdb
Keine Antwort auf die Frage. Er will (und damit ich) , um XXXXXXX.YYYYin X,XXX,XXX.YYYY.
— Tomáš Zato - Wiedereinsetzung Monica
3

http://code.google.com/p/javascript-number-formatter/ :

  • Kurz, schnell, flexibel und dennoch eigenständig. Nur 75 Zeilen einschließlich MIT-Lizenzinformationen, Leerzeilen und Kommentaren.
  • Akzeptieren Sie Standardnummernformatierungen wie #, ## 0.00 oder mit Negation -000. ####.
  • Akzeptieren Sie jedes Länderformat wie # ## 0,00, #, ###. ##, # '###. ## oder jede Art von nicht nummeriertem Symbol.
  • Akzeptieren Sie eine beliebige Anzahl von Zifferngruppen. #, ##, # 0.000 oder #, ### 0. ## sind alle gültig.
  • Akzeptieren Sie redundante / narrensichere Formatierungen. ##, ###, ##. # oder 0 #, # 00 #. ### 0 # sind alle in Ordnung.
  • Automatische Nummernrundung.
  • Einfache Oberfläche, geben Sie einfach Maske und Wert wie folgt ein: Format ("0.0000", 3.141592)

AKTUALISIEREN

Wie sagen Tomáš Zato hier eine einzeilige Lösung:

(666.0).toLocaleString()
numObj.toLocaleString([locales [, options]])

die in ECMA-262 5.1 Edition beschrieben:

und wird in zukünftigen Versionen von Browsern funktionieren ...

— Gavenkoa
quelle
Weil ich keine Bibliothek benutzen möchte, wenn ich nur eine einfache Funktion brauche ...?
— Tomáš Zato - Wiedereinsetzung Monica
Ist das eine einfache Funktion: code.google.com/p/javascript-number-formatter/source/browse/… ? Ich denke - ja (60 Codezeilen).
— Gavenkoa
Sie haben sehr richtig gesagt "Ich denke" . Denn ob etwas einfach ist oder nicht, ist Ansichtssache. Es gibt keine absolute Wahrheit unter den Meinungen, die uns die Möglichkeit geben, endlose Argumente zu haben.
— Tomáš Zato - Wiedereinsetzung Monica
Dies ist SO und Ihr Verhalten ist typisch für SO-Benutzer.
— Gavenkoa
2
Sie scheinen wirklich bereit zu sein, über meinen Kommentar zu flammen. Hast du nichts besseres zu tun? Auf jeden Fall ist ein Einzeiler-Cross-Country-Code (6666.0).toLocaleString(). Sie können jedes Verhalten auch so nennen, wie Sie möchten, wenn Sie wissen, dass solche Kommentare nicht zum Thema gehören und möglicherweise verschwinden. Bitte hören Sie auch auf, mich dazu zu bringen, Ihren Beitrag rückgängig zu machen. Du bist zum Scheitern verurteilt, weil ich es nicht abgelehnt habe ... Ich bevorzuge Kommentare gegenüber Abstimmungen.
— Tomáš Zato - Wiedereinsetzung Monica
2

Zum Beispiel:

var flt = '5.99';
var nt = '6';

var rflt = parseFloat(flt);
var rnt = parseInt(nt);
— Jake Badlands
quelle
1

Verwenden von JQuery .

$(document).ready(function()
 {
    //Only number and one dot
    function onlyDecimal(element, decimals)
    {
        $(element).keypress(function(event)
        {
            num = $(this).val() ;
            num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
            {
                event.preventDefault();

            }
            if($(this).val() == parseFloat(num).toFixed(decimals))
            {
                event.preventDefault();
            }
        });
    }

     onlyDecimal("#TextBox1", 3) ;



});

— Adrian
quelle
1

Um eine Dezimalstelle mit 2 Zahlen nach dem Komma zu erhalten, können Sie einfach Folgendes verwenden:

function nformat(a) {
   var b = parseInt(parseFloat(a)*100)/100;
   return b.toFixed(2);
}
— Nekudotayim
quelle
0

Hier ist eine andere Version:

$.fn.digits = function () {
    return this.each(function () {
        var value = $(this).text();
        var decimal = "";
        if (value) {
            var pos = value.indexOf(".");
            if (pos >= 0) {
                decimal = value.substring(pos);
                value = value.substring(0, pos);
            }
            if (value) {
                value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                $(this).text(value);
            }
        }
        else {
            value = $(this).val()
            if (value) {
                var pos = value.indexOf(".");
                if (pos >= 0) {
                    decimal = value.substring(pos);
                    value = value.substring(0, pos);
                }
                if (value) {
                    value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                    if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                    $(this).val(value);
                }
            }
        }
    })
};
— user673117
quelle
0

Ich habe eine einfache Funktion erstellt, vielleicht kann sie jemand verwenden

function secsToTime(secs){
  function format(number){
    if(number===0){
      return '00';
    }else {
      if (number < 10) {
          return '0' + number
      } else{
          return ''+number;
      }
    }
  }

  var minutes = Math.floor(secs/60)%60;
  var hours = Math.floor(secs/(60*60))%24;
  var days = Math.floor(secs/(60*60*24));
  var seconds = Math.floor(secs)%60;

  return (days>0? days+"d " : "")+format(hours)+':'+format(minutes)+':'+format(seconds);
}

Dies kann die folgenden Ausgaben erzeugen:

  • 5d 02:53:39
  • 4d 22:15:16
  • 03:01:05
  • 00:00:00
— Alejandro Silva
quelle
0

Wenn Sie die Nummer eher für die Ansicht als für die Berechnung formatieren möchten, können Sie diese verwenden

function numberFormat( number ){

    var digitCount = (number+"").length;
    var formatedNumber = number+"";
    var ind = digitCount%3 || 3;
    var temparr = formatedNumber.split('');

    if( digitCount > 3 && digitCount <= 6 ){

        temparr.splice(ind,0,',');
        formatedNumber = temparr.join('');

    }else if (digitCount >= 7 && digitCount <= 15) {
        var temparr2 = temparr.slice(0, ind);
        temparr2.push(',');
        temparr2.push(temparr[ind]);
        temparr2.push(temparr[ind + 1]);
        // temparr2.push( temparr[ind + 2] ); 
        if (digitCount >= 7 && digitCount <= 9) {
            temparr2.push(" million");
        } else if (digitCount >= 10 && digitCount <= 12) {
            temparr2.push(" billion");
        } else if (digitCount >= 13 && digitCount <= 15) {
            temparr2.push(" trillion");

        }
        formatedNumber = temparr2.join('');
    }
    return formatedNumber;
}

Eingabe: {Integer} Nummer

Ausgaben: {String} Nummer

22.870 => wenn Nummer 22870

22,87 Millionen => wenn Nummer 2287xxxx (x kann was auch immer sein)

22,87 Milliarden => wenn Nummer 2287xxxxxxx

22,87 Billionen => wenn Nummer 2287xxxxxxxxxx

Du hast die Idee

— Herbi Shtini
quelle
0

Um die Antwort von jfriend00 weiter zu verfolgen (ich habe nicht genug Punkte, um sie zu kommentieren), habe ich seine / ihre Antwort auf Folgendes erweitert:

function log(args) {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === "object") {
            str += JSON.stringify(arguments[i]);
        } else {
            str += arguments[i];
        }
    }
    var div = document.createElement("div");
    div.innerHTML = str;
    document.body.appendChild(div);
}

Number.prototype.addCommas = function (str) {
    if (str === undefined) {
    	str = this;
    }
    
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;
    
    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
    	  first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

var testCases = [
    1, 12, 123, -1234, 12345, 123456, -1234567, 12345678, 123456789,
    -1.1, 12.1, 123.1, 1234.1, -12345.1, -123456.1, -1234567.1, 12345678.1, 123456789.1
];
 
for (var i = 0; i < testCases.length; i++) {
	log(testCases[i].addCommas());
}
 
/*for (var i = 0; i < testCases.length; i++) {
    log(Number.addCommas(testCases[i]));
}*/
Erweitern Sie das Snippet

— Graham Harris
quelle
-1

Sie können dies folgendermaßen tun: Sie formatieren also nicht nur die Zahl, sondern können auch als Parameter übergeben, wie viele Dezimalstellen angezeigt werden sollen. Sie legen ein benutzerdefiniertes Dezimal- und Meilentrennzeichen fest.

function format(number, decimals = 2, decimalSeparator = '.', thousandsSeparator = ',') {
    const roundedNumber = number.toFixed(decimals);
    let integerPart = '', fractionalPart = '';
    if (decimals == 0) {
        integerPart = roundedNumber;
        decimalSeparator = '';
    } else {
        let numberParts = roundedNumber.split('.');
        integerPart = numberParts[0];
        fractionalPart = numberParts[1];
    }
    integerPart = integerPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, `$1${thousandsSeparator}`);
    return `${integerPart}${decimalSeparator}${fractionalPart}`;
}

Verwenden: 

let min = 1556454.0001;
let max = 15556982.9999;
console.time('number format');
for (let i = 0; i < 15000; i++) {
    let randomNumber = Math.random() * (max - min) + min;

    let formated = format(randomNumber, 4, ',', '.'); // formated number

    console.debug('number: ', randomNumber, 'formated: ', formated);
}
console.timeEnd('number format');
— jin_maxtor
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.