Cara Mengonversi Angka menjadi String di JavaScript: Panduan Lengkap dengan Contoh

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

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

1. Pendahuluan

JavaScript adalah bahasa pemrograman yang sangat penting dalam pengembangan web. Khususnya, konversi tipe data memainkan peran kunci dalam banyak skenario, seperti memvalidasi input formulir dan memformat respons API.
Dalam artikel ini, kami memberikan penjelasan terperinci tentang cara mengonversi angka menjadi string di JavaScript, mencakup semua hal mulai dari penggunaan dasar hingga teknik lanjutan.

Dengan membaca artikel ini, bahkan pemula sekalipun akan dapat memahami cara mengonversi angka menjadi string dan menerapkan teknik ini secara efektif dalam pengembangan dunia nyata.

2. Metode Dasar untuk Mengonversi Angka menjadi String di JavaScript

JavaScript menyediakan berbagai cara untuk mengonversi angka menjadi string. Pada bagian ini, kami menjelaskan tiga metode yang paling umum digunakan.

2.1 Menggunakan Fungsi String()

Cara paling sederhana untuk mengonversi angka menjadi string adalah dengan menggunakan fungsi bawaan String().

Contoh Penggunaan

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Penjelasan

• Dengan hanya menulis String(number), nilai numerik akan diubah menjadi string.
• Angka asli tidak diubah; sebagai gantinya, nilai string baru dikembalikan.

Keuntungan dan Pertimbangan

• Kodenya sederhana dan sangat mudah dibaca.
• Tipe data dijamin secara eksplisit, mengurangi kemungkinan terjadinya kesalahan.
• Namun, fungsi ini tidak mendukung pemangkasan spasi atau penerapan format khusus.

2.2 Menggunakan Metode toString()

Metode toString() adalah metode bawaan dari objek angka di JavaScript dan memungkinkan konversi yang lebih fleksibel.

Contoh Penggunaan

let num = 456;
let str = num.toString();
console.log(str); // "456"

Penjelasan

• Karena merupakan metode dari objek angka, ia dapat dipanggil langsung pada nilai numerik.
• Metode ini juga mendukung konversi ke sistem bilangan lain, seperti biner atau heksadesimal.

Contoh dengan Spesifikasi Radiks

let num = 255;
let binaryStr = num.toString(2); // binary
console.log(binaryStr); // "11111111"

Keuntungan dan Pertimbangan

• Dengan menentukan radiks, Anda dapat mengonversi angka menjadi string sambil mengubah sistem bilangan.
• Kesalahan akan terjadi jika nilai tersebut undefined atau null, sehingga pemeriksaan tipe diperlukan sebelumnya.

2.3 Menggunakan Template Literals

Pada JavaScript modern, template literals (tanda backtick) menyediakan cara yang sederhana dan intuitif untuk mengonversi angka menjadi string.

Contoh Penggunaan

let num = 789;
let str = `${num}`;
console.log(str); // "789"

Penjelasan

• Template literals memungkinkan konversi string secara intuitif.
• Mereka dapat dengan mudah digabungkan dengan string lain, memungkinkan format yang fleksibel.

Keuntungan dan Pertimbangan

• Sintaksnya sederhana dan secara visual mudah dipahami.
• Mendukung format kompleks, termasuk ekspresi.
• Template literals didukung mulai ES6, sehingga perlu kehati-hatian untuk browser yang lebih lama.

3. Topik Lanjutan: Mengonversi dan Memformat Nilai Numerik Khusus

Pada bagian ini, kami mengeksplorasi teknik lanjutan untuk mengonversi angka menjadi string di JavaScript. Khususnya, penanganan nilai desimal dan penentuan format output sering diperlukan dalam skenario pengembangan dunia nyata.

3.1 Menangani Desimal dan Spesifikasi Format

Saat mengonversi angka yang mengandung titik desimal menjadi string, Anda dapat menggunakan metode yang memungkinkan kontrol atas format tampilan.

1. Menggunakan Metode toFixed()

