Javascript Thousand Separator / String-Format [Duplikat]

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 #)

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,''))

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.

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)

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)

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

Ich benutze das:

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

Quelle: Link

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

var number = 35002343;

console.log(number.toLocaleString());

Die Referenz finden Sie hier https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

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

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>

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

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

123000.9123.toLocaleString()
//result will be "123,000.912"

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)```

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 !

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');

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