Saya ingin memformat harga dalam JavaScript. Saya ingin fungsi yang mengambil float
sebagai argumen dan mengembalikan yang string
diformat seperti ini:
"$ 2,500.00"
Apa cara terbaik untuk melakukan ini?
javascript
formatting
currency
Daniel Magliola
sumber
sumber
formatNumber
Jawaban:
Number.prototype.toFixed
Solusi ini kompatibel dengan setiap browser utama:
Yang Anda butuhkan adalah menambahkan simbol mata uang (mis.
"$" + profits.toFixed(2)
) Dan Anda akan mendapatkan jumlah Anda dalam dolar.Fungsi kustom
Jika Anda memerlukan penggunaan
,
antara setiap digit, Anda dapat menggunakan fungsi ini:Gunakan seperti ini:
Jika Anda akan selalu menggunakan '.' dan ',', Anda dapat membiarkan mereka keluar dari panggilan metode Anda, dan metode ini akan menetapkan default untuk Anda.
Jika budaya Anda memiliki dua simbol dibalik (yaitu orang Eropa) dan Anda ingin menggunakan default, cukup tempelkan dua baris berikut dalam
formatMoney
metode:Fungsi khusus (ES6)
Jika Anda dapat menggunakan sintaks ECMAScript modern (yaitu melalui Babel), Anda dapat menggunakan fungsi yang lebih sederhana ini sebagai gantinya:
sumber
d
dant
menjadi.
dan,
masing - masing sehingga Anda tidak harus menentukannya setiap waktu. juga, saya sarankan untuk memodifikasi awalreturn
pernyataan untuk membacareturn s + '$' + [rest]
:, jika tidak, Anda tidak akan mendapatkan tanda dolar.Format Intl
Javascript memiliki pemformat angka (bagian dari API Internasionalisasi).
Biola JS
Gunakan
undefined
menggantikan argumen pertama ('en-US'
dalam contoh) untuk menggunakan lokal sistem (pengguna lokal jika kode berjalan di browser). Penjelasan lebih lanjut tentang kode lokal .Berikut daftar kode mata uang .
Intl.NumberFormat vs Number.prototype.toLocaleString
Catatan akhir membandingkan ini dengan yang lebih tua.
toLocaleString
. Keduanya pada dasarnya menawarkan fungsionalitas yang sama. Namun, toLocaleString dalam inkarnasinya yang lebih lama (pre-Intl) sebenarnya tidak mendukung lokal : ia menggunakan sistem lokal. Karena itu, pastikan Anda menggunakan versi yang benar ( MDN menyarankan untuk memeriksa keberadaanIntl
). Juga, kinerja keduanya sama untuk satu item, tetapi jika Anda memiliki banyak angka untuk diformat, menggunakanIntl.NumberFormat
~ 70 kali lebih cepat. Berikut cara menggunakannyatoLocaleString
:Beberapa catatan tentang dukungan browser
sumber
Solusi singkat dan cepat (bekerja di mana-mana!)
Gagasan di balik solusi ini adalah mengganti bagian yang cocok dengan pertandingan pertama dan koma, yaitu
'$&,'
. Pencocokan dilakukan menggunakan pendekatan lookahead . Anda dapat membaca ungkapan sebagai "cocok dengan angka jika diikuti oleh urutan tiga set angka (satu atau lebih) dan satu titik" .UJI:
DEMO: http://jsfiddle.net/hAfMM/9571/
Solusi pendek yang diperpanjang
Anda juga dapat memperluas prototipe
Number
objek untuk menambahkan dukungan tambahan dari sejumlah desimal[0 .. n]
dan ukuran grup angka[0 .. x]
:DEMO / UJI: http://jsfiddle.net/hAfMM/435/
Solusi singkat super diperpanjang
Dalam versi super luas ini Anda dapat mengatur berbagai jenis pembatas:
DEMO / UJI: http://jsfiddle.net/hAfMM/612/
sumber
.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
.Number.prototype.toMoney = (decimal=2) -> @toFixed(decimal).replace /(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,"
\.
dengan$
(end of line), yaituthis.toFixed(0).replace(/(\d)(?=(\d{3})+$)/g, "$1,")
.$1,
. Pencocokan dilakukan menggunakan pendekatan lookahead . Anda dapat membaca ungkapan sebagai "cocok dengan angka jika diikuti oleh urutan tiga set angka (satu atau lebih) dan satu titik" .Lihatlah objek Nomor JavaScript dan lihat apakah itu dapat membantu Anda.
toLocaleString()
akan memformat angka menggunakan pemisah ribuan lokasi spesifik.toFixed()
akan membulatkan angka ke sejumlah tempat desimal tertentu.Untuk menggunakan ini pada saat yang sama, nilai harus memiliki jenisnya diubah kembali ke angka karena keduanya menghasilkan string.
Contoh:
sumber
toLocaleString
yang menggunakan sistem lokal, dan yang baru (tidak kompatibel) yang berasal dari ECMAScript Intl API. Dijelaskan di sini . Jawaban ini sepertinya ditujukan untuk versi lama.Di bawah ini adalah kode Patrick Desjardins (alias Daok) dengan sedikit komentar ditambahkan dan beberapa perubahan kecil:
dan di sini beberapa tes:
Perubahan kecil adalah:
sedikit bergerak
Math.abs(decimals)
harus dilakukan hanya ketika tidakNaN
.decimal_sep
tidak boleh berupa string kosong lagi (semacam pemisah desimal adalah HARUS)kami menggunakan
typeof thousands_sep === 'undefined'
seperti yang disarankan dalam Cara terbaik untuk menentukan apakah argumen tidak dikirim ke fungsi JavaScript(+n || 0)
tidak diperlukan karenathis
merupakanNumber
objekJS Fiddle
sumber
parseInt
disebut pada nilai absolut dari bagian INTEGER dari nomor tersebut. Bagian INTEGER tidak dapat memulai dengan NOL kecuali hanya NOL! DanparseInt(0) === 0
apakah oktal atau desimal.0
dianggap oktal olehparseInt
. Tetapi dalam kode ini TIDAK MUNGKIN untukparseInt
menerima016
sebagai input (atau nilai format oktal lainnya), karena argumen yang diteruskan keparseInt
pertama diproses olehMath.abs
fungsi. Jadi tidak ada cara untukparseInt
menerima angka yang dimulai dengan nol kecuali hanya nol atau0.nn
(di manann
desimal). Tetapi keduanya0
dan0.nn
string akan dikonversi olehparseInt
menjadi NOL polos seperti yang seharusnya.accounting.js adalah pustaka JavaScript kecil untuk pemformatan angka, uang, dan mata uang.
sumber
Jika jumlah adalah angka, katakan
-123
, laluakan menghasilkan string
"-$123.00"
.Inilah contoh kerja yang lengkap .
sumber
minimumFractionDigits: 0
Inilah formatter uang js terbaik yang pernah saya lihat:
Itu diformat ulang dan dipinjam dari sini: https://stackoverflow.com/a/149099/751484
Anda harus menyediakan penunjuk mata uang Anda sendiri (Anda menggunakan $ di atas).
Sebut saja seperti ini (walaupun perhatikan bahwa args default ke 2, koma, & titik, jadi Anda tidak perlu memberikan args jika itu pilihan Anda):
sumber
var
pernyataan.Sudah ada beberapa jawaban bagus di sini. Inilah upaya lain, hanya untuk bersenang-senang:
Dan beberapa tes:
Diedit: sekarang ia akan menangani angka negatif juga
sumber
i = orig.length - i - 1
di callback. Tetap saja, satu lagi traversal yang kurang dari array.reduce
Metode ini diperkenalkan di Ecmascript 1.8, dan tidak didukung di Internet Explorer 8 dan di bawah.Bekerja untuk semua browser saat ini
Gunakan
toLocaleString
untuk memformat mata uang dalam representasi bahasa yang sensitif (menggunakan kode mata uang ISO 4217 ).Contoh cuplikan kode Rand Afrika Selatan untuk @avenmore
sumber
Saya pikir apa yang Anda inginkan
f.nettotal.value = "$" + showValue.toFixed(2);
sumber
Numeral.js - perpustakaan js untuk pemformatan angka mudah oleh @adamwdraper
sumber
Oke, berdasarkan apa yang Anda katakan, saya menggunakan ini:
Saya terbuka untuk saran peningkatan (saya lebih suka untuk tidak memasukkan YUI hanya untuk melakukan ini :-)) Saya sudah tahu saya harus mendeteksi "." alih-alih hanya menggunakannya sebagai pemisah desimal ...
sumber
Saya menggunakan perpustakaan Globalisasi (dari Microsoft):
Ini adalah proyek yang bagus untuk melokalkan angka, mata uang, dan tanggal dan membuatnya secara otomatis diformat dengan cara yang benar sesuai dengan lokal pengguna! ... dan meskipun itu merupakan ekstensi jQuery, saat ini 100% perpustakaan independen. Saya sarankan Anda semua untuk mencobanya! :)
sumber
javascript-number-formatter (sebelumnya di Google Code )
Hanya 75 baris termasuk info lisensi MIT, baris kosong & komentar.#,##0.00
atau dengan negasi-000.####
.# ##0,00
,#,###.##
,#'###.##
atau jenis dari simbol non-penomoran.#,##,#0.000
atau#,###0.##
semuanya valid.##,###,##.#
atau0#,#00#.###0#
semuanya OK.format( "0.0000", 3.141592)
.(kutipan dari README-nya)
sumber
+1 ke Jonathan M untuk memberikan metode asli. Karena ini secara eksplisit formatter mata uang, saya melanjutkan dan menambahkan simbol mata uang (default ke '$') ke output, dan menambahkan koma default sebagai pemisah ribuan. Jika Anda tidak benar-benar menginginkan simbol mata uang (atau ribuan pemisah), cukup gunakan "" (string kosong) sebagai argumen Anda untuk itu.
sumber
+n || 0
-satunya hal yang tampaknya sedikit aneh (bagi saya).this
adalah nama variabel yang sangat berguna. Mengubahnyan
sehingga Anda dapat menyimpan 3 karakter pada waktu definisi mungkin diperlukan di era ketika RAM dan bandwidth dihitung dalam KB, tetapi hanya membingungkan di era ketika minifier akan mengurus semua itu sebelum mencapai produksi. Optimalisasi mikro pintar lainnya setidaknya bisa diperdebatkan.Ada port javascript dari fungsi PHP "number_format".
Saya merasa sangat berguna karena mudah digunakan dan dikenali untuk pengembang PHP.
(Blok komentar dari aslinya , termasuk di bawah ini untuk contoh & kredit jatuh tempo)
sumber
Metode yang lebih pendek (untuk memasukkan ruang, koma atau titik) dengan ekspresi reguler?
sumber
Belum pernah melihat yang seperti ini. Cukup ringkas dan mudah dimengerti.
Ini adalah versi dengan lebih banyak opsi dalam hasil akhir untuk memungkinkan memformat mata uang yang berbeda dalam format lokal yang berbeda.
sumber
Jawaban Patrick Desjardins terlihat bagus, tetapi saya lebih suka javascript saya yang sederhana. Inilah fungsi yang baru saja saya tulis untuk memasukkan angka dan mengembalikannya dalam format mata uang (dikurangi tanda dolar)
sumber
Bagian utama adalah memasukkan ribuan pemisah, yang bisa dilakukan seperti ini:
sumber
Ada built-in
function
toFixed dijavascript
sumber
toFixed()
toFixed()
adalah fungsi dariNumber
objek dan tidak akan berfungsivar num
jika itu adalahString
, jadi konteks tambahan membantu saya.Dari WillMaster .
sumber
Saya menyarankan kelas NumberFormat dari Google Visualisasi API .
Anda dapat melakukan sesuatu seperti ini:
Saya harap ini membantu.
sumber
Ini mungkin agak terlambat, tapi inilah metode yang baru saja saya upayakan bagi rekan kerja untuk menambahkan
.toCurrencyString()
fungsi sadar-lokal ke semua angka. Internalisasi hanya untuk pengelompokan angka, BUKAN tanda mata uang - jika Anda menghasilkan dolar, gunakan"$"
sesuai yang disediakan, karena$123 4567
di Jepang atau Cina adalah jumlah USD yang sama seperti$1,234,567
di AS. Jika Anda menghasilkan euro / dll, maka ubah tanda mata uang dari"$"
.Nyatakan ini di mana saja di KEPALA Anda atau di mana pun diperlukan, tepat sebelum Anda perlu menggunakannya:
Lalu kamu selesai! Gunakan di
(number).toCurrencyString()
mana saja Anda perlu menampilkan nomor sebagai mata uang.sumber
Seperti biasanya, ada banyak cara untuk melakukan hal yang sama tetapi saya akan menghindari penggunaan
Number.prototype.toLocaleString
karena dapat mengembalikan nilai yang berbeda berdasarkan pengaturan pengguna.Saya juga tidak menyarankan memperpanjang
Number.prototype
- memperluas prototipe objek asli adalah praktik yang buruk karena dapat menyebabkan konflik dengan kode orang lain (mis. Perpustakaan / kerangka kerja / plugin) dan mungkin tidak kompatibel dengan implementasi / versi JavaScript di masa mendatang.Saya percaya bahwa Ekspresi Reguler adalah pendekatan terbaik untuk masalah ini, inilah implementasinya:
diedit pada 2010/08/30: opsi ditambahkan untuk mengatur jumlah angka desimal. diedit pada 2011/08/23: opsi ditambahkan untuk mengatur jumlah angka desimal menjadi nol.
sumber
Berikut adalah beberapa solusi, semua lulus dari test suite, test suite dan benchmark termasuk, jika Anda ingin copy dan paste untuk menguji, coba This Gist .
Metode 0 (RegExp)
Berbasiskan https://stackoverflow.com/a/14428340/1877620 , tetapi perbaiki jika tidak ada titik desimal.
Metode 1
Metode 2 (Membagi ke Array)
Metode 3 (Loop)
Contoh Penggunaan
Pemisah
Jika kami ingin kustom pemisah ribuan atau pemisah desimal, gunakan
replace()
:Suite uji
Tolok ukur
sumber
sumber
Opsi sederhana untuk penempatan koma yang tepat dengan membalik string terlebih dahulu dan regexp dasar.
sumber
Saya menemukan ini dari: accounting.js . Sangat mudah dan sangat sesuai dengan kebutuhan saya.
sumber
$('#price').val( accounting.formatMoney(OOA, { symbol: "€", precision: 2,thousand: ".", decimal :",",format: "%v%s" } ) );
- tampilkan 1.000,00 E