Skip to content

Mimic Fungsi Number_Format PHP dalam JavaScript

18 April 2007

Sesuai judul artikel kali ini, saya ingin share mengenai fungsi yang dibuat menggunakan javascript untuk memimic atau meniru fungsi Format_Number PHP.

Pada awalnya 2 hari kemarin ketika saya merivisi program web kerjaan harian, saya ingin agar
sebuah string angka yang muncul dilayar bisa dilihat dengan digit grouping ribuan sehingga user dari program saya bisa lebih mudah dalam membacanya.
Saya coba search di Core JavaScript Reference (CHM File) atau via google mencari fungsi bawaan JavaScript untuk memformat number ternyata tidak saya temukan…
So, akhirnya dibuat saja fungsi sederhana untuk menyiasati hal tsb, yang penting si angka sudah muncul digit groupingnya. Namun begitu, saya ingin jika seandainya fungsi tersebut bisa juga untuk memformat desimal, ya at least bisa mirip-mirip dengan fungsi number_format php yang sering saya gunakan. Sehingga bisa lebih fleksibel jika akan dipergunakan untuk program lainnya. Following the explanation :

Sebagai informasi, fungsi number_format PHP terdiri dari 4 parameter masukan yang juga akan kita samakan untuk fungsi javascript-nya yaitu :

* number = angka yang akan diformat
* num_decimal_places = Jumlah decimal yang ingin ditampilkan
* dec_separator = separator/tanda pemisah untuk desimal
* thousand_separator = separator/tanda pemisah untuk ribuan

Dari ke-empat fungsi tersebut, yang harus diisi hanyalah parameter number, selebihnya bersifat optional. Sayangnya JavaScript tidak mendukung fitur parameter optional, sehingga ketika fungsi dengan parameternya yang kita buat harus dipanggil, maka semua parameternya harus ikut diisi. Capee deeeh :)

Logic dari fungsi mimic ini adalah memisahkan antara angka dari desimalnya. Lalu angka reverse atau dibalik susunannya agar kita bisa memasukkan tanda thousand separator per 3 digit angka. Misal 170000 => 000071 => 000.071
Setelah itu kita reverse lagi sehingga hasilnya menjadi 170.000. Jika ada desimalnya, maka kita munculkan juga desimalnya sesuai dengan jumlah desimal yang diinginkan.

Berikut code untuk fungsi tersebut.

function number_format(number,num_decimal_places,dec_separator,thousand_separator)
{
var decimal = '00000';
var negatif = (number.substring(0,1) == '-' ? '-' : '');
number = Math.abs(parseFloat(number)).toString().split('.');
if (number.length == 2)
number[1] = (number[1] + decimal).substring(0,num_decimal_places);
else
number[1] = decimal.substring(0,num_decimal_places);
number[0] = stringreverse(number[0]);
var strdigit = '';
for (i=0;i<number[0].length;i++)
{
if (i % 3 == 0 && i !=0) strdigit += thousand_separator;
strdigit += number[0].charAt(i);
}
return negatif + stringreverse(strdigit) + (num_decimal_places > 0 ? dec_separator + number[1] : '');
}


function stringreverse(str)
{
var strlen = str.length;
var strrev = '';
for (i=strlen-1;i>=0;i--)
{
strrev += str.charAt(i);
}
return strrev;
}

Contoh penggunaan fungsi diatas sebenarnya saya buat inteaktif lewat textbox dan pilihan decimal serta thousand separatornya, tapi sayang pada saat disave wordpress tidak meyimpan control field tersebut :(.

alert(“Format 175500.235 ==>” + number_format(’175500.23′, 2,’.’,’,’) );

Sebagai catatan, fungsi ini tidak akan melakukan proses pembulatan bilangan. Contoh jika Angkanya = 1500.387 dan pilihan num decimalnya 2, maka angka tidak akan dibulatkan menjadi 1500.39 , melainkan hanya akan mengambil 2 digit desimal saja apa adanya .Oke semoga bermanfaat :)

About these ads
2 Comments leave one →
  1. hinrustjum permalink
    18 June 2010 10:28 pm

    Спелеоклиматические камеры. И соломенныекрыши, сады, ивы. Домашний персонал. Кто хочет сам решает посещать на такой web-сайт или не заходить.

  2. NuHive permalink
    5 October 2011 11:57 am

    function number_format(numberNOTstring,num_decimal_places,dec_separator,thousand_separator)
    {
    var decimal = ’00000′;
    —-> var number = numberNOTstring.toString();
    var negatif = (number.substring(0,1) == ‘-’ ? ‘-’ : ”);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: