Jika Anda perlu nomor yang muncul dalam format mata uang atau berpisah dengan koma atau titik desimal, maka Anda bisa menggunakan Accounting.js, perpustakaan JavaScript untuk uang dan format mata uang.
Pada artikel ini, kita akan menunjukkan beberapa fungsi dasar, maka kita akan memanfaatkan dalam contoh aktual untuk menampilkan cara kerjanya.
Memulai
Accounting.js adalah library JavaScript tanpa dependensi. Anda tidak perlu jQuery untuk menggunakannya; dapat berjalan sendiri. Download kode sumber dari Github repository, memasukkannya ke dalam direktori yang sesuai, dan link file dalam dokumen HTML.
<script src="js/accounting.js"> < / script >
Formatting Dasar
Accounting.js menawarkan beberapa metode untuk format nomor. Dan yang pertama yang akan kita lihat adalah format uang ( ). Metode ini adalah fungsi dasar untuk mengubah nomor ke dalam mata uang. Untuk menggunakannya, setiap metode yang intialized oleh akuntansi dan kemudian diikuti dengan nama metode itu. Sebagai contoh:
accounting.formatMoney (2000000) ;
Pada pengaturan default, Accounting.js akan menampilkan contoh di atas dengan simbol dolar, memisahkan setiap tiga digit dengan koma, dan menggunakan titik desimal untuk memisahkan dolar dari sen.
$ 2,000,000.00
Beberapa negara menggunakan pemisah yang berbeda untuk setiap tiga digit (ribuan) dan desimal. Accounting.js sepenuhnya localisable. Jika output standar bukanlah cara mata uang lokal Anda ditampilkan, Anda dapat membuat perubahan dengan Options.
Di bawah ini, kita mengambil Jerman sebagai contoh, yang menggunakan titik pemisah untuk ribuan dan koma untuk desimal :
accounting.formatMoney(2000000, {
symbol : "€",
thousand : ".",
decimal : ",", });
Ini akan menampilkan:
€ 2.000.000,00
Jika Anda ingin memformat angka tanpa simbol mata uang, Anda dapat menggunakan method FormatNumber ( ).
Pembulatan Nomor
Mata uang mungkin memiliki desimal. Tapi kita biasanya mengumpulkan mereka atas atau bawah untuk nilai terdekat untuk membuat nomor mudah untuk mengingat atau menebak. Di Accounting.js, kita dapat menggunakan. ToFixed ( ) untuk melakukannya. Contoh ini menunjukkan bagaimana kita menghapus angka desimal serta sekeliling mereka kepada kesepuluh terdekat :
accounting.toFixed ( 102,58 , 0 ) ;
Outputnya adalah :
103
Saat ini, kita akan menggunakan fungsi-fungsi untuk membangun currency converter (converter mata uang). Kita tidak akan membangun sebuah konverter yang luas, cukup sederhana untuk menggambarkan apa yang Accounting.js bisa lakukan.
Dalam latihan ini, kita akan mengkonversi USD ke 2 mata uang yaitu KRW (Won Korea) dan JPY (Yen Jepang).
Mari kita tata letak struktur dokumen sebagai berikut :
<div class="currency-option">
<div class="row">
<h4 class="heading">From</h4>
<select id="input-currency" disabled>
<option value="USD" data-symbol="$" selected>US Dollar</option>
</select>
<span id="input-symbol">$</span> <input id="input-number" class="input" type="number" min="0">
</div>
<div class="row">
<h4 class="heading">To</h4>
<select id="output-currency">
<option value="krw" data-symbol="₩" selected>Korean Won</option>
<option value="jpy" data-symbol="¥">Japanese Yen</option>
</select>
<span id="output-number">₩ 0</span>
</div>
</div>
Baris pertama berisi opsi dropdown yang diatur ke USD, dan cacat sehingga user tidak akan dapat memilih opsi lain. Baris ini juga berisi field input jenis nomor di mana kita akan masukkan jumlah USD untuk dikonversi.
Pada baris kedua, kita memiliki pilihan dropdown juga, yang mengandung dua pilihan mata uang: Won Korea dan Yen Jepang. Masing-masing pilihan memiliki nilai atribut, dan atribut data simbol untuk menyimpan simbol mata uang. Kita menggunakan elemen rentang output hasil dikonversi.
Nilai Tukar
Pada saat tulisan ini 1 USD sama dengan KRW1077.80 dan JPY102.24. Kita bisa mengambil nilai kurs tersebut secara real time dari Open Exchange Rate. Tapi, untuk saat ini, kita hanya menempatkan nilai dalam variabel dengan toFixed (metode) untuk mengumpulkan nomor :
var jpy = accounting.toFixed (102.24 , 0),
krw = accounting.toFixed (1.077,80 , 0),
Dapatkan Option
Selanjutnya, kita akan membuat fungsi baru untuk mendapatkan nilai dari nilai dan data simbol atribut dari pilihan dropdown. Nilai-nilai kemudian disimpan dalam Array.
var getCurrency = function ( elem ) {
var $ curAbbr = elem.find . ( ' : dipilih ' ) val ( ) ,
$ curSign = elem.find ( ' : dipilih ' ) . data ( ' simbol ' ) ;
kembali {
' simbol ' : $ curSign ,
'value' : $ curAbbr ,
} ;
} ;
Fungsi Konversi
Kita ingin konversi terjadi secara real time. Ini berarti bahwa itu akan terjadi ketika pengguna mengetik dalam bidang masukan atau beralih antara mata uang.
Untuk mencapai ide ini, kita akan menetapkan, keluaran-currency serta input-nomor dengan tiga JavaScript Events yakni berubah, keyup, dan KeyDown cara ini :
$('#output-currency, #input-number').on('change keyup keydown', function() {
// the stuff
}
Kemudian, kita akan mengambil nilai dari opsi dropdown, # keluaran-mata uang, dengan menggunakan fungsi getCurrency yang kita buat di atas. Nilai-nilai dipisahkan dalam dua variabel yang berbeda yaitu $ simbol dan $ val, sebagai berikut.
var $currency = getCurrency($('#output-currency')),
$symbol = $currency['symbol'],
$val = $currency['value'];
Kita juga perlu untuk mendapatkan nomor dari kolom input, dan saat ini nilai tukar yang telah kita tentukan dalam variabel jpy dan krw; menggunakan fungsi conditional kita bisa memutuskan mana nilai mata uang (krw atau jpy) untuk digunakan.
// get number
var mulitplyNum = ($val == 'jpy') ? jpy : krw; var $getInput = $('#input-number').val();
Dengan jumlah tersebut di atas, kita dapat menghitung hasilnya.
var $ getTotal = ( $ getInput * mulitplyNum ) ;
Tapi, sebelum kita keluaran nomor, mari kita membungkusnya dalam format yang tepat dengan menggunakan formatMoney (metode). :
var number = accounting.formatMoney($getTotal, {
symbol : $symbol,
precision : 0,
thousand : ',' });
Dan terakhir, kita output jumlah diformat final.
$('#output-number').text(number);
Dan kita sudah selesai. Anda dapat melihat demo dalam tindakan di bawah ini .
Demo
Tidak ada komentar:
Posting Komentar