20 Juli 2021

Teknik Mudah Format Rupiah Dengan Vue/Javascript


Tim JasaWebMedan dalam 2 tahun belakangan ini menggunakan Vue sebagai javascript framework. Memformat number/angka ke format mata uang dalam hal ini rupiah merupakan hal yang rutin dilakukan saat mengerjakan proyek pesanan dari klien-klien. Dengan menggunakan Vue, rutinitas ini dapat lebih sederhana dikerjakan.

Teknis berikut ini melibatkan regex (regular expression), yang kita tidak akan bahas, ruwet pokoknya, hehehe. Kemudian sedikit pengetahuan javascript dan dibalut dalam framework Vue.

Kita mulai dengan mendefinisikan data secara sederhana yang akan diproses menggunakan properti watch

data(){
    return{
        //nilai ini menampung nilai dari sembarang input
        nilai:''
    }
},
watch:{
    nilai:function(){
        this.nilai = this.nilai.replace(/[^0-9]/g,'').replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1.')
    }
}

Secara sederhana bisa dijelaskan bahwa kode replace(/[^0-9]/g,'') berfungsi memastikan bahwa nilai input harus dalam bentuk angka, jika terdapat huruf atau karakter non-numeric akan diabaikan.

Sedangkan fungsi replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1.') akan memberikan format mata uang Rupiah pada nilai input.

Agar nilai format tadi tidak menimbulkan masalah di kemudian hari, pastikan mengembalikan format rupiah tadi menjadi format angka biasa sebelum dilakukan operasi penyimpanan ke database. Contohnya dengan fungsi replace sederhana sebagai berikut:

this.nilai = parseInt(this.nilai.replace('.',''))

Semoga bermanfaat. Jika ada pertanyaan silahkan gunakan kolom komentar di bawah ini.

JasaWebMedan sejak 2009 melayani pembuatan website, aplikasi mobile dan software berbasis web untuk Banda Aceh, kota Medan, Binjai, Siantar, Tebing Tinggi, Kisaran, Padang, Pekanbaru.

0 comments:

Posting Komentar