Type Conversion — Number / String / parseInt dan Konversi Implisit

Quantity yang diketik ke input field, atau amount yang terkubur di data dari sumber eksternal. Bahkan saat keduanya terlihat sama di layar — sama-sama 1200 — apakah JavaScript menyimpannya sebagai string atau number mengubah apa yang dilakukan sebuah perhitungan padanya.

Artikel ini membahas 2 hal: explicit type conversion (mengubah type sebuah value sendiri dengan memanggil sesuatu seperti Number), dan implicit type conversion (operator otomatis menyamakan type sebelum menghitung).

Mengecek Type Saat Ini — typeof

Menyamakan type dimulai dari mengetahui type apa yang sudah dimiliki sesuatu. Bug seperti total yang selisih, atau perbandingan yang tidak keluar seperti yang kamu harapkan, biasanya balik lagi ke value yang kamu kira number ternyata string.

Pertama, mari bahas cara mengecek type sebuah value di tempat.

Taruh typeof (operator yang mengembalikan nama type sebuah value sebagai string) di depan sebuah value, dan kamu dapat type-nya. typeof 1200 adalah "number", dan typeof "1200" adalah "string".

Yang kembali bukan type-nya sendiri — itu string yang menamai type-nya — jadi saat kamu memakainya dalam pengecekan, bandingkan dengan string berkutip, seperti typeof price === "number".

const orderId = "A-1042";   // order number

console.log(typeof orderId);   // string
console.log(typeof 500);       // number
console.log(typeof true);      // boolean

// Berlaku juga untuk hasil expression, tidak cuma variable
console.log(typeof (500 + 100));            // number
console.log(typeof (500 > 100));            // boolean
console.log(typeof `Order ${orderId}`);      // string

Cek type dari 3 value yang datang dari layar edit produk. inputPrice / stockCount / isPublished sudah dideklarasikan.

① Tampilkan type dari inputPrice.

② Tampilkan type dari stockCount.

③ Tampilkan type dari isPublished.

④ Cek dan tampilkan apakah inputPrice BUKAN type number.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Konversi Implisit — Hanya + yang Jadi String Concatenation

Hitung dengan value dari type berbeda, dan JavaScript tidak berhenti dengan error. Operatornya menyamakan type-nya dulu, lalu terus jalan.

Perilaku yang sama yang kamu lihat == lakukan sebelum membandingkan juga muncul di operator aritmatika. Karena tidak pernah berhenti, kamu tidak akan sadar ketidakcocokannya sampai melihat hasilnya.

Yang menjebak adalah + membuat keputusan berbeda dari operator lain. + memilih string concatenation kalau salah satu sisi adalah string. Sisi number-nya dikonversi jadi string, jadi "3" + 1 jadi "31".

- * / %, sebaliknya, tidak punya makna untuk menggabungkan string bersama, jadi mereka mengonversi sisi string-nya jadi number dan menghitung.

Kalau field total menampilkan dua amount bersebelahan, itu tanda mereka dijumlahkan sebelum dikonversi.

const inputQuantity = "3";   // value dari quantity input field (string)

// Tampilan saja tidak bisa membedakan number 31 dari string "31" — pakai typeof di bawah
console.log(inputQuantity + 1);   // 31   digabung jadi string "31"
console.log(inputQuantity - 1);   // 2    dikonversi ke number sebelum dikurangi
console.log(inputQuantity * 2);   // 6    perkalian juga mengonversi
console.log(inputQuantity / 3);   // 1    pembagian juga mengonversi

// typeof mengonfirmasi hanya hasil + yang punya type berbeda
console.log(typeof (inputQuantity + 1));   // string
console.log(typeof (inputQuantity - 1));   // number

Perlakukan Value dari Luar sebagai String

Number dari input field, atau yang terkubur di data dari sumber eksternal, biasanya datang sebagai string. Kalau penjumlahan yang kamu maksud 1200 + 300 muncul sebagai "1200300" bersebelahan, itu tanda salah satu sisinya tetap string. Konversikan ke number sebelum menjumlahkannya.

Explicit Conversion — Number / String / Boolean

Membiarkan konversi diserahkan ke operator berarti arah konversinya tetap per operator, jadi maksudmu sendiri tidak muncul di kode. Samakan type sendiri sebelum sebuah perhitungan, dan hasilnya jadi lebih mudah diikuti.

JavaScript menyediakan function konversi untuk tiap type.

Number(value) mengonversi jadi number, String(value) jadi string, dan Boolean(value) jadi boolean — masing-masing mengembalikan value baru. Variable aslinya tetap tidak berubah.

Boolean mengikuti aturan falsy persis: "" dan 0 jadi false, dan string yang tidak kosong jadi true. Perhatikan Number("") mengembalikan 0, bukan NaN, jadi mengonversi field yang kosong langsung ke number memperlakukannya sebagai amount 0.

const inputQuantity = "3";   // value dari quantity input field
const shippingFee = 500;     // ongkos kirim (number)

console.log(Number(inputQuantity));         // 3     string ke number
console.log(Number(inputQuantity) + 1);     // 4     penjumlahan berjalan sebagai number sekarang
console.log(String(shippingFee));           // 500   number ke string
console.log(typeof String(shippingFee));    // string

