Mungkin pada saat ini kamu sedang mencari cara untuk membuat function untuk formatting mata uang tanpa split dan juga join, apalagi menggunakan Regex yang kadang kala bisa buat kepala kamu pusing.
Nah, di sini kita akan membuat sebuah function untuk formatting mata uang hanya dengan beberapa baris saja atau bahkan hanya satu baris. Kita akan menggunakan ECMAScript Internationalization API. API tersebut menyediakan berbagai macam formatting seperti format angka dalam berbagai bahasa atau negara, perbandingan string, dan format tanggal atau waktu. Namun pada kali ini kita hanya akan menggunakan format number saja.
Intl.NumberFormat
Merupakan salah satu konstruktor properti dari ECMAScript Internationalization API, yang berfungsi untuk memformat angka yang language-sensitive.
Atau dapat diartikan pula bahwa Intl.NumberFormat dapat membuat sebuah objek yang dapat memformat angka ke dalam bahasa manusia, atau dalam kata lain, angka diformat agar dapat mudah dimengerti manusia.
Contohnya saat kita menampilkan mata uang, daripada kita menampilkan 20000, tentunya akan lebih baik dan mudah dimengerti jika penulisannya sesuai dengan mata uang negara yang dituju seperti Rp 20.000,00 atau $20.000,00
Untuk itu, berikut adalah fungsi untuk memformat angka ke mata uang yang kita inginkan, dalam contoh ini, penulis akan memformat angka menjadi mata uang rupiah.
Sebenarnya apa yang terjadi?
dalam object new Intl.NumberFormat[] terdapat dua parameter yaitu locales dan juga options.
Parameter Locales
Jika kita lihat dalam fungsi di atas, parameter locales diisi dengan "id-ID". Locales diisi dengan "kode bahasa-kode negara", yang berarti dalam fungsi tersebut id sebagai kode bahasa Indonesia dan ID adalah kode negara Indonesia. Kita juga bisa mengubah kode tersebut, contoh lainnya :
en-USen = English
US = United States
Parameter Options
Dalam fungsi di atas kita menggunakan option style, dan currency. Sebenarnya ada banyak sekali options yang disediakan, namun kita hanya akan membahas dua options itu saja.
style
Option ini digunakan untuk memformat angka yang dimasukkan. Style ini ada tiga macam:
decimal [untuk memfomat angka biasa, default]currency [format mata uang, yang kita gunakan sekarang]percent [format persen]
Currency
Option ini digunakan untuk menentukan mata uang apa yang akan dikembalikan, pada fungsi di atas, penulis menggunakan IDR untuk mengembalikan mata uang Indonesia, yaitu rupiah.
Contoh lainnya kita bisa menggunakan kode USD untuk mata uang dolar, atau EUR untuk mata uang Euro.
List lengkap kode mata uang bisa kalian lihat di List of Currency Codes by Country [ISO 4217] [iban.com]
Contoh lainnya
Penutup
Semoga tips di atas bisa mempermudah hidup kalian, para pembaca.
Terima kasih. 🌈
- By
- 18 September 2018
- JavaScript
Membuat Format Rupiah Dengan Javascript
Membuat Format Rupiah Dengan Javascript, Seperti yang kita sudah ketahui, javascript memiliki kegunaan yang besar dalam pengembangan sebuah website atau aplikasi. salah satunya adalah kita bisa membuat format rupiah javascript.
Jika mungkin teman-teman sedang mengerjakan sebuah aplikasi keuangan yang mengharuskan teman-teman untuk membuat format rupiah secara otomatis pada saat mengetik angka. maka angka akan secara otomatis menampilkan pemisah satuannya.
Misalnya pada saat angka yang di ketik berjumlah ribuan, maka akan muncul titip pada 3 angka terakhir, begitu juga dengan format angka jutaan, milyaran dan seterusnya.
Membuat Format Rupiah Dengan Javascript
Pada tutorial Membuat Format Rupiah Dengan Javascript ini. kita akan belajar tentang cara membuat format rupiah javascript.
Kita akan membuat sebuah form input, dimana form input tersebut akan kita buat sebuah fitur yang akan mengubah angka yang di input secara otomatis menjadi format angka.
Sekedar penginat kembali, silahkan teman-teman baca juga tutorial javascript dasar di www.malasngoding.com. pada tutorial javascript sebelumnya sudah di jelaskan tentang dasar-dasar dari javascript. jadi akan sangat memudahkan teman-teman dalam mengikuti dan mempelajari materi tutorial Membuat Format Rupiah Dengan Javascript ini.
- Tutorial dasar javascript lengkap bahasa indonesia
Langsung saja, kita buat dulu sebuah form sebagai contoh, project ini saya buat dalam folder dengan nama “rupiah_javascript”. atau teman-teman bisa langsung menerapkan pada project teman-teman.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | Membuat Format Rupiah Dengan Javascript- www.malasngoding.com body { font-family:sans-serif; } .kotak { width:350px; margin:auto; margin-top:15px; padding:10px; } p{ margin-bottom:20px; color: #0004ff; } input { text-align:right; width:100%; margin-bottom:20px; margin-top:10px; padding:7px10px; font-size:18px; } Membuat Format Rupiah Dengan Javascript www.malasngoding.com Ketik jumlah nominal pada form di bawah ini. Nominal Rupiah.:
var rupiah=document.getElementById['rupiah']; rupiah.addEventListener['keyup',function[e]{ // tambahkan 'Rp.' pada saat form di ketik // gunakan fungsi formatRupiah[] untuk mengubah angka yang di ketik menjadi format angka rupiah.value=formatRupiah[this.value,'Rp. ']; }]; /* Fungsi formatRupiah */ 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]; // tambahkan titik jika yang di input sudah menjadi angka ribuan if[ribuan]{ separator=sisa?'.':''; rupiah +=separator+ribuan.join['.']; } rupiah=split[1]!=undefined?rupiah+','+split[1]: rupiah; return prefix==undefined?rupiah :[rupiah?'Rp. '+rupiah :'']; }
|
akan saya jelaskan terlebih dulu, baru kemudian kita akan melihat hasilnya.
Pertama kita buat sebuah form penginputan untuk angka.
Ketik jumlah nominal pada form di bawah ini. Nominal Rupiah. :
|
membuat format rupiah dengan javascript
dan kemudian kita berikan sentuhan CSS nya, supaya lebih terlihat ganteng.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | body { font-family:sans-serif; } .kotak { width:350px; margin:auto; margin-top:15px; padding: 10px; } p{ margin-bottom:20px; color:#0004ff; } input { text-align:right; width:100%; margin-bottom:20px; margin-top:10px; padding:7px10px; font-size:18px; }
|
dan terakhir pada bagian javascript nya. kita deklarasikan id rupiah ke dalam variabel.
kemudian kita beri perintah untuk mengirim data yang di input ke function formatRupiah[].
rupiah.addEventListener['keyup',function[e]{ // tambahkan 'Rp.' pada saat form di ketik // gunakan fungsi formatRupiah[] untuk mengubah angka yang di ketik menjadi format angka rupiah.value=formatRupiah[this.value, 'Rp. ']; |
dan function formatRupiah berisi syntax untuk membuat format angka. dengan menggunakan titik.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* Fungsi formatRupiah */ 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]; // tambahkan titik jika yang di input sudah menjadi angka ribuan if[ribuan]{ separator=sisa? '.':''; rupiah+=separator+ribuan.join['.']; } rupiah=split[1]!=undefined?rupiah+ ','+split[1]:rupiah; return prefix==undefined?rupiah:[rupiah?'Rp. '+rupiah:'']; } |
hasil akhirnya kita return atau kembalikan penulisan yang dalam bentuk Rp.
Di sini kita juga menyeleksi penginputan selain angka akan di hapus jadi fungsi ini akan menghapus inputan selain angka.
Coba kita lihat hasilnya.
membuat format rupiah dengan javascript
Nah selesai, format rupiah javascript pun selesai.
See the Pen Format Rupiah Javascript by Malas Ngoding [@malasngoding] on CodePen.0
Mungkin sekian tutorial Membuat Format Rupiah Dengan Javascript. semoga dapat bermanfaat.
Baca juga : Tutorial Membuat Form Validasi Dengan Javascript
DEMO
DOWNLOAD SOURCE CODE
Incoming search terms:
- malasngoding javascript
- format tanda pemisah angka dengan php
- format rupiah javascript
- php function rupiah if
- hanya angka malas ngoding
- number format js
- cara rupiah jquery
- jquery format rupiah
- Input angka rupiah
- membuat format rupiah di javascript
Tags: form angka, form rupiah,
format angka javascript, format mata uang javascript, format rupiah javascript,
format-tanda-pemisah-angka-dengan-javascript, html input rupiah, input format rupiah php, jquery
format rupiah, kode html rupiah, membuat format angka di php, Membuat inputan hanya angka dengan javascript