Metode toFixed() menghasilkan string sambil menentukan jumlah digit setelah titik desimal.

Contoh Penggunaan

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Penjelasan

• Nilai dibulatkan ke jumlah tempat desimal yang ditentukan sebagai argumen.

• Nilai yang dikembalikan adalah string, sehingga tidak diperlukan konversi tambahan.

• Nilai dapat dibulatkan lebih dari yang diharapkan, sehingga penanganan tambahan mungkin diperlukan ketika presisi sangat penting.

• Jika tidak ada argumen yang diberikan, nilai default adalah nol tempat desimal.

Contoh Praktis: Tampilan Mata Uang

let price = 1234.5;
let formattedPrice = "$" + price.toFixed(2);
console.log(formattedPrice); // "$1234.50"

2. Menggunakan Metode toPrecision()

Metode toPrecision() menghasilkan string dengan menentukan total jumlah digit signifikan.

Contoh Penggunaan

let num = 123.456;
let str = num.toPrecision(4);
console.log(str); // "123.5"

Penjelasan

• Dengan menentukan jumlah digit signifikan, pembulatan dan pemformatan diterapkan secara bersamaan.

Keuntungan dan Pertimbangan

• Hasil dapat ditampilkan dalam notasi eksponensial, sehingga tidak cocok ketika format tetap diperlukan.

3.2 Mengonversi ke Format Mata Uang dan Persentase

Saat menampilkan data, seringkali diperlukan untuk memformat nilai sebagai mata uang atau persentase.

1. Pemformatan Mata Uang dengan Intl.NumberFormat

Objek Intl.NumberFormat memungkinkan Anda dengan mudah memformat angka sebagai mata uang.

Contoh Penggunaan

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Penjelasan

• Dengan menentukan locale dan kode mata, angka secara otomatis diformat dengan benar.
• Pemisah ribuan diterapkan secara otomatis, menghilangkan kebutuhan pemrosesan manual.

Contoh Praktis: Memformat sebagai USD

let usdPrice = 1234.56;
let formattedUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(usdPrice);
console.log(formattedUSD); // "$1,234.56"

2. Mengonversi ke Format Persentase

Contoh berikut menunjukkan cara mudah memformat angka sebagai persentase.

Contoh Penggunaan

let rate = 0.1234;
let percent = new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 2 }).format(rate);
console.log(percent); // "12.34%"

Penjelasan

• Nilai desimal dikonversi ke notasi persentase, dengan kontrol atas tempat desimal.

4. Pertimbangan Penting dan Penanganan Kesalahan Saat Mengonversi Angka dan String

Meskipun JavaScript memudahkan konversi antara angka dan string, kesalahan atau perilaku yang tidak diinginkan dapat terjadi dalam kasus tertentu. Bagian ini memperkenalkan pertimbangan utama dan contoh praktis penanganan kesalahan.

4.1 Mendeteksi dan Menangani NaN (Not a Number)

Di JavaScript, NaN (Not a Number) muncul ketika operasi numerik atau konversi gagal. Mari tinjau cara mendeteksi dan menanganinya dengan tepat.

1. Deteksi NaN Dasar

Contoh: Menghasilkan NaN

let result = "abc" * 2; // Invalid operation
console.log(result); // NaN

Seperti yang ditunjukkan di atas, operasi antara string dan angka tidak valid, menghasilkan NaN.

Contoh: Menggunakan isNaN()

let value = "abc" * 2;
console.log(isNaN(value)); // true

2. Menggunakan Number.isNaN()

Di ES6, Number.isNaN() diperkenalkan untuk deteksi yang lebih tepat.

Contoh: Deteksi Ketat

console.log(isNaN("123"));          // false (due to type coercion)
console.log(Number.isNaN("123"));   // false (no type coercion)

Poin Penting

• isNaN() melakukan koersi tipe, yang dapat menghasilkan yang tidak terduga.
• Number.isNaN() tidak melakukan koersi tipe, sehingga lebih dapat diandalkan.

4.2 Teknik untuk Mencegah Kesalahan Konversi Tipe

