Format Rupiah Dengan Javascript – Singkat dan Mudah

Pada kesempatan  kali ini kita akan membahas bagaimana cara mem format rupiah dengan javascript.

Untuk memformat output data database ke dalam bentuk rupiah, kita gunakan program serverside, seperti PHP.  Hal ini tidak efektif jika menggunakan program client side seperti javascript, karena harus menunggu semua dokumen di load.

Lalu, untuk tujuan apa membuat format rupiah dengan javascript?

Umumnya, format rupiah dengan javascript ini digunakan untuk mengelola  inputan dari user pada form baik secara langsung maupun tidak langsung.  Tidak langsung dalam hal ini misal membuat total dari semua inputan secara realtime.

I. Membuat Format Rupiah Dengan Javascript – Cara Mudah

Diinternet terdapat banyak script untuk membuat format rupiah dengan javascript. Kali ini saya menggunakan cara berbeda yaitu menggunakan regex, yang lebih simpel dan mudah dipelajari.

Adapun script jadinya adalah sebagai berikut:

var bilangan = 23456789;
	
var	number_string = bilangan.toString(),
	sisa 	= number_string.length % 3,
	rupiah 	= number_string.substr(0, sisa),
	ribuan 	= number_string.substr(sisa).match(/\d{3}/g);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}

// Cetak hasil
document.write(rupiah); // Hasil: 23.456.789

Script diatas akan menghasilkan angka 23.456.789.

Penjelasan:

• Pertama, karena kita akan memecah angka menggunakan fungsi untuk string, maka  kita ubah format angka menjadi string dengan fungsi toString  bilangan.toString()
• Selanjutnya kita cek apakah jumlah digit bukan kelipatan 3 (number_string.length % 3), hasilnya kita simpan pada variabel rupiah.

  Nilai variabel rupiah ini ada nilainya jika banyaknya angka tidak kelipatan 3, dan akan bernilai kosong jika banyaknya angka kelipatan 3. Pada contoh kali ini, nilai awal rupiah adalah 23.

• Selanjutnya, dengan regex yang simpel, kita kelompokkan sisanya per tiga digit, sisa ini berbentuk array dan disimpan ke dalam variabel ribuan. Dalam contoh ini, variabel ribuan akan berisi ["444"]["555"]
• Jika variabel ribuan ada nilainya: Jika jumlah digit tidak kelipatan 3 (variabel sisa ada isinya) maka separator bernilai titik (.), jika tidak, maka separator bernilai kosong.

  Hal ini untuk menghindari titik didepan angka jika jumlah angkan kelipatan 3, seperti: .125.000

• Terakhir, dengan operator += kita gabung nilai varibel rupiah.

Untuk lebih jelasnya, perhatikan gambar berikut:

DEMO: untuk demonya, silakan klik disini.

Cara lebih singkat

Sebenarnya ada cara lebih singkat lagi, yaitu:

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

Penjelasan:

• Pertama, kita ubah bilangan menjadi string ( bilangan.toString() ), kemudian kita balik urutan angka tersebut ( split('').reverse().join('') ), hasilnya 98765432 kita simpan pada variabel reverse
• Selanjutnya, dengan regex, kita pecah angka tersebut per tiga bagian menjadi array: ["987","654","32"].

  Regex \d{1,3}: artinya kita ambil angka (  \d  dapat diganti [0-9] ) dengan panjang digit 1-3, diambil yang terbanyak dahulu yaitu 3, artinya jika bisa menemukan tiga karakter, maka diambil 3 karakter, jika tidak 2, jika tidak 1.

• Kemudian kita gabung array tersebut dengan titik ( ribuan.join('.') ), hasil: 987.654.32, dan kita balik hasilnya (  split('').reverse().join('') ), hasilnya: 23.456.789

Untuk lebih jelasnya, perhatikan gambar berikut:

DEMO: Untuk demo penggunaan script ini, dapat dilihat disini.

II. Mendukung Koma (Desimal)

Pada rupiah, kita mengenal istilah desimal atau sen, meski jarang digunakan, pada sistem yang detail, penggunaan koma ini masih sering digunakan.

Untuk itu, mari kita sedikit ubah script kita, sehingga dapat mendukung koma/sen

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

Script diatas tetap kompatibel baik untuk bilangan bulat maupun bilangan yang memiliki pecahan/sen. Adapun perbedaan dari script sebelumnya hanya di baris 4 dan 13.

Penjelasan:

• Pada baris 4, dengan method split, kita pecah bilangan menjadi dua berdasarkan tanda koma, yaitu bilangan utuh (sebelum koma) dan bilangan pecahan (sesudah koma), hasilnya kita simpan pada variabel split.
• Selanjutnya, untuk bilangan bulat, kita gunakan split[0], sedangkan untuk pecahan, kita gunakan split[1]
• Pada baris ke 13, kita tes, apakah bilangan mengandung pecahan ( split[1] != undefined ) jika, ya, maka kita gabungkan pecahan dengan bilangan jadi.

III. Menerapkan Format Rupiah Pada Form

Format rupiah dengan javascript paling sering digunakan pada inputan form yang terkait dengan nilai nominal misal harga, jumlah diskon,  total harga, dan lain-lain.

Nah, script untuk menerapkan  format rupiah pada form input ini, sama seperti script yang telah kita bahas sebelumnya, bedanya, kita menggunakan event keyup dan keydown

keyup artinya event yang terjadi ketika tombol keyboard kita lepas (setelah kita tekan)  sedangkan  keydown artinya event yang terjadi ketika kita menekan tombol pada keyboard.

1. Event Keyup

Untuk menangkap event keyup, kita menggunakan method addEventListener. Method ini sudah didukung oleh semua browser modern, namun khusus untuk IE, baru mendukungnya versi 9 ketas.

Adapun script yang kita gunakan:

var input = document.getElementById('input-rupiah');
input.addEventListener('keyup', function(e)
{
	var 	number_string = bilangan.replace(/[^,\d]/g, '').toString(),
		split	= number_string.split(','),
		sisa 	= split[0].length % 3,
		rupiah 	= split[0].substr(0, sisa),
		ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
	if (ribuan) {
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
	
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
});

Script diatas sama persis dengan script sebelumnya, hanya saja, ada beberapa yang kita tambahkan:

• Pada fungsi diatas kita menambahkan kode  bilangan.replace(/[^,\d]/g, '') yang digunakan untuk menghilangkan semua karakter selain koma dan bilangan (  [^,\d] ). Sehingga, ketika user menekan huruf selain koma dan digit, maka akan langsung hilang.
• Kedua, kita menambahkan kode  prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : ''); untuk menambahkan prefix (dalam contoh ini Rp.) jika user menghendaki adanya prefix.

DEMO: Untuk demonya, silakan klik disini.

2. Penambahan Event Keydown

Ketika menggunakan event keyup, maka ketika user menekan huruf a pada keyboard, maka teks a tersebut akan muncul, namun ketika user melepas tombol a tad, maka seketika huruf a tersebut akan hilang.

Nah, event keydown ini dapat membatasi sehingga tombol a benar-benar tidak berfungsi alias ketika user menekan tombol a, maka tidak terjadi apa-apa.

Keterbatasan dari metode ini adalah kita harus menentukan huruf mana saja yang akan kita disable, untuk itu kita harus mengetahui keycode dari masing masing huruf. Keycode tersebut dapat dilihat disini.

Fungsi yang kita gunakan adalah:

var input = document.getElementById('input-rupiah');
input.addEventListener('keydown', function(event) {
{
	key = event.which || event.keyCode;
	if ( 	key != 188 // Comma
		 && key != 8 // Backspace
		 && key != 17 && key != 86 & key != 67 // Ctrl c, ctrl v
		 && (key < 48 || key > 57) // Non digit
		 // Dan masih banyak lagi seperti tombol del, panah kiri dan kanan, tombol tab, dll
		) 
	{
		event.preventDefault();
		return;
	}
});

DEMO: Untuk demonya, silakan klik disini.

IV. Kesimpulan

Membuat format rupiah dengan javascript dapat dilakukan dengan banyak cara, beberapa diantaranya telah kita bahas diatas.

Mana yang seharusnya kita gunakan?

Berdasarkan pembahasan kita diatas, yang paling umum digunakan adalah menggunakan event keyup (bagian III.1) untuk lebih meningkatkan fungsionalitas, kita dapat menambahkan event keydown (bagian III.2)

Demikian pembahasan mengenai cara format rupiah dengan javascript, semoga bermanfaat.