Konversi Angka ke Format Rupiah di JavaScript

27Feb12

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:

  1. Karena sepertinya rupiah tidak memiliki nilai desimal, angka pertama-tama diubah ke bentuk integer
    var angkaInt = parseInt(angka, 10);
  2. Karena akan melakukan pemrosesan teks, maka terlebih dulu angka perlu diubah ke string
    var angkaStr = angkaInt.toString();
  3. 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
    var angkaStrRev = angkaStr.split('').reverse().join('');
  4. Lakukan loop dengan tiap 3 karakter (modulo 3) kita tambahkan titik, kecuali jika karakter terakhir (karena akan berada di depan karakter pertama jika dibalik)
    var angkaStrRevTitik = '';
    for(var i = 0; i < angkaStrRev.length; i++){
        angkaStrRevTitik += angkaStrRev[i];
        if((i+1) % 3 === 0 && i !== (angkaStrRev.length-1)){
            angkaStrRevTitik += '.';
        }
    }
  5. Setelah beres kita balikkan lagi stringnya (mirip tahap 3)
    var angkaRp = angkaStrRevTitik.split('').reverse().join('');
  6. Tambahkan “Rp.” di depan, dan jika berkenan tambah “,00″ di belakang
    var rp = 'Rp. ' + angkaRp + ',00';

Agar bisa digunakan ulang, kita dapat menyatukan statement-statement di atas ke dalam bentuk sebuah fungsi:

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:

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() ;)

var angka = 12345678;
var rp = toRp(angka);

console.log("angka: " + angka); // "angka: 12345678"
console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"

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

function toAngka(rp){return parseInt(rp.replace(/,.*|\D/g,''),10)}

Sehingga dengan ini kita dapat menggunakan toAngka() untuk membalik formatnya ;)

var rp = "Rp. 12.345.678,00";
var angka = toAngka(rp);

console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"
console.log("angka: " + angka); // "angka: 12345678"

Demikian.

Segitu dulu untuk hari ini, kalau ada yang salah atau ada yang kurang-kurang silakan dikoreksi ;) wassalamualaikum.

==

Referensi fungsi2 JavaScript yang digunakan: parseIntsplitreversejoin, replace, Regular Expressions

About these ads


3 Responses to “Konversi Angka ke Format Rupiah di JavaScript”

  1. Makasih mas. Sangat membantu :)

  2. 2 El

    Untuk implementasinya gimana gan? Thanx

  3. 3 Me

    thank’s … sangat membantu :D


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 178 pengikut lainnya.

%d bloggers like this: