Dalam memprogram sebuah aplikasi seringkali ada kebutuhan untuk menampilkan sebuah nilai dengan format yang berbeda dari format aslinya yang tersimpan di database, sebagai contoh adalah menampilkan mata uang dalam bentuk rupiah dari database yang mana data aslinya disimpan dalam bentuk angka.
Jika aplikasinya berbasis web maka pertama mungkin kita dihadapkan pada pilihan: dimana sebaiknya format angka diubah ke format rupiah, apakah di sisi server (PHP/ASP/dsb) atau di sisi client (JavaScript)? Kalau melihat esensi dari penampilan format rupiah yang lebih ke arah aspek tampilan dan penuh dengan pemrosesan teks, tentunya akan lebih baik jika konversi dilakukan di sisi client, dengan skenario ini maka server hanya perlu berhubungan dengan angka, lumayan untuk mengurangi resources karena proses tambahan ini cukup dihandle di sisi client oleh browser.
Kemudian masuk ke bagaimana caranya mengubah angka ke rupiah pada JavaScript? memang tidak ada fungsi built-in yang bisa melakukan hal tersebut secara langsung, namun algoritma konversinya sederhana saja yakni:
1. Setiap 3 angka dari belakang ditambahkan “.”
2. Tambahkan “Rp.” di depan dan pada beberapa keadaan bisa juga tambahkan “,00” di belakang
Algoritma di atas agar lebih mudah diimplementasikan kita pecah-pecah ke tahapan yang lebih detail lagi:
- Karena sepertinya rupiah tidak memiliki nilai desimal, angka pertama-tama diubah ke bentuk integer
1
|
var angkaInt = parseInt(angka, 10);
|
- Karena akan melakukan pemrosesan teks, maka terlebih dulu angka perlu diubah ke string
1
|
var angkaStr = angkaInt.toString();
|
- Agar lebih mudah menghitung dari belakang, nilai string perlu dibalik, ini bisa dilakukan dengan mengubah jadi array dan memanfaatkan fungsi reverse() array kemudian diubah lagi jadi string
1
|
var angkaStrRev = angkaStr.split('').reverse().join('');
|
- Lakukan loop dengan tiap 3 karakter (modulo 3) kita tambahkan titik, kecuali jika karakter terakhir (karena akan berada di depan karakter pertama jika dibalik)
1
2
3
4
5
6
7
|
var angkaStrRevTitik = '';
for(var i = 0; i < angkaStrRev.length; i++){
angkaStrRevTitik += angkaStrRev[i];
if((i+1) % 3 === 0 && i !== (angkaStrRev.length-1)){
angkaStrRevTitik += '.';
}
}
|
- Setelah beres kita balikkan lagi stringnya (mirip tahap 3)
1
|
var angkaRp = angkaStrRevTitik.split('').reverse().join('');
|
- Tambahkan “Rp.” di depan, dan jika berkenan tambah “,00” di belakang
1
|
var rp = 'Rp. ' + angkaRp + ',00';
|
Agar bisa digunakan ulang, kita dapat menyatukan statement-statement di atas ke dalam bentuk sebuah fungsi:
1
2
3
4
5
6
7
8
9
10
11
|
function toRp(angka){
var rev = parseInt(angka, 10).toString().split('').reverse().join('');
var rev2 = '';
for(var i = 0; i < rev.length; i++){
rev2 += rev[i];
if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
rev2 += '.';
}
}
return 'Rp. ' + rev2.split('').reverse().join('') + ',00';
}
|
Atau, dengan tidak mengubah algoritma, variabel2 dan sintaksnya dapat saja kita persingkat menjadi:
1
|
function toRp(a,b,c,d,e){e=function(f){return f.split('').reverse().join('')};b=e(parseInt(a,10).toString());for(c=0,d='';c<b.length;c++){d+=b[c];if((c+1)%3===0&&c!==(b.length-1)){d+='.';}}return'Rp.\t'+e(d)+',00'}
|
Dengan ini maka untuk mengubah angka ke format rupiah kita tinggal memanggil fungsi toRp()
1
2
3
4
5
|
var angka = 12345678;
var rp = toRp(angka);
console.log("angka: " + angka);
console.log("rupiah: " + rp);
|
Setelah hal di atas terselesaikan, maka masalah yang mungkin akan muncul selanjutnya adalah ketika mengirimkan kembali nilai ke server tentu kita harus mengirimnya dalam bentuk angka kembali, untuk itu tentu perlu ada fungsi untuk membalik format rupiah ke dalam angka, yang dalam logika sederhananya antara lain:
1. Hilangkan karakter selain angka
2. Pada beberapa keadaan karakter angka di belakang koma juga perlu dihilangkan
Algoritma pembalik ini lebih mudah diimplementasikan, karena tidak perlu membalik dan menghitung karakter, cukup menggunakan fungsi replace() dengan parameter berupa regular expression untuk menghapus karakter yang tidak diinginkan
1
|
function toAngka(rp){return parseInt(rp.replace(/,.*|\D/g,''),10)}
|
Sehingga dengan ini kita dapat menggunakan toAngka() untuk membalik formatnya
1
2
3
4
5
|
var rp = "Rp. 12.345.678,00";
var angka = toAngka(rp);
console.log("rupiah: " + rp);
console.log("angka: " + angka);
|
Demikian.
Segitu dulu untuk hari ini, kalau ada yang salah atau ada yang kurang-kurang silakan dikoreksi ;) wassalamualaikum.
==