Cara Mengubah Angka Menjadi Format Mata Uang (Dollar, Rupiah, dan lain-lain) dengan JavaScript

Daftar Isi

  • Pendahuluan
  • Persiapan
  • Membuat Fungsi JavaScript
    • Fungsi formatCurrency
      • Contoh Penggunaan formatCurrency:
    • Fungsi getDefaultLocale
    • Keuntungan Pendekatan Ini
  • Bonus: Mengubah Angka Menjadi Compact Number
    • Fungsi compactNumber
      • Contoh Penggunaan compactNumber:
  • Kapan Menggunakan?
  • Contoh HTML Utuh Untuk Tampil di Browser
  • Penutup

Pendahuluan

Dalam pengembangan web, terutama saat membangun aplikasi e-commerce atau sistem keuangan, menampilkan angka dalam format mata uang yang tepat jadi hal yang cukup penting. JavaScript, sebagai salah satu bahasa utama di sisi frontend, menyediakan cara praktis untuk mengubah angka biasa menjadi format mata uang seperti Dollar ($), Rupiah (Rp), Euro (€), dan lainnya. Berkat fitur bawaan seperti Intl.NumberFormat, proses ini bisa dilakukan dengan mudah dan fleksibel.

Di artikel ini, kamu akan belajar cara yang simpel dan efisien untuk mengonversi angka ke format mata uang menggunakan JavaScript dilengkapi dengan contoh kode yang bisa langsung dicoba.

Sebagai bonus, kita juga akan bahas bagaimana cara menampilkan angka besar ke dalam format compact seperti 1.5M, 2K, dan sebagainya yang sangat cocok untuk tampilan dashboard, analitik, atau media sosial.

Persiapan

  • Code Editor (VSCode direkomendasikan)
  • Node.js versi 22 ke atas

Membuat Fungsi JavaScript

JavaScript menyediakan cara praktis untuk mengubah angka menjadi format mata uang melalui Intl.NumberFormat. Artikel ini akan membahas dua fungsi reusable yang bisa kamu pakai untuk melakukan konversi ini secara skalabel dan mudah dipelihara.

Fungsi formatCurrency

Fungsi ini mengubah angka menjadi format mata uang sesuai dengan kode mata uang dan locale yang kamu tentukan.

/**
 * Convert number to currency format
 * @param {number} amount - Angka yang ingin diformat
 * @param {string} currencyCode - Kode mata uang (misalnya: "USD", "IDR", "EUR")
 * @param {string} [locale] - (Opsional) Locale seperti "en-US" atau "id-ID"
 * @returns {string} - Angka yang sudah diformat dalam bentuk mata uang
 */
function formatCurrency(amount, currencyCode, locale = getDefaultLocale(currencyCode)) {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currencyCode,
    maximumFractionDigits: 2
  }).format(amount);
}

Contoh Penggunaan formatCurrency:

formatCurrency(1000, 'USD'); // $1,000.00
formatCurrency(1500000, 'IDR'); // Rp1.500.000,00
formatCurrency(99.99, 'EUR'); // 99,99 €

Fungsi ini juga mendukung parameter locale jika kamu ingin override default-nya:

formatCurrency(1000, 'USD', 'en-GB'); // US$1,000.00

Fungsi getDefaultLocale

Agar formatCurrency tidak perlu selalu menerima locale, kita bisa menentukan default locale berdasarkan kode mata uang menggunakan fungsi ini:

/**
 * Mengembalikan default locale berdasarkan kode mata uang
 * @param {string} currencyCode
 * @returns {string} locale yang direkomendasikan
 */
function getDefaultLocale(currencyCode) {
  const currencyLocaleMap = {
    USD: 'en-US',
    IDR: 'id-ID',
    EUR: 'de-DE',
    JPY: 'ja-JP',
    GBP: 'en-GB',
    CNY: 'zh-CN',
    AUD: 'en-AU'
    // Tambahkan mata uang lain sesuai kebutuhan
  };

  return currencyLocaleMap[currencyCode] || 'en-US'; // fallback ke en-US
}

