Javascript Thousand Separator / String-Format [Duplikat]

96

Gibt es in Javascript eine Funktion zum Formatieren von Zahlen und Zeichenfolgen?

Ich suche nach einem Weg für tausend Trennzeichen für Zeichenfolge oder Zahlen ... (wie String.Format In c #)

LostLord
quelle
Ich denke, Sie werden dort finden, was Sie brauchen :) stackoverflow.com/questions/610406/…
Jad
How to print a number with commas as thousands separators in JavaScript: stackoverflow.com/questions/2901102/…
Adrien Be

Antworten:

158

Update (7 Jahre später)

Die in der ursprünglichen Antwort unten zitierte Referenz war falsch. Hierfür gibt es eine eingebaute Funktion, die genau das ist, was Kaiser unten vorschlägt:toLocaleString

So können Sie tun:

(1234567.89).toLocaleString('en')              // for numeric input
parseFloat("1234567.89").toLocaleString('en')  // for string input

Die unten implementierte Funktion funktioniert ebenfalls, ist aber einfach nicht erforderlich.

(Ich dachte, ich würde vielleicht Glück haben und herausfinden, dass es 2010 notwendig war, aber nein. Nach dieser zuverlässigeren Referenz ist toLocaleString seit ECMAScript 3rd Edition [1999] Teil des Standards, was meiner Meinung nach bedeutet wäre schon in IE 5.5 unterstützt worden.)


Ursprüngliche Antwort

Nach dieser Referenz gibt es keine eingebaute Funktion zum Hinzufügen von Kommas zu einer Zahl. Diese Seite enthält jedoch ein Beispiel dafür, wie Sie es selbst codieren können:

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;
}

Bearbeiten: Um in die andere Richtung zu gehen (Zeichenfolge mit Komma in Zahl umwandeln), können Sie Folgendes tun:

parseFloat("1,234,567.89".replace(/,/g,''))
Tim Goodman
quelle
Wirklich wirklich zu schätzen // Aber wie kann ich diese Zeichenfolge (mit Kommas) in eine Zahl konvertieren?
LostLord
Diese Funktion bricht für Zahlen größer als 100.000
DevZer0
1
@ DevZer0 nein, tut es nicht
Tallboy
funktioniert mit reinem Javascript + Single Regex ersetzen stackoverflow.com/a/44324879/681830
Val
4
Verwendung (1234567).toLocaleString().replace(/,/g," ",)für Räume zwischen Tausenden
Fanky
122

Wenn Sie Tausende Trennzeichen, Trennzeichen und Dezimaltrennzeichen lokalisieren möchten, gehen Sie wie folgt vor:

// --> numObj.toLocaleString( [locales [, options] ] )
parseInt( number ).toLocaleString();

Es gibt verschiedene Optionen, die Sie verwenden können (und sogar Gebietsschemas mit Fallbacks):

number = 123456.7089;

