Membuat Komponen Terbilang Pada VueJs

Komponen terbilang pada VueJS yang dibuat ini menggunakan option API Vuejs. Data yang akan diolah menjadi format terbilang diparse melalui props. Ada dua props yang digunakan yaitu number dan tipe. Number digunakan untuk memasukkan nilai angka yang mau diubah formatnya sedangkan type digunakan untuk menentukan jenis hasil yang diinginkan.

Ada tiga tipe yang dibuat pada komponen ini yaitu: rupiah, saham, dan persen. Tipe rupiah akan menambahkan prefix Rp sebelum angka dan menambahkan kata rupiah pada kalimat terbilang. Contoh Rp5,000,- (lima ribu rupiah). Tipe saham akan menambahkan taka lembar saham pada akhir kalimat terbilang. Contoh 120 (seratus dua puluh) lembar saham. Sedangkan tipe persen akan menambahkan simbol persen setelah angka dan kata persen setelah kalimat terbilang. Contoh 50% (lima puluh) persen.

Komponen Terbilang

Bagian HTML komponen terbilang bisa dilihat seperti di bawah ini. Format angga dibuat menggunakan fungsi NumberFormat() bawaan Javascript. Sedangkan fungsi terbilang() menggunakan fungsi buatan.

<template>
  <template v-if="type==='rupiah'">
    <span v-if="angka>0">Rp{{ new Intl.NumberFormat('id-ID').format(angka) }},- ({{ terbilang(angka) }} rupiah)</span>
  </template>
  <template v-if="type==='saham'">
    <span v-if="angka>0">{{ new Intl.NumberFormat('id-ID').format(angka) }} ({{ terbilang(angka) }}) lembar saham</span>
  </template>
  <template v-if="type==='persen'">
    <span v-if="angka>0">{{ new Intl.NumberFormat('id-ID').format(Math.round(angka)) }}% ({{ terbilang(Math.round(angka)) }} persen)</span>
  </template>
</template>

Bagian Javascripnya komponen terbilang adalah sebagai berikut. Nama komponennya adalah NumberFormat. Memiliki dua buah properti. Memiliki dua methods yaitu terbilang() dan parseIntOnly().

<script>

export default {
  name: "NumberFormat",
  props: ['number', 'type'],
  methods: {
    terbilang(bilangan) {
      if (bilangan === null || bilangan === '') return
      if (bilangan === Infinity) return "tidak terhingga"
      bilangan = String(bilangan);
      let kaLimat = '';
      let i = 1
      let j = 0
      let subkaLimat = "";
      let kata1 = "";
      let kata2 = "";
      let kata3 = "";
      const angka = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'];
      const kata = ['', 'Satu', 'Dua', 'Tiga', 'Empat', 'Lima', 'Enam', 'Tujuh', 'Delapan', 'Sembilan'];
      const tingkat = ['', 'Ribu', 'Juta', 'Miliar', 'Triliun'];
      const panjang_bilangan = bilangan.length;
      /* pengujian panjang bilangan */
      if (panjang_bilangan > 15) {
        kaLimat = "Diluar Batas";
        return kaLimat;
      }
      /* mengambil angka-angka yang ada dalam bilangan, dimasukkan ke dalam array */
      for (let i = 1; i <= panjang_bilangan; i++) {
        angka[i] = bilangan.substr(-(i), 1);
      }
      i = 1;
      j = 0;
      kaLimat = "";
      /* mulai proses iterasi terhadap array angka */
      while (i <= panjang_bilangan) {
        subkaLimat = "";
        kata1 = "";
        kata2 = "";
        kata3 = "";
        /* untuk Ratusan */
        if (angka[i + 2] != "0") {
          if (angka[i + 2] == "1") {
            kata1 = "Seratus";
          } else {
            kata1 = kata[angka[i + 2]] + " Ratus";
          }
        }
        /* untuk Puluhan atau Belasan */
        if (angka[i + 1] != "0") {
          if (angka[i + 1] == "1") {
            if (angka[i] == "0") {
              kata2 = "Sepuluh";
            } else if (angka[i] == "1") {
              kata2 = "Sebelas";
            } else {
              kata2 = kata[angka[i]] + " Belas";
            }
          } else {
            kata2 = kata[angka[i + 1]] + " Puluh";
          }
        }
        /* untuk Satuan */
        if (angka[i] != "0") {
          if (angka[i + 1] != "1") {
            kata3 = kata[angka[i]];
          }
        }
        /* pengujian angka apakah tidak nol semua, lalu ditambahkan tingkat */
        if ((angka[i] != "0") || (angka[i + 1] != "0") || (angka[i + 2] != "0")) {
          subkaLimat = kata1 + " " + kata2 + " " + kata3 + " " + tingkat[j] + " ";
        }
        /* gabungkan variabe sub kaLimat (untuk Satu blok 3 angka) ke variabel kaLimat */
        kaLimat = subkaLimat + kaLimat;
        i = i + 3;
        j = j + 1;
      }
      /* mengganti Satu Ribu jadi Seribu jika diperlukan */
      if ((angka[5] == "0") && (angka[6] == "0")) {
        kaLimat = kaLimat.replace("Satu Ribu", "Seribu");
      }
      return kaLimat.trim().toLowerCase()
    },
    parseIntOnly(str) {
      if ((typeof str === 'string' || str instanceof String)) {
        const numericStr = str.replace(/\D/g, "");
        return parseInt(numericStr, 10);
      }
      return str
    }
  },
  computed: {
    angka() {
      return this.parseIntOnly(this.number)
    }
  }
}
</script>

Penggunaan Komponen Terbilang

Sebelum komponen bisa digunakan, kita perlu import komponen tersebut ke dalam komponen lain VueJS. Caranya seperti berikut:

import NumberFormat from "./helpers/NumberFormat.vue";

Setelah itu tambahkan ke komponen seperti berikut:

  components: {NumberFormat}

Terakhir tinggal gunakan komponen tersebut di bagian template. Contoh penggunaannya sebagai berikut:

<number-format :number="5000" type="rupiah"/>
// output: Rp5,000,- (lima ribu rupiah)

<number-format :number="120" type="saham"/>
// output: 120 (seratus dua puluh) lembar saham

<number-format :number="50" type="persen"/>
//output: 50% (lima puluh) persen