Cara Membuat Fungsi Sederhana Format Rupiah (IDR) di JavaScript

Pernahkah kamu merasa bingung saat membangun aplikasi toko online atau sistem kasir sederhana, lalu melihat tampilan harganya berantakan? Bayangkan, angka 1000000 tentu jauh lebih sulit dibaca dibandingkan Rp 1.000.000. Sebagai developer, kenyamanan mata pengguna (UX) adalah prioritas utama.

Dalam artikel ini, kita akan membedah tuntas cara mengubah angka mentah menjadi format mata uang Rupiah (IDR) menggunakan JavaScript. Tidak hanya satu cara, saya akan memberikan beberapa metode mulai dari yang paling modern menggunakan API bawaan browser hingga cara manual bagi kamu yang ingin belajar logikanya.

Mengapa Format Mata Ung IDR Penting untuk Konversi Penjualan?

Sebelum kita masuk ke baris kode, mari bicara jujur. Angka yang tidak diformat dengan baik memberikan kesan tidak profesional. Jika kamu sedang membangun landing page atau dashboard keuangan, penggunaan simbol mata uang yang tepat dan pemisah ribuan (thousand separators) dapat meningkatkan kepercayaan pengguna.

Secara psikologis, format Rp yang familiar bagi masyarakat Indonesia membuat proses pengambilan keputusan belanja menjadi lebih natural. Jadi, pastikan kamu tidak melewatkan detail kecil ini dalam proyekmu!

Metode 1: Cara Paling Modern Menggunakan Intl.NumberFormat

Jika kamu ingin cara yang paling bersih, singkat, dan didukung oleh hampir semua browser modern (Chrome, Firefox, Safari, Edge), maka Intl.NumberFormat adalah jawabannya. Ini adalah API standar internasionalisasi yang dimiliki JavaScript.

Kelebihan Intl.NumberFormat:

• Sangat ringan karena merupakan fungsi bawaan (native).
• Mendukung berbagai bahasa dan mata uang dunia, bukan hanya IDR.
• Otomatis menangani penempatan simbol mata uang dan pemisah titik/koma.

const formatRupiah = (number) => {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0
    }).format(number);
};

// Contoh Penggunaan:
console.log(formatRupiah(1500000)); // Output: Rp 1.500.000
console.log(formatRupiah(25500));   // Output: Rp 25.500

Dalam kode di atas, kita menggunakan konfigurasi 'id-ID' untuk menentukan bahasa Indonesia, dan currency: 'IDR' untuk simbol Rupiah. Parameter minimumFractionDigits: 0 digunakan agar tidak ada angka nol di belakang koma (seperti Rp 1.000,00) jika memang tidak diperlukan.

Metode 2: Menggunakan String Manipulation (Tanpa Library)

Mungkin kamu sedang mengerjakan proyek legacy atau sekadar ingin melatih logika algoritma? Kamu bisa menggunakan kombinasi fungsi split, reverse, dan join. Metode ini lebih panjang, tetapi sangat bagus untuk memahami bagaimana sebuah string dimanipulasi.

function convertToRupiah(angka) {
    var rupiah = '';
    var angkarev = angka.toString().split('').reverse().join('');
    for (var i = 0; i < angkarev.length; i++) {
        if (i % 3 == 0) {
            rupiah += angkarev.substr(i, 3) + '.';
        }
    }
    return 'Rp ' + rupiah.split('', rupiah.length - 1).reverse().join('');
}

// Penggunaan
console.log(convertToRupiah(1250000)); // Output: Rp 1.250.000

Cara kerjanya: Kita membalikkan angka tersebut terlebih dahulu, menambahkan titik setiap tiga digit, lalu membalikkannya kembali ke posisi semula. Cukup cerdik, bukan?

Metode 3: Solusi untuk Input Real-Time (Event Listener)

Seringkali, kamu ingin agar pengguna saat mengetik di form input, angkanya otomatis berubah menjadi format Rupiah. Kamu bisa menggunakan event keyup di JavaScript untuk mencapai efek ini.

/* HTML: <input type="text" id="inputHarga" /> */

const inputHarga = document.getElementById('inputHarga');

inputHarga.addEventListener('keyup', function(e) {
    // Tambahkan event listener saat mengetik
    inputHarga.value = formatRupiah(this.value, 'Rp. ');
});

function formatRupiah(angka, prefix) {
    var number_string = angka.replace(/[^,\d]/g, '').toString(),
        split = number_string.split(','),
        sisa = split[0].length % 3,
        rupiah = split[0].substr(0, sisa),
        ribuan = split[0].substr(sisa).match(/\d{3}/gi);

    if (ribuan) {
        separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }

    rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
    return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
}

Teknik ini sering ditemukan di aplikasi perbankan atau e-commerce saat kamu mengisi nominal transfer atau top-up saldo.

Bagaimana Jika Menggunakan Framework Seperti Vue atau React?

Bagi kamu yang menggunakan framework modern, disarankan untuk membungkus fungsi ini ke dalam sebuah Helper atau Utility Function agar bisa dipanggil di mana saja (reusable).

Contoh di React:

export const toIDR = (amount) => {
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
    maximumFractionDigits: 0,
  }).format(amount);
};

// Di komponen kamu:
<p>Harga Total: {toIDR(product.price)}</p>

Contoh di Vue 3 (Global Properties):

// main.js
app.config.globalProperties.$filters = {
  currencyIDR(value) {
    return new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR',
    }).format(value)
  }
}

Tips Optimasi: Menangani Nilai Null atau Undefined

Dalam dunia nyata, data dari database tidak selalu sempurna. Terkadang data harga bisa bernilai null, undefined, atau bahkan berupa string alih-alih number. Jika kamu langsung memasukkannya ke fungsi format, aplikasi bisa error atau "crash".

Gunakan pendekatan "Defensive Programming":

function safeRupiah(value) {
    if (!value || isNaN(value)) return 'Rp 0';
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR'
    }).format(value);
}

Dengan cara ini, jika harganya kosong, aplikasimu tetap tampil cantik dengan tulisan Rp 0 dan bukannya pesan error yang menakutkan bagi pengguna.

Kesimpulan

Mengubah angka menjadi format Rupiah adalah langkah kecil yang memberikan dampak besar pada profesionalisme website kamu. Kamu bisa memilih menggunakan Intl.NumberFormat untuk kemudahan dan kecepatan, atau menggunakan Regex/Manual Manipulation jika membutuhkan kustomisasi yang sangat spesifik.

Sekarang, kamu sudah punya kode yang siap untuk proyek berikutnya. Jangan lupa untuk selalu melakukan validasi data sebelum melakukan formatting, ya! Selamat mencoba dan semoga proyek coding-mu lancar.

Punya pertanyaan atau metode lain yang lebih efisien? Yuk, diskusikan di kolom komentar.