result  = parseInt( number ).toLocaleString() + "<br>";
result += number.toLocaleString( 'de-DE' ) + "<br>";
result += number.toLocaleString( 'ar-EG' ) + "<br>";
result += number.toLocaleString( 'ja-JP', { 
  style           : 'currency',
  currency        : 'JPY',
  currencyDisplay : 'symbol',
  useGrouping     : true
} ) + "<br>";
result += number.toLocaleString( [ 'jav', 'en' ], { 
  localeMatcher            : 'lookup',
  style                    : 'decimal',
  minimumIntegerDigits     : 2,
  minimumFractionDigits    : 2,
  maximumFractionDigits    : 3,
  minimumSignificantDigits : 2,
  maximumSignificantDigits : 3
} ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;
<div id="result"></div>

Details auf der MDN-Infoseite .

Edit: Commentor @Ich mag Serena folgendes:

Verwenden Sie diese Option, um Browser mit einem nicht englischen Gebietsschema zu unterstützen, in dem weiterhin englische Formatierungen gewünscht werden value.toLocaleString('en'). Funktioniert auch für Gleitkomma.

Kaiser
quelle
Dies deckt keine Float-Nummern ab. Sie können parseInt in parseFloat ändern, aber wenn yourInt = "100,12" (Komma als Dezimaltrennzeichen), schlägt dies fehl. Dies kann durch Ersetzen (",", ".") Behebt werden, schlägt jedoch mit "1.000,12" erneut fehl. Also ... Sie müssen das Rad manchmal neu erfinden. stackoverflow.com/a/2901298/1028304
neiker
Funktioniert nicht gut. Die Verwendung von Kommas in unserem Gebietsschema ist für Tausende Trennzeichen üblich.
Josef Sábl
1
Dies wäre angemessener:Number(yourNumberOrString).toLocaleString()
Jonathan
2
Verwenden Sie diese Option, um Browser mit einem nicht englischen Gebietsschema zu unterstützen, in dem weiterhin englische Formatierungen gewünscht werden value.toLocaleString('en'). Funktioniert auch für Gleitkomma.
Klaas van Aarsen
1
@ Serhiog.Lazin Was genau funktioniert auf Safari nicht (und auf welchem ​​Betriebssystem und in welcher Version)?
Kaiser
34

Aktualisiert mithilfe der Look-Behind-Unterstützung gemäß den Änderungen von ECMAScript2018.
Scrollen Sie aus Gründen der Abwärtskompatibilität weiter nach unten, um die ursprüngliche Lösung anzuzeigen.

Ein regulärer Ausdruck kann verwendet werden - besonders nützlich beim Umgang mit großen Zahlen, die als Zeichenfolgen gespeichert sind.

const format = num => 
    String(num).replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

»Ausführliche Regex-Erklärung (regex101.com) Flussdiagramm


Diese ursprüngliche Antwort ist möglicherweise nicht erforderlich, kann jedoch aus Gründen der Abwärtskompatibilität verwendet werden.

Der Versuch, dies mit einem einzigen regulären Ausdruck (ohne Rückruf) zu handhaben, scheitert an meiner derzeitigen Fähigkeit, da ich in Javascript keinen negativen Rückblick habe. Trotzdem gibt es hier eine weitere prägnante Alternative, die in den meisten allgemeinen Fällen funktioniert - die Berücksichtigung von Dezimalstellen durch Ignorieren von Übereinstimmungen, bei denen der Index der Übereinstimmung nach dem Index eines Zeitraums angezeigt wird.

const format = num => {
    const n = String(num),
          p = n.indexOf('.')
    return n.replace(
        /\d(?=(?:\d{3})+(?:\.|$))/g,
        (m, i) => p < 0 || i < p ? `${m},` : m
    )
}

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

»Ausführliche Regex-Erklärung (regex101.com)

Flussdiagramm

Emissär
quelle
Wurde dieses Syntaxdiagramm auf regex101.com erstellt?
Gerold Broser
Was passiert mit Zahlen mit Dezimalstellen?
Emiliano
Ich erhalte die Meldung "Ungültiger regulärer Ausdruck: ungültiger Name des Gruppenspezifizierers". Bei React Native 0.59 sollte dies RegEx jedoch nicht beeinträchtigen.
Joshua Pinter
@JoshuaPinter Es wird die Verwendung von Look-Behind sein, die zum Zeitpunkt des Schreibens noch nicht auf allen Plattformen unterstützt wird. Ich vermute, Sie beziehen sich speziell auf iOS - da Safari auch für mich immer noch fehlschlägt. Es ist möglicherweise am besten, vorerst bei der abwärtskompatiblen Version zu bleiben. Ich habe nur versucht, meine Antwort zukunftssicher zu machen. caniuse.com/#search=lookbehind
Abgesandter
1
@Emissary Danke für den Tipp. Ja, es ist auf React Native 0.59 / Android, das eine relativ ältere Version von JavaScriptCore (JSC) verwendet. Ich werde es erneut versuchen, nachdem wir auf React Native 0.60+ aktualisiert haben, einschließlich eines Updates für JSC.
Joshua Pinter
10

Es gibt ein nettes jQuery-Nummern-Plugin: https://github.com/teamdf/jquery-number

Sie können eine beliebige Zahl im gewünschten Format ändern, mit Optionen für Dezimalstellen und Trennzeichen für Dezimalstellen und Tausender:

$.number(12345.4556, 2);          // -> 12,345.46
$.number(12345.4556, 3, ',', ' ') // -> 12 345,456

Sie können es direkt in Eingabefeldern verwenden, was mit denselben Optionen wie oben besser ist:

$("input").number(true, 2);

Oder Sie können mit dem Selektor eine ganze Reihe von DOM-Elementen anwenden:

$('span.number').number(true, 2);
qdev
quelle
beste Lösung imho
Michal
Ich glaube nicht, wenn man eine neue Dateianforderung mit fast 800 Zeilen hinzufügt, ist es, als würde man eine Ameise mit einer Granade töten
Emiliano
6

Ich benutze das:

function numberWithCommas(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

Quelle: Link

Abhishek Goel
quelle
'123452343267.0505'.replace(/\B(?=(\d{3})+(?!\d))/g, ","); "123,452,343,267.0,505"- Beachten Sie das letzte Komma nach dem Dezimalpunkt.
Hippietrail
5
// thousand separates a digit-only string using commas
// by element:  onkeyup = "ThousandSeparate(this)"
// by ID:       onkeyup = "ThousandSeparate('txt1','lbl1')"
function ThousandSeparate()
{
    if (arguments.length == 1)
    {
        var V = arguments[0].value;
        V = V.replace(/,/g,'');
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        arguments[0].value = V;
    }
    else  if ( arguments.length == 2)
    {
        var V = document.getElementById(arguments[0]).value;
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        document.getElementById(arguments[1]).innerHTML = V;
    }
    else return false;
}   
h.foroutan
quelle
3

Sie können Javascript verwenden. unten ist der Code, es wird nur acceptnumerisch und einsdot

Hier ist das Javascript

<script >

            function FormatCurrency(ctrl) {
                //Check if arrow keys are pressed - we want to allow navigation around textbox using arrow keys
                if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
                    return;
                }

                var val = ctrl.value;

                val = val.replace(/,/g, "")
                ctrl.value = "";
                val += '';
                x = val.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');
                }

                ctrl.value = x1 + x2;
            }

            function CheckNumeric() {
                return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46;
            }

  </script>

