Pemisah Seribu Javascript / format string [duplikat]

Apakah ada fungsi dalam Javascript untuk memformat angka dan string?

Saya mencari cara untuk ribuan pemisah untuk string atau angka ... (Seperti String.Format Di c #)

Perbarui (7 tahun kemudian)

Referensi yang dikutip dalam jawaban asli di bawah ini salah. Ada yang dibangun di fungsi untuk ini, yang persis apa kaiser menyarankan bawah:toLocaleString

Jadi Anda bisa melakukan:

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

Fungsi yang diterapkan di bawah ini juga berfungsi, tetapi tidak diperlukan.

(Saya pikir mungkin saya akan beruntung dan mengetahui bahwa hal itu diperlukan pada tahun 2010, tetapi tidak. Menurut referensi yang lebih dapat diandalkan ini , toLocaleString telah menjadi bagian dari standar sejak ECMAScript Edisi ke-3 [1999], yang menurut saya berarti itu akan didukung sejauh IE 5.5.)

Jawaban Asli

Menurut referensi ini, tidak ada fungsi bawaan untuk menambahkan koma ke angka. Tetapi halaman itu menyertakan contoh cara mengkodekannya sendiri:

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

Edit: Untuk sebaliknya (ubah string dengan koma menjadi angka), Anda dapat melakukan sesuatu seperti ini:

parseFloat("1,234,567.89".replace(/,/g,''))

Jika ingin melokalkan ribuan pemisah, pembatas, dan pemisah desimal, ikuti yang berikut ini:

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

Ada beberapa opsi yang dapat Anda gunakan (dan bahkan lokal dengan fallback):

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>

Rincian di halaman info MDN .

Edit: Komentator @ Saya suka Serena menambahkan yang berikut:

Untuk mendukung browser dengan bahasa non-Inggris yang kami masih menginginkan pemformatan bahasa Inggris, gunakan value.toLocaleString('en'). Juga berfungsi untuk floating point.

Diperbarui menggunakan dukungan lihat ke belakang sejalan dengan perubahan ECMAScript2018.
Untuk kompatibilitas mundur, gulir lebih jauh ke bawah untuk melihat solusi asli.

Ekspresi reguler dapat digunakan - terutama berguna dalam menangani angka besar yang disimpan sebagai string.

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

»Penjelasan ekspresi reguler panjang (regex101.com)

Jawaban asli ini mungkin tidak diperlukan tetapi dapat digunakan untuk kompatibilitas ke belakang.

Mencoba menangani ini dengan ekspresi reguler tunggal (tanpa panggilan balik) kemampuan saya saat ini membuat saya gagal karena kurangnya tampilan negatif di Javascript ... tidak pernah kurang, inilah alternatif ringkas lain yang berfungsi dalam kebanyakan kasus umum - memperhitungkan titik desimal apa pun dengan mengabaikan kecocokan di mana indeks kecocokan muncul setelah indeks suatu periode.

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

»Penjelasan ekspresi reguler panjang (regex101.com)

Ada plugin nomor jQuery yang bagus: https://github.com/teamdf/jquery-number

Ini memungkinkan Anda untuk mengubah angka apa pun dalam format yang Anda suka, dengan opsi untuk digit desimal dan karakter pemisah untuk desimal dan ribuan:

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

Anda dapat menggunakannya di dalam kolom input secara langsung, yang lebih bagus, menggunakan opsi yang sama seperti di atas:

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

Atau Anda dapat menerapkan ke seluruh rangkaian elemen DOM menggunakan selector:

$('span.number').number(true, 2);

Saya menggunakan ini:

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

sumber: 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());

untuk referensi, Anda dapat memeriksa di sini https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Anda bisa menggunakan javascript. di bawah ini adalah kodenya, hanya acceptnumerik dan satudot

berikut adalah javascriptnya

<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

PHP.js memiliki fungsi untuk melakukan ini yang disebut number_format . Jika Anda terbiasa dengan PHP, cara kerjanya persis sama .

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>

Yang perlu Anda lakukan hanyalah ini :

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

Kombinasi larutan untuk bereaksi

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

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

handleOnChangeMonthlySalary(1000)```

Anda dapat menggunakan ngx-format-field. Ini adalah petunjuk untuk memformat nilai input yang akan muncul dalam tampilan. Ini tidak akan memanipulasi nilai Input yang akan disimpan di backend. Lihat link di sini !

Contoh:

component.html:

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

component.ts

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

Untuk melihat demo: di sini !

Anda dapat menggunakan fungsi berikut:

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

Saya tidak suka salah satu jawaban di sini, jadi saya membuat fungsi yang berfungsi untuk saya. Hanya ingin berbagi jika ada orang lain yang menganggapnya berguna.

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