1. Contoh Pemeriksaan Tipe Aman

Untuk mencegah kesalahan tak terduga yang disebabkan oleh pencampuran angka dan string, Anda dapat melakukan pemeriksaan tipe terlebih dahulu.

Contoh: Memeriksa Tipe Sebelum Memproses

let value = "123";

if (typeof value === "number") {
  console.log(value.toString());
} else if (!isNaN(value)) {
  console.log(String(Number(value)));
} else {
  console.log("Invalid input value");
}

Explanation

• By checking the data type in advance and handling invalid values, overall safety is improved.

2. Setting Default Values

Setting default values is also an effective strategy when invalid input is provided.

Example: Applying a Default Value

function safeConvert(value) {
  return isNaN(value) ? "0" : String(value);
}

console.log(safeConvert("123")); // "123"
console.log(safeConvert("abc")); // "0"

Key Points

• By using isNaN() , processing can continue safely with a default value when errors occur.

4.3 Handling Floating-Point Precision Errors

JavaScript floating-point calculations can produce precision errors. Let’s review how to mitigate them.

1. Example of a Precision Error

let result = 0.1 + 0.2;
console.log(result); // 0.30000000000000004

2. Methods to Eliminate Precision Errors

Method 1: Using toFixed()

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Method 2: Using Integer Arithmetic

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Key Points

• Floating-point arithmetic can introduce errors, so countermeasures are necessary.
• For financial calculations or precision-critical logic, integer arithmetic is recommended.

5. FAQ: Frequently Asked Questions and Troubleshooting

When converting numbers to strings in JavaScript, developers from beginners to intermediate levels often encounter various questions and issues. This section introduces common questions and their solutions.

5.1 How can I verify that a number has been converted into a string?

Question:
I want to confirm whether a number has been successfully converted into a string. Is there a simple way to check?

Answer:
You can verify the conversion by checking the data type of the result.

Example: Using the typeof Operator

let num = 123;
let str = String(num);
console.log(typeof str); // "string"

Key Points:

• The typeof operator returns the type of a variable as a string.
• To check whether a value is a number, use typeof num === “number” .

5.2 Why do errors occur when converting numbers?

Question:
An error occurred during code execution. What could be the cause?

Answer:
Errors may occur when the value being converted is undefined or null.

Example: Handling undefined and null Safely

let value = null;

// Convert safely
let str = value !== null && value !== undefined ? String(value) : "Default value";
console.log(str); // "Default value"

Key Points:

• Checking for value existence in advance helps prevent errors.
• Setting a default value improves the stability of your code.

5.3 Why does the converted string not match the expected format?

Question:
After converting a number to a string, the number of decimal places or format is not what I expected. What should I do?

Answer:
Use toFixed() or Intl.NumberFormat to explicitly specify the format.

Example 1: Fixing Decimal Places

let num = 123.456;
let str = num.toFixed(2);
console.log(str); // "123.46"

Example 2: Adding Thousand Separators or Currency Symbols

let price = 1234567.89;
let formatted = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price);
console.log(formatted); // "￥1,234,568"

Key Points:

• Select the appropriate method to control numeric display formats.
• International formatting should be considered when necessary.

5.4 How should I handle accidental conversion of non-numeric strings?

Pertanyaan:
Sebuah string secara tidak sengaja diperlakukan sebagai angka, menyebabkan error. Bagaimana saya dapat mencegah konversi yang tidak tepat?

Jawaban:
Validasi data masukan terlebih dahulu dan pastikan bahwa data tersebut bersifat numerik sebelum melakukan konversi.

Contoh: Menggabungkan Validasi dan Konversi

let input = "abc"; // User input

if (!isNaN(input)) {
  let str = String(Number(input));
  console.log(str);
} else {
  console.log("Invalid input value.");
}

Poin Penting:

• Menggabungkan validasi masukan dengan penanganan error membantu mencegah pemrosesan data yang tidak valid.
• Kehati-hatian ekstra diperlukan saat menangani masukan pengguna.