console.log(Boolean("Tokyo"));   // true    string tidak kosong
console.log(Boolean(""));        // false   string kosong itu falsy
console.log(Number(""));         // 0       string kosong jadi 0

// Variable aslinya tetap string bahkan setelah dikonversi
console.log(typeof inputQuantity);   // string

Hitung subtotal cart dari quantity yang datang dari input field dan harga satuan. inputQuantity / unitPrice / inputCoupon sudah dideklarasikan.

① Tampilkan hasil mengonversi inputQuantity ke number.

② Hitung dan tampilkan subtotal dari number di ① dan unitPrice.

③ Tampilkan type dari subtotal ②, yang dikonversi ke string.

④ Tampilkan hasil mengonversi field coupon kosong, inputCoupon, ke boolean.

Konversi Gagal — NaN dan Number.isNaN

Berikan Number sebuah string yang tidak bisa diubah jadi number, dan JavaScript tidak melempar error. Dia mengembalikan NaN (value yang berarti hasilnya tidak bisa jadi number) dan cuma lanjut ke perhitungan berikutnya.

Itu sebabnya field amount dengan karakter full-width atau koma yang tercampur bisa membuat total tetap NaN sampai ke layar. Setelah mengonversi, kamu perlu mengecek sendiri apakah itu benar-benar berhasil.

Menulis total === NaN tidak berfungsi sebagai pengecekan di sini. NaN bahkan tidak sama dengan dirinya sendiri, jadi hasilnya selalu false.

typeof NaN juga mengembalikan "number", jadi type-nya juga tidak membedakannya. Pakai Number.isNaN (function yang mengembalikan apakah value yang diberikan padanya adalah NaN) untuk pengecekannya sebagai gantinya.

const inputAmount = "1,200";   // amount yang diketik dengan koma

console.log(Number(inputAmount));         // NaN   koma tidak bisa dikonversi
console.log(Number(inputAmount) + 500);   // NaN   perhitungan setelahnya tetap NaN

// Baik perbandingan maupun type tidak bisa membedakannya
console.log(Number(inputAmount) === NaN);   // false
console.log(typeof NaN);                    // number

// Pakai function khusus untuk mengecek
console.log(Number.isNaN(Number(inputAmount)));   // true

Cek apakah value yang diketik ke amount field bisa diperlakukan sebagai number, dan tampilkan message hanya kalau tidak bisa. inputAmount / validAmount sudah dideklarasikan.

① Tampilkan hasil mengonversi inputAmount ke number.

② Cek dan tampilkan apakah hasil ① adalah konversi yang gagal.

③ Jalankan pengecekan yang sama pada validAmount dan tampilkan hasilnya.

④ Hanya kalau konversi inputAmount gagal, tampilkan "Please enter the amount as a number."

Membaca String yang Diawali Number — parseInt dan parseFloat

Kadang kamu diberi string seperti "240px" atau "12.5%" — digit diikuti satuan. Number membaca seluruh string-nya sebagai number, jadi sisa text satuannya membuat hasilnya jadi NaN.

Saat kamu cuma mau digit di depannya, pakai function yang berbeda.

parseInt (function yang mengambil sebanyak mungkin dari awal yang bisa dibaca sebagai integer) mengambil 240 dari "240px". 10 yang kamu berikan sebagai argument kedua berarti "baca memakai digit basis-10 biasa, 0 sampai 9." Kamu bisa mengabaikannya, tapi menuliskannya membuat maksudmu jelas bagi siapa pun yang membacanya.

Saat kamu mau membaca sampai titik desimal juga, pakai parseFloat (function yang mengambil sebanyak mungkin dari awal yang bisa dibaca sebagai desimal). Keduanya mengembalikan NaN kalau tidak ada yang bisa dibaca sebagai number tepat di awal.

const cardWidth = "240px";   // width dibaca dari style value

console.log(Number(cardWidth));         // NaN    tidak bisa mengonversi semuanya
console.log(parseInt(cardWidth, 10));   // 240    hanya yang bisa dibaca dari awal

console.log(parseFloat("12.5%"));       // 12.5   baca sampai titik desimal
console.log(parseInt("12.5%", 10));     // 12     baca sebagai integer membuang desimalnya

// Tidak ada yang dibaca kalau tidak diawali digit
console.log(parseInt("about 240px", 10));   // NaN

Membaca Hanya Awalnya Bisa Menyembunyikan Pemotongan Diam-Diam

parseInt berhenti begitu tidak bisa membaca lebih jauh. "1,200" yang dipisah koma jadi 1, dan "12.5" jadi 12. Tidak ada yang error, jadi pakai Number untuk value seperti amount di mana kamu perlu membaca semuanya, dan simpan parseInt untuk string dengan satuan yang menempel.

Ambil hanya bagian numerik dari style value dan display string. cardWidth / discountText sudah dideklarasikan.

① Tampilkan hasil mengonversi cardWidth ke number sebagai string utuh.

② Ambil bagian numerik dari cardWidth sebagai integer dan tampilkan.

③ Ambil bagian numerik dari discountText sebagai desimal dan tampilkan.

④ Tampilkan value ② dikalikan dua.