Cara Mengonversi String menjadi Angka di JavaScript: Number(), parseInt(), parseFloat(), dan Praktik Terbaik

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam pengembangan web. Di antara banyak fiturnya, mengubah string menjadi angka merupakan operasi dasar yang sering diperlukan dalam aplikasi dunia nyata.

Sebagai contoh, nilai yang dimasukkan pengguna dalam formulir atau data yang diambil dari API biasanya diperlakukan sebagai string. Nilai‑nilai ini tidak dapat langsung digunakan untuk perhitungan atau perbandingan kecuali mereka diubah menjadi tipe numerik.

Dalam artikel ini, kami akan menjelaskan metode konkret untuk mengubah string menjadi angka di JavaScript. Kami akan membahas cara kerja masing‑masing fungsi dan teknik, perbedaannya, serta poin‑poin penting yang perlu diingat. Gunakan panduan ini sebagai referensi praktis.

2. Gambaran Umum Tipe Data di JavaScript

JavaScript dikenal sebagai bahasa yang bertipe dinamis, yang berarti tipe variabel ditentukan secara otomatis selama eksekusi program. Meskipun hal ini memberikan fleksibilitas, ia juga dapat menyebabkan kesalahan atau perilaku tak terduga jika konversi tipe tidak ditangani dengan hati‑hati.

Tipe Data Utama

Tipe data JavaScript secara umum dapat dibagi menjadi dua kategori berikut.

1. Tipe Primitif

• Number: Mewakili bilangan bulat dan bilangan floating‑point.
• String: Mewakili data teks.
• Boolean: Hanya memiliki nilai true atau false.
• Undefined: Menunjukkan bahwa nilai belum diberikan.
• Null: Secara eksplisit mewakili tidak adanya nilai.
• Symbol: Digunakan sebagai pengidentifikasi unik.

1. Tipe Objek

• Mencakup array (Array), fungsi (Function), tanggal (Date), dan lain‑lain.

Pengetikan Dinamis dan Jebakan Konversi Tipe

Di JavaScript, tipe variabel dapat diubah secara implisit atau eksplisit. Perhatian khusus diperlukan saat berurusan dengan string dan angka.

Contoh:

console.log("10" + 5); // Output: "105" (string concatenation)
console.log("10" - 5); // Output: 5 (numeric calculation)

Seperti yang ditunjukkan di atas, operator yang sama dapat berperilaku berbeda tergantung pada konteksnya. Konversi tipe secara eksplisit penting untuk mencegah hasil yang tidak diinginkan.

3. Metode Mengubah String menjadi Angka

JavaScript menyediakan beberapa cara untuk mengubah string menjadi angka. Bagian ini menjelaskan empat metode yang paling umum digunakan secara detail.

Fungsi Number()

Fungsi Number() adalah cara paling dasar untuk mengubah string menjadi angka.

Contoh:

console.log(Number("42"));    // Output: 42
console.log(Number("3.14"));  // Output: 3.14
console.log(Number(""));      // Output: 0 (empty string becomes 0)
console.log(Number("abc"));   // Output: NaN (returns NaN if conversion fails)

Karakteristik:

• Mengubah baik bilangan bulat maupun floating‑point.
• String kosong diubah menjadi 0.
• Mengembalikan NaN (Not-a-Number) jika konversi gagal.

Catatan Penting:
NaN adalah nilai numerik khusus yang tidak dapat digunakan dalam perhitungan. Menggunakannya secara tidak sengaja dapat menyebabkan perilaku tak terduga.

Fungsi parseInt()

Fungsi parseInt() mengubah string menjadi bilangan bulat. Ia mem-parsing string dari awal dan berhenti pada karakter pertama yang bukan numerik.

Contoh:

console.log(parseInt("42"));         // Output: 42
console.log(parseInt("42.99"));      // Output: 42 (decimal part is ignored)
console.log(parseInt("10abc"));      // Output: 10
console.log(parseInt("abc10"));      // Output: NaN

Menentukan Radiks:

console.log(parseInt("10", 2)); // Output: 2 (binary)
console.log(parseInt("A", 16)); // Output: 10 (hexadecimal)

Karakteristik:

• Berguna ketika hanya bagian bilangan bulat yang dibutuhkan.
• Mendukung konversi dari sistem bilangan yang berbeda.

Perhatian:
Jika radiks tidak disebutkan, hasilnya dapat bergantung pada format string, yang berpotensi menimbulkan hasil tak terduga.

Fungsi parseFloat()

Fungsi parseFloat() mengubah string menjadi bilangan floating‑point.

Contoh:

console.log(parseFloat("3.14"));     // Output: 3.14
console.log(parseFloat("3.14abc"));  // Output: 3.14
console.log(parseFloat("abc3.14"));  // Output: NaN

Karakteristik:

• Ideal untuk menangani nilai desimal.
• Bekerja dengan benar untuk nilai integer juga.

Peringatan:

• Seperti parseInt(), ia mengabaikan karakter setelah bagian numerik.

Operator Unary Plus (+)

Operator unary plus (+) menyediakan cara singkat dan sederhana untuk melakukan konversi tipe.

Contoh:

console.log(+"42");      // Output: 42
console.log(+"3.14");    // Output: 3.14
console.log(+"abc");     // Output: NaN

Karakteristik:

• Menghasilkan kode yang ringkas.
• Berperilaku sama seperti Number().

Peringatan:
Meskipun ringkas, pendekatan ini dapat mengurangi keterbacaan. Untuk kode yang ramah pemula atau basis kode tim, Number() seringkali lebih jelas.

Ringkasan

