Days
Hours
Minutes
Seconds
Tentu, ini adalah artikel untuk tutorial JavaScript Anda, yang membahas cara membuat format Rupiah.
Dalam aplikasi web, seringkali kita perlu menampilkan angka dalam format mata uang, seperti Rupiah, untuk meningkatkan keterbacaan dan memberikan pengalaman pengguna yang lebih baik. Menampilkan harga seperti 1000000 akan jauh lebih sulit dibaca daripada Rp1.000.000.
Pada tutorial ini, kita akan belajar cara membuat fungsi JavaScript yang dapat mengubah angka menjadi format mata uang Rupiah secara otomatis.
Untuk mengubah format angka menjadi format Rupiah, kita perlu melakukan dua hal utama:
.) sebagai pemisah ribuan.Rp di depan angka.Kita akan membuat sebuah fungsi yang menerima angka sebagai parameter dan mengembalikan string dalam format Rupiah.
formatRupiah()
Berikut adalah kode JavaScript untuk membuat fungsi format Rupiah. Kode ini akan ditempatkan di file JavaScript Anda.
function formatRupiah(angka) {
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);
// Tambahkan titik jika yang diinput sudah ada ribuan
if (ribuan) {
var separator = sisa ? '.' : '';
rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
return rupiah ? 'Rp' + rupiah : '';
}
var number_string = angka.replace(/[^,\d]/g, '').toString(): Baris ini membersihkan input. Regex /[^,\d]/g akan menghapus semua karakter kecuali angka (\d) dan koma (,). Ini memastikan fungsi tetap berjalan meskipun input mengandung karakter lain.split = number_string.split(','): Memisahkan bagian angka utama dan desimal (jika ada) menggunakan koma.sisa = split[0].length % 3: Menghitung sisa panjang angka utama dibagi 3. Ini digunakan untuk menentukan di mana titik pemisah ribuan pertama harus ditempatkan.rupiah = split[0].substr(0, sisa): Mengambil bagian awal angka yang tidak terbagi habis oleh 3.ribuan = split[0].substr(sisa).match(/\d{3}/gi): Mengambil sisa angka dan memisahkannya menjadi kelompok 3 digit.if (ribuan) { ... }: Blok ini menambahkan titik pemisah ribuan.rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;: Memeriksa apakah ada bagian desimal. Jika ada, ia akan menambahkannya ke string rupiah.return rupiah ? 'Rp' + rupiah : '';: Mengembalikan string akhir dengan awalan Rp. Jika angka kosong, akan mengembalikan string kosong.
Sekarang, setelah fungsi formatRupiah() dibuat, kita bisa menggunakannya pada elemen HTML kita. Misalnya, Anda ingin mengubah nilai dari sebuah input atau teks yang ditampilkan.
Contoh pada Teks Statis:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Format Rupiah</title>
</head>
<body>
<h1>Harga Produk</h1>
<p>Harga: <span id="hargaProduk">150000</span></p>
<script>
function formatRupiah(angka) {
// ... (kode fungsi formatRupiah() yang sama dari atas) ...
}
const hargaElement = document.getElementById('hargaProduk');
hargaElement.innerHTML = formatRupiah(hargaElement.innerHTML);
</script>
</body>
</html>
Contoh pada Form Input Dinamis:
Kita bisa menggunakan event listener keyup atau input untuk memformat angka secara real-time saat pengguna mengetik.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Format Rupiah Dinamis</title>
</head>
<body>
<h1>Konversi ke Rupiah</h1>
<label for="inputHarga">Masukkan Angka:</label>
<input type="text" id="inputHarga" placeholder="e.g. 1500000">
<p>Harga dalam Rupiah: <span id="outputRupiah">Rp0</span></p>
<script>
// (Kode fungsi formatRupiah() diletakkan di sini)
const inputHarga = document.getElementById('inputHarga');
const outputRupiah = document.getElementById('outputRupiah');
inputHarga.addEventListener('keyup', function() {
outputRupiah.innerHTML = formatRupiah(this.value);
});
</script>
</body>
</html>
Membuat format Rupiah dengan JavaScript adalah cara yang efektif untuk meningkatkan tampilan data numerik dalam aplikasi web Anda. Fungsi formatRupiah() di atas adalah solusi yang fleksibel dan tangguh untuk menangani berbagai jenis input, baik itu angka bulat maupun desimal. Dengan menguasai teknik ini, Anda dapat membuat antarmuka pengguna yang lebih profesional dan mudah dipahami.
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
