Cara Membuat Angka menjadi Format Mata Uang atau Currency

Halo Sobat Dev Sasak, Pada artikel ini, kita akan belajar membuat format mata uang (currency format) dengan JavaScript. yaitu bagaimana cara kita mengubah angka biasa atau angka integer atau float menjadi format mata uang atau Currency, misalnya Rp, $ dll.

Disini kita akan menggunakan format konstruksi API dari ECMAScript Internationalization API. API ini menyediakan bermacam macam formating dalam dalam javascript seperti angka dan lainnya. Pada kali ini kita akan menggunakan Intl.NumberFormat untuk membantu kita menformat angka agar bisa menjadi format currency.

Pertama kita akan membuat fungsi, dimana fungsi ini akan bisa kita gunakan di seluruh file javascript. fungsi ini adalah fungsi helper sebutan bagi kita, atau biasanya saya akan sebut dengan general function.

Buat sebuah file bernama generla-function.js, file ini akan di import atau di load di paling awal seblum function yang lain di load. misal kita ada 2 file, general-function.js dan products.js. agar fungsi-fungsi yang ada di general function bisa kepanggil harus di load terlebih dahulu seperti ini.

<script src="./general-function.js"></script>
<script src="./products.js"></script>

Buat file general-function.js

Tambahkan code berikut ini kedalam general-function.js. kamu bisa mengganti id-ID, IDR dengan kode negara lain: ‘en-US’, ‘USD’ | ‘ja-JP’, ‘JPY’ | ‘de-DE’, ‘EUR’ | ‘ar-SA’, ‘SAR’

function currencyFormatted(amount, locale = 'id-ID', currency = 'IDR') {
    return new Intl.NumberFormat(locale, {
        style: 'currency',
        currency: currency,
        minimumFractionDigits: 2, // Menampilkan dua angka desimal dan bisa di sesuaikan sesuai kebutuhan
    }).format(amount);
  }

atau kalau anda penggunakan react bisa di buat seperti ini

/**
 * Format angka menjadi bentuk mata uang
 * @param {number} amount - Nilai yang ingin diformat
 * @param {string} locale - Format lokal (default: 'id-ID')
 * @param {string} currency - Kode mata uang (default: 'IDR')
 * @param {number} fractionDigits - Jumlah angka desimal (default: 2)
 * @returns {string} Format mata uang
 */
export function currencyFormatted(amount, locale = 'id-ID', currency = 'IDR', fractionDigits = 2) {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency,
    minimumFractionDigits: fractionDigits,
    maximumFractionDigits: fractionDigits,
  }).format(amount);
}

kemudian bagaimana cara implementasinya?
buat file products.js

kemudian tambahkan code berikut

const products = [
  { name: 'Kursi', price: 150000 },
  { name: 'Meja', price: 350000 },
  { name: 'Lemari', price: 750000 }
];

products.forEach(product => {
  console.log(`${product.name}: ${currencyFormatted(product.price)}`);
});

// outputnya
Kursi: Rp150.000,00
Meja: Rp350.000,00
Lemari: Rp750.000,00

Kemudian jika teman teman menggunakan React bisa di buat seperti ini

import React from 'react';
import { currencyFormatted } from '../utils/currencyFormatter';

const products = [
  { name: 'Kursi', price: 150000 },
  { name: 'Meja', price: 350000 },
  { name: 'Lemari', price: 750000 }
];

const ProductList = () => {
  return (
    <div className="p-4">
      <h2 className="text-lg font-bold mb-2">Daftar Produk</h2>
      <ul className="space-y-1">
        {products.map((product, index) => (
          <li key={index}>
            {product.name}: <strong>{currencyFormatted(product.price)}</strong>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Ok. mungkin cukup dulu sampai disini bagaimana cara kita membuat fungsi currency format mata uang dalam javascript, kita tidak perlu panjang lebar. semoga Sobat Dev Sasak bisa implementasi dan meringankan pekerjaan sobat.

Terimakasih