wake-up-neo.com

Zahlen in JavaScript ähnlich wie C # formatieren

Gibt es eine einfache Möglichkeit, Zahlen in JavaScript zu formatieren, ähnlich den Formatierungsmethoden, die in C # (oder VB.NET) über ToString("format_provider") oder String.Format() verfügbar sind?

javascriptjqueryformatnumbers
71
xiemails

Sie sollten sich wahrscheinlich das JQuery NUMBERFORMATTER-Plugin ansehen:

Jquery Number Formatter

Und diese Frage:

Javascript einfacher Weg, um Zahlen zu formatieren

9
karim79

Allgemein

In jQuery

74
rahul

Ja, es gibt definitiv eine Möglichkeit, Zahlen richtig in Javascript 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)

Bei Verwendung von Variablenname .toFixed.

Und es gibt noch eine weitere Funktion toPrecision() ..__ 

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

46
Vishal Barot

Hier ist eine einfache JS-Funktion, um einer Ganzzahl im String-Format Kommas hinzuzufügen. Es werden ganze Zahlen oder Dezimalzahlen verarbeitet. Sie können entweder eine Zahl oder eine Zeichenfolge übergeben. Es gibt offensichtlich eine Zeichenfolge zurück.

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 ist eine Reihe von Testfällen: http://jsfiddle.net/jfriend00/6y57j/

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

Die Umwandlung einer Zahl in eine Zeichenfolge kann auf verschiedene Arten erfolgen. Am einfachsten ist es, ihn einer Zeichenfolge hinzuzufügen:

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

Innerhalb des jsFiddle-Kontexts würden Sie durch Ändern der folgenden Zeile Kommas in den Zähler bekommen:

jTarget.text(current);

zu diesem:

jTarget.text(addCommas(current));

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

24
jfriend00

Ich habe eine einfache Funktion geschrieben (es ist noch kein weiteres jQuery-Plugin erforderlich !!), die eine Zahl in eine durch Dezimalzeichen getrennte Zeichenfolge oder eine leere Zeichenfolge konvertiert, wenn die Zahl keine Anfangszahl war:

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

format(578999); ergibt 578,999

format(10); ergibt 10

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

In einem der Kommentare wurde richtig angegeben, dass dies nur für ganze Zahlen funktioniert. Mit ein paar kleinen Anpassungen können Sie es auch für Fließpunkte 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]:"");
}
12
patrick

Hier sind einige Lösungen, die alle die Testsuite, Testsuite und Benchmark bestehen. Wenn Sie das Kopieren und Einfügen testen möchten, versuchen Sie This Gist .

Methode 0 (RegExp)

Basis auf https://stackoverflow.com/a/14428340/1877620 , aber korrigieren, 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 (in Array aufteilen)

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 wir ein benutzerdefiniertes Tausendertrennzeichen oder ein Dezimaltrennzeichen wünschen, 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();
9
Steely Wing

Wenn Sie jQuery nicht verwenden möchten, werfen Sie einen Blick auf Numeral.js

7
adamwdraper

Erstens ist das Konvertieren einer Ganzzahl in einen String in JS sehr 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 parseInt(string) für Ganzzahlen und parseFloat(string) für Floats verwenden. Beide Funktionen geben dann die gewünschte Ganzzahl/Fließkommazahl 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 anfügen wollen, bleibt mir aus Ihrer Frage unklar.

4
zatatatata

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.
  • Übernehmen Sie die Standardnummernformatierung wie #, ## 0.00 oder mit Negation -000. ####.
  • Akzeptieren Sie ein beliebiges Länderformat wie # ## 0,00, #, ###. ##, # '###. ## oder ein beliebiges anderes Symbol ohne Nummer.
  • Akzeptieren Sie eine beliebige Anzahl von Zifferngruppierungen. #, ##, # 0.000 oder #, ### 0. ## sind alle gültig.
  • Akzeptieren Sie alle redundanten/narrensicheren Formatierungen. ##, ###, ##. # oder 0 #, # 00 #. ### 0 # sind alle OK.
  • Automatische Nummernrundung.
  • Einfache Schnittstelle, nur Maske und Wert wie folgt angeben: format ("0.0000", 3.141592) 

UPDATE

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

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

welche in ECMA-262 5.1 Edition beschrieben sind:

und wird in zukünftigen Browser-Versionen funktionieren ...

3
gavenkoa

Zum Beispiel:

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

var rflt = parseFloat(flt);
var rnt = parseInt(nt);
2
Jake Badlands

JQuery verwenden.

$(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) ;



});

1
Adrian

Um eine Dezimalzahl 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);
}
1
Nekudotayim

Darf ich numbro für die ländereinstellung und number-format.js für den allgemeinen Fall vorschlagen. Eine Kombination der beiden kann je nach Anwendungsfall hilfreich sein.

0
John Stephenson

Um die Antwort von jfriend00 weiter auszubauen (ich habe nicht genug Punkte zum 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]));
}*/

0
Graham Harris

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);
                }
            }
        }
    })
};
0
user673117

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
0
Alejandro Silva

Wenn Sie die Nummer für die Ansicht und nicht für die Berechnung formatieren möchten, können Sie dies 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} Number

Ausgaben: {String} Number

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

0
Herbi Shtini