Membuat Format Rupiah Dengan Javascript

Membuat Format Rupiah Dengan Javascript adalah kebutuhan umum ketika kalian membangun aplikasi web seperti kasir, e-commerce, atau dashboard keuangan.

Halo teman-teman! Semoga harimu menyenangkan. Di artikel ini kita akan belajar cara cepat dan rapi menampilkan angka menjadi format mata uang Rupiah yang enak dilihat, dari yang paling simpel sampai yang fleksibel.

Membuat Format Rupiah Dengan Javascript

Pada artikel ini kodelyly.com akan membahas beberapa teknik populer: toLocaleString, Intl.NumberFormat, dan fungsi kustom (regex), lengkap beserta contoh singkat serta tips agar output konsisten di semua browser modern.

Cara 1: toLocaleString() (paling Cepat Dipakai)

toLocaleString sangat praktis untuk menampilkan angka sebagai Rupiah sesuai locale Indonesia.

const nilai = 1234567.89;
const rupiah = nilai.toLocaleString('id-ID', {
  style: 'currency',
  currency: 'IDR'
});
console.log(rupiah); // Output: "Rp 1.234.567,89"

Kelebihan: super singkat, langsung benar pemisah ribuan & desimal.
Catatan: output berisi spasi non‑breaking antara Rp dan angka—biarkan default agar konsisten.

Cara 2: Intl.NumberFormat (kontrol & Performa)

Untuk format berulang (misalnya di tabel besar), buat formatter sekali lalu pakai berulang supaya lebih efisien.

const rupiahFmt = new Intl.NumberFormat('id-ID', {
  style: 'currency',
  currency: 'IDR',
  minimumFractionDigits: 0 // bisa 0 jika kalian ingin bulat
});

console.log(rupiahFmt.format(15000));      // "Rp 15.000"
console.log(rupiahFmt.format(1234567.5));  // "Rp 1.234.567,5"

Tips SEO/UX: gunakan ini saat merender daftar panjang agar render lebih cepat dan konsisten.

Cara 3: Fungsi Kustom (regex) (jika Perlu Tanpa Simbol)

Kadang kalian butuh hanya angka berformat tanpa Rp. Berikut pendekatan aman.

function formatRupiahTanpaSimbol(angka) {
  const parts = Number(angka).toFixed(2).split('.');
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  return parts.join(',');
}

console.log(formatRupiahTanpaSimbol(1234567.89)); // "1.234.567,89"

Peringatan: fungsi kustom rawan salah jika input bukan angka valid—selalu validasi terlebih dahulu.

Tabel Perbandingan Metode

Contoh Input Otomatis (format Saat Diketik)

<input id="harga" placeholder="Ketik nominal">
<script>
  const el = document.getElementById('harga');
  const fmt = new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR' });
  el.addEventListener('input', () => {
    const angka = el.value.replace(/[^0-9]/g, '');
    if (!angka) { el.dataset.raw = ''; return; }
    const num = Number(angka);
    el.dataset.raw = num; // simpan nilai mentah untuk kirim ke server
    el.value = fmt.format(num);
  });
</script>

Best practice: kirim dataset.raw ke server (bukan teks Rp ...) agar perhitungan backend akurat.

Kesimpulan

Membuat Format Rupiah Dengan Javascript bisa dilakukan dengan cepat dan rapi menggunakan toLocaleString atau Intl.NumberFormat. Untuk kebutuhan khusus, fungsi kustom memberi fleksibilitas. Pilih metode sesuai konteks: cepat untuk beberapa nilai, formatter untuk data banyak, atau regex untuk aturan spesifik. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat mencoba!