Kamu bisa menambahkan lebih banyak mata uang dan locale ke dalam objek currencyLocaleMap sesuai kebutuhan aplikasi.

Keuntungan Pendekatan Ini

  • Scalable: Bisa menambahkan mata uang dan locale baru dengan mudah
  • Reusable: Tinggal panggil fungsi kapan saja di mana saja
  • Maintainable: Terpisah jadi dua fungsi modular yang gampang diatur
  • Fleksibel: Bisa override locale secara manual jika dibutuhkan

Bonus: Mengubah Angka Menjadi Compact Number

Fitur compact number sangat berguna untuk menampilkan angka besar dengan cara yang singkat dan mudah dibaca, seperti:

  • 1,000 → 1K
  • 1,500,000 → 1.5M

Fungsi compactNumber:

/**
 * Mengubah angka besar menjadi format compact (K, M, B)
 * @param {number} number - Angka yang ingin diringkas
 * @param {string} [locale="en-US"] - Locale opsional
 * @returns {string} - Angka ringkas seperti 1.5K, 2M
 */
function compactNumber(number, locale = "en-US") {
  return new Intl.NumberFormat(locale, {
    notation: "compact",
    compactDisplay: "short",
    maximumFractionDigits: 1,
  }).format(number);
}

Contoh Penggunaan compactNumber:

compactNumber(1000); // 1K
compactNumber(1500000); // 1.5M
compactNumber(999000000); // 999M
compactNumber(1200000, "id-ID"); // 1,2 jt (untuk bahasa Indonesia)

Kapan Menggunakan?

  • formatCurrency(): Menampilkan angka sebagai mata uang lokal
  • compactNumber(): Menampilkan angka besar secara singkat & efisien

Contoh HTML Utuh Untuk Tambil di Browser

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Format Currency</title>
    <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script>
  </head>
  <body class="bg-gray-100 min-h-screen flex items-center justify-center">
    <div class="max-w-md w-full bg-white p-6 rounded-3xl shadow-md">
      <h1 class="text-2xl font-bold mb-4 text-center">Currency Formatting</h1>
      <div class="mb-3 p-3 rounded-full bg-gray-200 text-black font-semibold" id="usd"></div>
      <div class="mb-3 p-3 rounded-full bg-gray-200 text-black font-semibold" id="idr"></div>
      <div class="mb-3 p-3 rounded-full bg-gray-200 text-black font-semibold" id="eur"></div>
    </div>

    <script>
      function getDefaultLocale(currencyCode) {
        switch (currencyCode) {
          case "USD":
            return "en-US";
          case "IDR":
            return "id-ID";
          case "EUR":
            return "de-DE"; // German locale
          default:
            return "en-US";
        }
      }

      function formatCurrency(amount, currencyCode, locale = getDefaultLocale(currencyCode)) {
        return new Intl.NumberFormat(locale, {
          style: "currency",
          currency: currencyCode,
          maximumFractionDigits: 2,
        }).format(amount);
      }

      document.getElementById("usd").textContent = `USD: ${formatCurrency(1000, "USD")}`;
      document.getElementById("idr").textContent = `IDR: ${formatCurrency(1500000, "IDR")}`;
      document.getElementById("eur").textContent = `EUR: ${formatCurrency(99.99, "EUR")}`;
    </script>
  </body>
</html>

Hasilnya:

HTML Result

Penutup

Dengan hanya beberapa baris kode menggunakan Intl.NumberFormat, kamu bisa:

  • Menampilkan angka dalam format Rupiah, Dollar, Euro, Yen, dll
  • Meringkas angka besar jadi 1K, 1.5M, atau 2B
  • Menyesuaikan tampilan berdasarkan locale pengguna

Fungsi ini sangat cocok digunakan dalam:

  • Aplikasi e-commerce
  • Dashboard analitik
  • Laporan keuangan
  • Tampilan user-friendly di web & mobile