5.5 Bagaimana saya dapat mempertahankan presisi floating‑point?

Pertanyaan:
Saya ingin menyelesaikan masalah di mana 0.1 + 0.2 menghasilkan 0.30000000000000004.

Jawaban:
Karena aritmetika floating‑point memperkenalkan kesalahan presisi, gunakan aritmetika integer atau format desimal tetap.

Contoh 1: Menggunakan Aritmetika Integer

let result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3

Contoh 2: Memperbaiki Tempat Desimal

let result = (0.1 + 0.2).toFixed(2);
console.log(result); // "0.30"

Poin Penting:

• Perhitungan floating‑point dapat menghasilkan error, sehingga langkah pencegahan diperlukan.
• Memisahkan data perhitungan dari data tampilan meningkatkan keamanan dan akurasi.

6. Ringkasan dan Sumber Daya Terkait

Artikel ini memberikan penjelasan komprehensif tentang cara mengonversi angka menjadi string dalam JavaScript, mencakup metode dasar, teknik lanjutan, pertimbangan penting, dan FAQ. Mari tinjau kembali poin‑poin utama.

6.1 Ringkasan Poin Penting

1. Metode Konversi Dasar

• Fungsi String() : Sederhana dan ramah pemula.
• Metode toString() : Fleksibel, mendukung radix dan konversi sistem bilangan.
• Template Literals : Sintaks modern yang menawarkan kejelasan dan kemudahan penggunaan.

2. Pemformatan Lanjutan dan Kontrol Tampilan

• toFixed() : Mengontrol jumlah tempat desimal.
• Intl.NumberFormat : Menyederhanakan pemformatan mata uang dan persentase.

3. Penanganan Error dan Praktik Terbaik

• Deteksi NaN : Gunakan isNaN() dan Number.isNaN() untuk mencegah error.
• Konversi Tipe Aman : Validasi tipe data sebelum diproses.
• Penanganan Presisi Floating‑Point : Gunakan aritmetika integer atau kontrol desimal tetap.

4. Pemecahan Masalah Berbasis FAQ

• Solusi praktis untuk error input dan masalah pemformatan.
• Contoh kode dunia nyata untuk memperkuat kemampuan pemecahan masalah.

6.2 Kasus Penggunaan Praktis

Teknik yang diperkenalkan dalam artikel ini dapat diterapkan pada skenario berikut:

• Tampilan Harga E‑commerce : Meningkatkan keterbacaan dengan pemformatan mata uang.
• Alat Visualisasi Data : Memformat nilai numerik dengan satuan atau persentase.
• Validasi Input Formulir : Memvalidasi dan memproses masukan pengguna secara aman.
• Logging dan Debugging : Mengonversi nilai numerik menjadi string untuk output yang jelas.

6.3 Tautan dan Referensi Terkait

Bagi yang ingin mendalami lebih lanjut atau merujuk pada dokumentasi resmi, sumber berikut direkomendasikan:

• JavaScript String Object MDN Web Docs – String
• Panduan Lengkap tentang toFixed() dan Pemformatan Angka MDN Web Docs – Number.toFixed()
• Menggunakan Intl.NumberFormat MDN Web Docs – Intl.NumberFormat

6.4 Catatan Akhir

Mengonversi angka menjadi string dalam JavaScript adalah keterampilan dasar yang digunakan di seluruh aplikasi web.

Keterampilan yang Diperoleh dari Artikel Ini:

• Memahami teknik konversi tipe dasar.
• Memformat data numerik secara tepat untuk berbagai konteks.
• Menulis kode yang stabil dan tahan terhadap error.

Gunakan teknik‑teknik ini untuk membangun aplikasi web yang praktis dan dapat diandalkan.

Catatan Tambahan dan Pembelajaran di Masa Depan

Untuk lebih meningkatkan keterampilan JavaScript Anda, pertimbangkan mempelajari konversi terbalik dari string ke angka dan teknik manipulasi tipe data yang lebih maju. Topik‑topik ini akan dibahas dalam artikel mendatang—tetap ikuti!