Saya mencoba untuk mencetak bilangan bulat dalam JavaScript dengan koma sebagai pemisah ribuan. Misalnya, saya ingin menunjukkan nomor 1234567 sebagai "1.234.567". Bagaimana saya bisa melakukan ini?
Inilah cara saya melakukannya:
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
Apakah ada cara yang lebih sederhana atau lebih elegan untuk melakukannya? Akan lebih baik jika bekerja dengan pelampung juga, tetapi itu tidak perlu. Tidak perlu spesifik lokal untuk memutuskan antara periode dan koma.
javascript
formatting
numbers
Elias Zamaria
sumber
sumber
Number.prototype.toLocaleString
masih tidak berfungsi di Safari, pada tahun 2016 . Alih-alih benar-benar memformat angka, itu hanya mengembalikannya, tidak ada kesalahan yang dilemparkan. Mempunyai facepalm terbesar hari ini sebagai hasil dari ... #goodworkAppleJawaban:
Saya menggunakan ide dari jawaban Kerry, tetapi menyederhanakannya karena saya hanya mencari sesuatu yang sederhana untuk tujuan spesifik saya. Inilah yang saya lakukan:
Tampilkan cuplikan kode
Regex menggunakan 2 pernyataan lookahead:
Misalnya, jika Anda melewatinya
123456789.01
, pernyataan positif akan cocok dengan setiap tempat di sebelah kiri 7 (karena789
kelipatan 3 digit,678
kelipatan 3 digit567
, dll.). Pernyataan negatif memeriksa bahwa kelipatan 3 digit tidak memiliki digit apa pun setelahnya.789
memiliki titik setelahnya sehingga persis kelipatan 3 digit, jadi koma ada di sana.678
adalah kelipatan dari 3 digit tetapi memiliki9
setelah itu, sehingga 3 digit tersebut adalah bagian dari grup 4, dan koma tidak pergi ke sana. Demikian pula untuk567
.456789
adalah 6 digit, yang merupakan kelipatan dari 3, jadi koma berjalan sebelum itu.345678
adalah kelipatan dari 3, tetapi memiliki9
setelahnya, jadi tidak ada koma di sana. Dan seterusnya. Itu\B
menjaga regex dari meletakkan koma di awal string.@ neu-rah menyebutkan bahwa fungsi ini menambahkan koma di tempat yang tidak diinginkan jika ada lebih dari 3 digit setelah titik desimal. Jika ini merupakan masalah, Anda dapat menggunakan fungsi ini:
Tampilkan cuplikan kode
@ tjcrowder menunjukkan bahwa sekarang JavaScript telah melihat di belakang ( info dukungan ), itu dapat diselesaikan dalam ekspresi reguler itu sendiri:
Tampilkan cuplikan kode
(?<!\.\d*)
adalah pandangan negatif di belakang yang mengatakan bahwa pertandingan tidak dapat didahului oleh angka.
nol atau lebih yang diikuti. Tampilan negatif di belakang lebih cepat daripadasplit
danjoin
solusi ( perbandingan ), setidaknya dalam V8.sumber
Saya terkejut tidak ada yang menyebutkan Number.prototype.toLocaleString . Ini diimplementasikan dalam JavaScript 1.5 (yang diperkenalkan pada tahun 1999) sehingga pada dasarnya didukung di semua browser utama.
Ia juga bekerja di Node.js pada v0.12 melalui penyertaan Intl
Perhatikan saja bahwa fungsi ini mengembalikan string, bukan angka.
Jika Anda menginginkan sesuatu yang berbeda, Numeral.js mungkin menarik.
sumber
var number = 123456.000; number.toLocaleString('en-US', {minimumFractionDigits: 2}); "123,456.00"
Opsi-opsi itu tidak bekerja di FF atau Safari sekalipun.X XXX XXX,YYY
).toLocaleString
bekerja di Node.js pada v0.12 melalui penyertaan Intl .parseInt("1234567", 10).toLocaleString('en-US', {minimumFractionDigits: 2})
ataunew Number("1234567").toLocaleString('en-US', {minimumFractionDigits: 2})
sebagai gantinya. Ini tidak berfungsi karena Anda menggunakannya pada string, bukan angka.⚠ Pikirkan bahwa javascript memiliki nilai integer maksimum 9007199254740991
toLocaleString :
NumberFormat ( Safari tidak didukung):
Dari apa yang saya periksa (setidaknya Firefox) keduanya kurang lebih sama tentang kinerja.
sumber
toLocaleString
karya dasar tentang safari, opsi tidaktoLocaleString
solusi harus mungkin juga termasuk lokal yang diinginkan, sehinggatoLocaleString("en")
, karena Inggris menggunakan pola koma. Namun, jikatoLocaleString()
tanpa indikator lokal dijalankan di Perancis, maka itu akan menghasilkan periode alih-alih koma karena itulah yang digunakan untuk memisahkan ribuan secara lokal.Saya sarankan menggunakan number_format () phpjs.org
UPDATE 02/13/14
Orang-orang telah melaporkan ini tidak berfungsi seperti yang diharapkan, jadi saya melakukan JS Fiddle yang mencakup tes otomatis.
Pembaruan 26/11/2017
Berikut biola itu sebagai Cuplikan Stack dengan output yang sedikit dimodifikasi:
sumber
Ini adalah variasi dari jawaban @ mikez302, tetapi dimodifikasi untuk mendukung angka dengan desimal (per umpan balik @ neu-rah bahwa numberWithCommas (12345.6789) -> "12.345.6.789" bukan "12.345.6789"
sumber
sumber
Menggunakan ekspresi Reguler
Menggunakan toLocaleString ()
ref MDN: Number.prototype.toLocaleString ()
Menggunakan Intl.NumberFormat ()
ref Intl.NumberFormat
DEMO DI SINI
Performa
http://jsben.ch/sifRd
sumber
Intl.NumberFormat
Fungsi JS asli. Didukung oleh IE11, Edge, Safari terbaru, Chrome, Firefox, Opera, Safari di iOS dan Chrome di Android.
sumber
Terima kasih untuk semua orang atas balasan mereka. Saya telah membangun beberapa jawaban untuk membuat solusi yang lebih "satu ukuran untuk semua".
Potongan pertama menambahkan fungsi yang meniru PHP 's
number_format()
untuk prototipe Nomor. Jika saya memformat angka, saya biasanya ingin tempat desimal sehingga fungsinya menunjukkan jumlah tempat desimal untuk ditampilkan. Beberapa negara menggunakan koma sebagai desimal dan desimal sebagai pemisah ribuan sehingga fungsinya memungkinkan pemisah ini diatur.Anda akan menggunakan ini sebagai berikut:
Saya menemukan bahwa saya sering perlu mendapatkan nomor kembali untuk operasi matematika, tetapi parseFloat mengubah 5.000 menjadi 5, hanya mengambil urutan pertama dari nilai integer. Jadi saya membuat fungsi konversi float saya sendiri dan menambahkannya ke prototipe String.
Sekarang Anda dapat menggunakan kedua fungsi sebagai berikut:
sumber
var parts = this.toFixed(decimals).toString().split('.');
var dec_point
. Terima kasih telah menunjukkannya.Saya cukup terkesan dengan jumlah jawaban yang didapat pertanyaan ini. Saya suka jawabannya oleh uKolka :
Namun sayangnya, di beberapa lokal seperti Spanyol, itu tidak berfungsi (IMHO) seperti yang diharapkan untuk angka di bawah 10.000:
Memberi
1000
dan tidak1.000
.Lihat toLocaleString yang tidak bekerja pada angka kurang dari 10.000 di semua browser untuk mengetahui alasannya.
Jadi saya harus menggunakan jawaban oleh Elias Zamaria memilih karakter pemisah ribuan yang tepat:
Yang ini berfungsi baik sebagai satu-liner untuk kedua lokal yang menggunakan
,
atau.
sebagai pemisah ribuan dan mulai bekerja dari 1.000 dalam semua kasus.Memberi
1.000
dengan konteks lokal Spanyol.Jika Anda ingin memiliki kontrol mutlak atas cara angka diformat, Anda juga dapat mencoba yang berikut:
Memberi
1,234.57
.Yang ini tidak perlu ekspresi reguler. Ia bekerja dengan menyesuaikan angka dengan jumlah desimal yang diinginkan dengan yang
toFixed
pertama, kemudian membaginya di sekitar titik desimal.
jika ada. Sisi kiri kemudian diubah menjadi array angka yang dibalik. Kemudian pemisah ribuan ditambahkan setiap tiga digit dari awal dan hasilnya dibalik lagi. Hasil akhirnya adalah penyatuan dua bagian. Tanda nomor input dihapus denganMath.abs
terlebih dahulu dan kemudian dimasukkan kembali jika perlu.Ini bukan satu-liner tetapi tidak lebih lama dan mudah berubah menjadi fungsi. Variabel telah ditambahkan untuk kejelasan, tetapi mereka dapat diganti dengan nilai yang diinginkan jika diketahui sebelumnya. Anda dapat menggunakan ekspresi yang digunakan
toLocaleString
sebagai cara untuk mengetahui karakter yang tepat untuk titik desimal dan pemisah ribuan untuk lokal saat ini (perlu diingat bahwa mereka memerlukan Javascript yang lebih modern.)sumber
Saya pikir ini adalah ekspresi reguler terpendek yang melakukannya:
Saya memeriksanya di beberapa nomor dan berhasil.
sumber
Number.prototype.toLocaleString()
akan luar biasa jika disediakan secara native oleh semua browser (Safari) .Saya memeriksa semua jawaban lain tetapi tampaknya tidak ada yang mengisinya. Berikut ini adalah titik menuju itu, yang sebenarnya merupakan kombinasi dari dua jawaban pertama; jika
toLocaleString
berfungsi, gunakan, jika tidak, gunakan fungsi khusus.sumber
0.12345
akan menampilkan0.12,345
. Implementasi yang baik untuk ini dapat ditemukan di underscore.stringvalue > 1000
ke jika kondisi memperbaiki kasus itu, namun ini adalah poc dan tentu saja versi yang lebih baik dapat ditemukan di tempat lain, terima kasih telah menunjukkan.value > 1000
, karena itu akan sama untuk angka berapa pun dan lebih dari 3 desimal. misalnya1000.12345
pengembalian1,000.12,345
. Jawaban Anda bagus dan berada di jalan yang benar, tetapi tidak lengkap. Saya hanya mencoba menunjukkan kepada orang lain yang mungkin tersandung pada jawaban Anda dan hanya menyalin / menempelnya tanpa pengujian dengan data input yang berbeda.Pemisah ribuan dapat dimasukkan dengan cara yang ramah internasional menggunakan objek browser
Intl
:Lihat artikel MDN di NumberFormat untuk lebih lanjut, Anda dapat menentukan perilaku lokal atau default untuk pengguna. Ini sedikit lebih mudah karena menghargai perbedaan lokal; banyak negara menggunakan periode untuk memisahkan digit sementara koma menunjukkan desimal.
Intl.NumberFormat belum tersedia di semua browser, tetapi berfungsi di Chrome, Opera, & IE terbaru. Rilis Firefox berikutnya harus mendukungnya. Webkit tampaknya tidak memiliki garis waktu untuk implementasi.
sumber
Anda dapat menggunakan prosedur ini untuk memformat mata uang Anda.
Untuk info lebih lanjut, Anda dapat mengakses tautan ini.
https://www.justinmccandless.com/post/formatting-currency-in-javascript/
sumber
jika Anda berurusan dengan nilai mata uang dan banyak memformat, mungkin ada baiknya menambahkan accounting.js kecil yang menangani banyak kasus tepi dan pelokalan:
sumber
Kode berikut menggunakan char scan, jadi tidak ada regex.
Ini menunjukkan kinerja yang menjanjikan: http://jsperf.com/number-formatting-with-commas/5
2015.4.26: Perbaikan kecil untuk menyelesaikan masalah ketika jumlah <0. Lihat https://jsfiddle.net/runsun/p5tqqvs3/
sumber
commafy(-123456)
itu memberi-,123,456
Berikut adalah fungsi sederhana yang memasukkan koma untuk ribuan pemisah. Ini menggunakan fungsi array daripada RegEx.
Tautan CodeSandbox dengan contoh: https://codesandbox.io/s/p38k63w0vq
sumber
Gunakan kode ini untuk menangani format mata uang untuk india. Kode negara dapat diubah untuk menangani mata uang negara lain.
keluaran:
sumber
Anda juga dapat menggunakan konstruktor Intl.NumberFormat . Inilah cara Anda dapat melakukannya.
sumber
Saya menulis yang ini sebelum menemukan posting ini. Tidak ada regex dan Anda benar-benar dapat memahami kode tersebut.
sumber
EDIT: Fungsi ini hanya berfungsi dengan angka positif. untuk exmaple:
Output: "123,123,231,232"
Tetapi untuk menjawab pertanyaan di atas
toLocaleString()
metode hanya memecahkan masalah.Output: "123,123,231,232"
Bersorak!
sumber
Jawaban saya adalah satu-satunya jawaban yang sepenuhnya menggantikan jQuery dengan alternatif yang jauh lebih masuk akal:
Solusi ini tidak hanya menambahkan koma, tetapi juga membulatkan ke sen terdekat jika Anda memasukkan jumlah seperti
$(1000.9999)
Anda akan mendapatkan $ 1,001.00. Selain itu, nilai yang Anda masukkan dapat dengan aman berupa angka atau string; itu tidak masalah.Jika Anda berurusan dengan uang, tetapi tidak ingin tanda dolar terkemuka ditampilkan pada jumlah, Anda juga dapat menambahkan fungsi ini, yang menggunakan fungsi sebelumnya tetapi menghilangkan
$
:Jika Anda tidak berurusan dengan uang, dan memiliki beragam persyaratan pemformatan desimal, inilah fungsi yang lebih fleksibel:
Oh, dan omong-omong, fakta bahwa kode ini tidak berfungsi di beberapa versi lama Internet Explorer sepenuhnya disengaja. Saya mencoba untuk menghancurkan IE kapan saja saya dapat menangkapnya tidak mendukung standar modern.
Harap ingat bahwa pujian yang berlebihan, di bagian komentar, dianggap di luar topik. Sebagai gantinya, cukup beri aku suara.
sumber
Bagi saya, jawaban terbaik adalah menggunakan toLocaleString seperti yang dikatakan beberapa anggota. Jika Anda ingin memasukkan simbol '$', tambahkan saja languaje dan ketik opsi. Berikut adalah dan contoh untuk memformat angka ke Peso Meksiko
jalan pintas
sumber
Biarkan saya mencoba untuk meningkatkan uKolka 's jawaban dan mungkin bantuan orang lain menghemat waktu.
Gunakan Numeral.js .
Anda harus menggunakan Number.prototype.toLocaleString () hanya jika kompatibilitas browsernya tidak menjadi masalah.
sumber
Cara alternatif, mendukung desimal, pemisah dan negatif yang berbeda.
Beberapa koreksi oleh @Jignesh Sanghani, jangan lupa untuk mengunggah komentarnya.
sumber
fn.substr(0, i)
ganti dengann.substr(0, i)
dan juganumber.toFixed(dp).split('.')[1]
ganti denganparseFloat(number).toFixed(dp).split('.')[1]
. karena ketika saya menggunakan langsung itu memberi saya kesalahan. perbarui kode AndaSaya pikir fungsi ini akan menangani semua masalah yang terkait dengan masalah ini.
sumber
Hanya untuk Googler masa depan (atau tidak harus 'Googler'):
Semua solusi yang disebutkan di atas sangat bagus, namun, RegExp mungkin merupakan hal yang sangat buruk untuk digunakan dalam situasi seperti itu.
Jadi, ya, Anda dapat menggunakan beberapa opsi yang diusulkan atau bahkan menulis sesuatu yang primitif namun bermanfaat seperti:
Regexp yang digunakan di sini cukup sederhana dan perulangan akan berjalan tepat berapa kali yang dibutuhkan untuk menyelesaikan pekerjaan.
Dan Anda mungkin mengoptimalkannya jauh lebih baik, kode "KERING" & sebagainya.
Namun,
(dalam kebanyakan situasi) akan menjadi pilihan yang jauh lebih baik.
Intinya bukan dalam kecepatan eksekusi atau kompatibilitas lintas-browser.
Dalam situasi ketika Anda ingin menunjukkan angka yang dihasilkan kepada pengguna, metode .toLocaleString () memberi Anda kekuatan super untuk berbicara bahasa yang sama dengan pengguna situs web atau aplikasi Anda (apa pun bahasanya).
Metode ini menurut dokumentasi ECMAScript diperkenalkan pada tahun 1999, dan saya percaya bahwa alasannya adalah harapan bahwa Internet pada suatu saat akan menghubungkan orang-orang di seluruh dunia, jadi, beberapa alat "internalisasi" diperlukan.
Hari ini Internet memang menghubungkan kita semua, jadi, penting untuk diingat bahwa dunia adalah cara yang lebih kompleks yang dapat kita bayangkan & bahwa (hampir) kita semua ada di sini , di Internet.
Jelas, mengingat keragaman orang, tidak mungkin untuk menjamin UX yang sempurna untuk semua orang karena kami berbicara bahasa yang berbeda, menghargai hal-hal yang berbeda, dll. Dan justru karena ini, bahkan lebih penting untuk mencoba melokalkan hal-hal sebanyak mungkin .
Jadi, mengingat ada beberapa standar khusus untuk representasi tanggal, waktu, angka, dll. & Bahwa kami memiliki alat untuk menampilkan hal-hal tersebut dalam format yang disukai oleh pengguna akhir, bukankah itu jarang dan hampir tidak bertanggung jawab untuk tidak gunakan alat itu (terutama dalam situasi ketika kita ingin menampilkan data ini kepada pengguna)?
Bagi saya, menggunakan RegExp alih-alih .toLocaleString () dalam situasi seperti itu terdengar sedikit seperti membuat aplikasi jam dengan JavaScript & mengkodekannya sedemikian rupa sehingga hanya akan menampilkan waktu Praha (yang akan sangat tidak berguna untuk orang yang tidak tinggal di Praha) meskipun perilaku default
adalah mengembalikan data sesuai dengan jam pengguna akhir.
sumber
Saya “ benar ” biasa-ekspresi-satunya solusi bagi mereka cinta satu kalimat
Anda melihat para pemain yang antusias di atas? Mungkin Anda bisa bermain golf darinya. Inilah stroke saya.
Gunakan
THIN SPACE (U + 2009) untuk pemisah ribuan, seperti yang dikatakan oleh Sistem Satuan Internasional dalam edisi kedelapan (2006) publikasi mereka " Brosur SI: Sistem Satuan Internasional (SI) " (Lihat §5.3 .4.). Edisi kesembilan (2019) menyarankan untuk menggunakan ruang untuk itu (Lihat §5.4.4.). Anda dapat menggunakan apa pun yang Anda inginkan, termasuk koma.
Lihat.
Bagaimana cara kerjanya?
Untuk bagian integer
.replace(……, " I ")
Masukkan "Aku"/……/g
di masing-masing\B
di antara dua digit yang berdekatan(?=……)
LOOKAHEAD POSITIF yang bagian kanannya adalah(\d{3})+
satu atau lebih potongan tiga digit\b
diikuti oleh non-digit, seperti, titik, akhir string, dan lain-lain,(?<!……)
LOOKBEHIND NEGATIF tidak termasuk yang bagian kirinya\.\d+
adalah titik yang diikuti oleh angka ("memiliki pemisah desimal").Untuk bagian desimal
.replace(……, " F ")
Masukan "F"/……/g
di masing-masing\B
di antara dua digit yang berdekatan(?<=……)
LOOKBEHIND POSITIF yang bagian kirinya adalah\.
pemisah desimal(\d{3})+
diikuti oleh satu atau lebih potongan tiga digit.Kelas karakter dan batasan
Kompatibilitas browser
sumber
Saya menambahkan tofixed ke solusi Aki143S . Solusi ini menggunakan titik-titik untuk ribuan pemisah dan koma untuk presisi.
Contoh;
sumber
Sudah banyak jawaban bagus. Ini satu lagi, hanya untuk bersenang-senang:
Beberapa contoh:
sumber
format(-123456)
itu memberi-,123,456