HTML

<input type="text" onkeypress="return CheckNumeric()" onkeyup="FormatCurrency(this)" />

DEMO JSFIDDLE

Awtszs
quelle
2
number = 123456.7089;
result = parseInt( number ).toLocaleString() + "<br>";
result = number.toLocaleString( 'pt-BR' ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;
<div id="result"></div>
Ricardo
quelle
6
Können Sie bitte auch eine Beschreibung hinzufügen, damit op und andere Personen verstehen, wie dieser Code das Problem tatsächlich löst. Danke
Punit Gajjar
versuchen Sie es mit einem Nomber zwischen 1000 und 9999
Emiliano
1

PHP.js hat dazu eine Funktion namens number_format . Wenn Sie mit PHP vertraut sind, funktioniert es genauso .

istvanp
quelle
Der erste Link folgt zur JS-Implementierung der PHP-Version. Es ist nützlich.
o_nix
1

Alles was Sie tun müssen, ist wirklich Folgendes :

123000.9123.toLocaleString()
//result will be "123,000.912"
Ezeewei
quelle
Leider hängt es von Ihrer Plattform ab. Einige haben eine, toLocaleString()die keine Kommas hinzufügt, oder es fehlen andere Funktionen im Standard. Es ist einfach, die toLocaleStringAnwesenheit zu überprüfen, aber nicht die Konformität.
Hippietrail
versuchen Sie es mit einer Zahl zwischen 1000 und 9999
Emiliano
0

Kombination von Lösungen zur Reaktion

  let converter = Intl.NumberFormat();
  let salary =  monthlySalary.replace(/,/g,'')
  console.log(converter.format(salary))

  this.setState({
    monthlySalary: converter.format(salary)
  })
}

handleOnChangeMonthlySalary(1000)```
Chinedu Ofor
quelle
0

Sie können das ngx-Format-Feld verwenden. Es ist eine Anweisung, den Eingabewert zu formatieren, der in der Ansicht angezeigt wird. Der Eingabewert, der im Backend gespeichert wird, wird nicht manipuliert. Siehe Link hier !

Beispiel:

component.html:

<input type="text" formControlName="currency" [appFormatFields]="CURRENCY"
(change)="onChangeCurrency()">

component.ts

onChangeCurrency() {
this.currency.patchValue(this.currency.value);
}

Um die Demo zu sehen: hier !

Moumita Kundu
quelle
0

Sie können die folgende Funktion verwenden:

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}`;
}

// Use Example

let min = 1556454.0001;
let max = 15556982.9999;

console.time('number format');
for (let i = 0; i < 15; i++) {
  let randomNumber = Math.random() * (max - min) + min;
  let formated = format(randomNumber, 4, ',', '.'); // formated number

  console.log('number: ', randomNumber, '; formated: ', formated);
}
console.timeEnd('number format');

jin_maxtor
quelle
Mach es nicht so verwirrend. Verwenden Sie einfach toLocaleString (). Weitere Informationen unter developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Sajad Saderi
@sajadsaderi Ich verwende auch toLocaleString () friend, aber diese Funktion gibt mir nicht viel Flexibilität, so dass ich mich nicht mit regionalen Abkürzungen befassen muss und jemand anderes sie verwenden könnte, da die Definition dieser Funktion mit dem number_format identisch ist () Funktion von PHP.
jin_maxtor
-1

Die Antworten hier haben mir nicht gefallen, deshalb habe ich eine Funktion erstellt, die für mich funktioniert. Ich möchte nur teilen, falls jemand anderes es nützlich findet.

function getFormattedCurrency(num) {
    num = num.toFixed(2)
    var cents = (num - Math.floor(num)).toFixed(2);
    return Math.floor(num).toLocaleString() + '.' + cents.split('.')[1];
}
Spencer Sullivan
quelle