Number Formatting in Vanilla Javascript

03 Agustus 2020

Kebanyakan orang mengira formatting angka di javascript adalah hal yang sulit, padahal sebenarnya tidak jika kita mengetahui function bawaan dari Javascript yaitu Intl.NumberFormat. Dokumentasi nya bisa dilihat disini MDN Web Docs.

Kita Pahami Dulu function Nya

Seperti pada dokumentasi, function ini mempunyai beberapa method. Namun kita hanya akan fokus pada method format()

Pada constructor Intl.NumberFormat mempunyai 2 parameter optional yaitu locales dan options.

new Intl.NumberFormat(locales, options);

Keterangan:

  • locales
    string dengan BCP 47 language tag. Referensi nya bisa dilihat disini
  • options
    Object dengan beberapa property dan juga value nya, selengkapnya bisa dilihat disini

Formatting Angka Tanpa Koma

  • Contoh angka yang akan diformat: 375456000
  • Hasil yang diharapkan: 375.456.000

Code nya:

const number = 375456000;
const result = new Intl.NumberFormat("id-ID").format(number);
console.log(result); // 375.456.000

Bisa dilihat dan dipraktekkan, sangat simpel jika kita ingin format angka biasa.

Formatting currency (uang)

  • Contoh angka yang akan diformat: 375456000
  • Hasil yang diharapkan: Rp 375.456.000,00

Code nya:

const number = 375456000;
const result = Intl.NumberFormat("id-ID", {
	style: "currency",
	currency: "IDR",
}).format(number);

console.log(result); // Rp 375.000.000,00

Jika dirasa kurang sesuai, karena setelah Rp tidak ada titik ., maka bisa dibuat manual sepert ini

const number = 375456000;
const result =
	"Rp. " +
	Intl.NumberFormat("id-ID", { minimumFractionDigits: 2 }).format(number);

console.log(result); // Rp. 375.000.000,00

Sangat simpel kann, jika dirasa terlalu panjang bisa dibuatkan custom function seperti ini

function toNumber(num) {
	return new Intl.NumberFormat("id-ID").format(num);
}

toNumber(1234567800); // 1.234.567.800

Penutup

Sekian dulu dari saya, semoga bermanfaat. Jika ada pertanyaan boleh saja ditanyakan melalui sosmed saya. Link nya ada di footer