Bagian berikut menjelaskan perbedaan antara metode-metode ini dan cara memilih yang tepat.

4. Perbedaan Antara Metode Konversi dan Cara Memilih

JavaScript menawarkan beberapa cara untuk mengonversi string menjadi angka, masing‑masing dengan perilaku yang berbeda. Memahami perbedaan ini penting untuk memilih metode yang tepat.

Number() vs parseInt()

Number() mengevaluasi seluruh string sebagai nilai numerik, sedangkan parseInt() hanya mengekstrak bagian integer.

Contoh:

console.log(Number("42.5"));     // Output: 42.5
console.log(parseInt("42.5"));  // Output: 42

Panduan Penggunaan:

• Gunakan Number() ketika nilai numerik yang tepat diperlukan.
• Gunakan parseInt() ketika desimal harus diabaikan.

parseInt() vs parseFloat()

parseInt() terbatas pada integer, sedangkan parseFloat() menangani nilai desimal.

Contoh:

console.log(parseInt("42.75"));     // Output: 42
console.log(parseFloat("42.75"));  // Output: 42.75

Panduan Penggunaan:

• Gunakan parseInt() untuk bilangan bulat seperti usia atau ID.
• Gunakan parseFloat() untuk harga atau pengukuran.

Number() vs Unary Plus (+)

Baik Number() maupun operator unary plus berperilaku serupa, tetapi keterbacaan berbeda.

Contoh:

console.log(Number("42"));  // Output: 42
console.log(+"42");         // Output: 42

Panduan Penggunaan:

• Number() secara jelas menyatakan maksud dan direkomendasikan untuk proyek tim.
• Operator unary plus berguna ketika kepraktisan diutamakan.

Menangani Kasus Khusus

String Kosong dan Nilai Tidak Valid

Contoh:

console.log(Number(""));           // Output: 0
console.log(parseInt(""));         // Output: NaN
console.log(+"");                  // Output: 0
console.log(Number("abc"));        // Output: NaN
console.log(parseFloat("abc123")); // Output: NaN

Poin Penting:

• Gunakan Number() atau unary + ketika string kosong harus menjadi 0.
• Hati-hati dengan parseInt() dan parseFloat(), karena dapat terjadi parsing parsial.

Ringkasan

5. Penanganan Kesalahan Selama Konversi

Penanganan kesalahan yang tepat sangat penting saat mengonversi string menjadi angka, terutama ketika berurusan dengan input pengguna atau data eksternal.

Menangani NaN (Not-a-Number)

Ketika konversi gagal, JavaScript mengembalikan NaN, yang secara teknis merupakan tipe angka tetapi tidak dapat digunakan dalam perhitungan.

Contoh:

console.log(Number("abc"));      // Output: NaN
console.log(parseInt("xyz"));    // Output: NaN
console.log(+"test");            // Output: NaN

Poin Penting:

• Setiap perhitungan yang melibatkan NaN menghasilkan NaN.
• NaN === NaN mengembalikan false.

Menggunakan isNaN()

Fungsi isNaN() memeriksa apakah suatu nilai adalah NaN.

Contoh:

console.log(isNaN("abc")); // true
console.log(isNaN(42));    // false
console.log(isNaN(NaN));   // true

Peringatan:
isNaN() melakukan konversi tipe implisit.

Menggunakan Number.isNaN()

Number.isNaN() melakukan pemeriksaan ketat tanpa konversi tipe.

Contoh:

console.log(Number.isNaN("abc"));      // false
console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(undefined));  // false

Rekomendasi:

• Gunakan Number.isNaN() untuk pemeriksaan kesalahan yang dapat diandalkan.

Contoh: Menangani Input Tidak Valid

function safeConvert(input) {
  let value = Number(input);
  return Number.isNaN(value) ? 0 : value;
}

6. Contoh Praktis

Bagian ini menyajikan contoh penggunaan dunia nyata, termasuk input pengguna, array, formulir, dan data JSON.

1. Mengonversi Input Pengguna

function processUserInput(input) {
  let value = Number(input);

  if (Number.isNaN(value)) {
    console.log("Error: Please enter a number.");
    return null;
  }

  console.log("Entered value: " + value);
  return value;
}

2. Mengonversi Nilai String dalam Array

let data = ["10", "20", "30", "40"];
let numbers = data.map(Number);
console.log(numbers);

3. Memproses Data Formulir

function calculateTotalPrice(priceInput, quantityInput) {
  let price = parseFloat(priceInput);
  let quantity = parseInt(quantityInput);

  if (Number.isNaN(price) || Number.isNaN(quantity)) {
    console.log("Error: Please enter valid numbers.");
    return null;
  }

  let total = price * quantity;
  console.log("Total price: " + total);
  return total;
}

4. Mengonversi Data JSON

let jsonData = '[{"id": "1", "price": "120.5"}, {"id": "2", "price": "200"}]';
let products = JSON.parse(jsonData);

let total = products.reduce((sum, product) => {
  let price = Number(product.price);
  return sum + (Number.isNaN(price) ? 0 : price);
}, 0);

console.log("Total price: " + total);

7. Kesimpulan

Dalam artikel ini, kami membahas konversi string ke angka dalam JavaScript mulai dari dasar hingga kasus penggunaan lanjutan.

Poin penting meliputi pemahaman tipe data, memilih metode konversi yang tepat, dan menerapkan penanganan kesalahan yang benar.

Konversi string ke angka adalah keterampilan dasar namun penting untuk pengembangan JavaScript di dunia nyata. Latih contoh-contoh yang disediakan di sini dan terapkan pada proyek Anda sendiri untuk meningkatkan keandalan dan akurasi.