Cara Menggabungkan String di JavaScript: Panduan untuk Pemula

Menggabungkan string di JavaScript sering muncul saat membangun antarmuka web: menyusun pesan sapaan, menampilkan alamat lengkap, atau membuat potongan HTML. Ada beberapa cara yang bisa dipakai, dan masing-masing punya karakter berbeda. Panduan ini membahas cara paling praktis untuk pemula, lengkap dengan contoh dan tips agar kode tidak berantakan.

Menggabungkan String dengan Operator +

Cara paling dasar adalah memakai tanda plus. Operator ini bekerja untuk string dan angka, tetapi jika salah satu operand berupa string, JavaScript mengubah operand lain menjadi string juga.

const namaDepan = 'Budi';
const namaBelakang = 'Santoso';
const namaLengkap = namaDepan + ' ' + namaBelakang;
console.log(namaLengkap); // Budi Santoso

Perhatikan spasi di antara tanda kutip. Tanpa spasi itu, hasilnya menempel. Menambahkan spasi secara manual memang mudah, tetapi saat string makin panjang, tanda plus dan spasi sulit dilacak. Jika kamu sering menggabungkan banyak potongan, pertimbangkan cara berikutnya.

Template Literal: Backtick yang Lebih Rapi

Sejak ES6, JavaScript menyediakan template literal yang ditulis dengan backtick (`). Di dalamnya, kamu bisa menyisipkan ekspresi dengan sintaks ${...}. Spasi dan baris baru dipertahankan apa adanya, sehingga kamu tidak perlu menambahkan spasi manual di antara potongan.

const namaDepan = 'Budi';
const namaBelakang = 'Santoso';
const namaLengkap = `${namaDepan} ${namaBelakang}`;
console.log(namaLengkap); // Budi Santoso

Template literal membantu saat kamu perlu menyusun string multi-baris atau mencampur variabel dengan teks. Namun, hati-hati jika string berisi karakter backtick atau tanda dolar yang diikuti kurung kurawal; kamu perlu melakukan escape.

Menggunakan Method concat()

String memiliki method concat() yang bisa menerima satu atau beberapa argumen. Method ini jarang dipakai karena operator + dan template literal lebih ringkas, tetapi tetap berguna dalam beberapa situasi, misalnya saat kamu ingin menggabungkan array string.

const sapaan = 'Halo';
const nama = 'Budi';
const pesan = sapaan.concat(', ', nama, '!');
console.log(pesan); // Halo, Budi!

concat() tidak mengubah string asli; ia mengembalikan string baru. Sama seperti operator +, method ini juga mengonversi nilai non-string menjadi string.

Tips agar Penggabungan String Tidak Berantakan

Beberapa kebiasaan berikut bisa kamu terapkan agar kode string tetap mudah dibaca dan dirawat.

• Pilih satu gaya dan konsisten. Untuk kebanyakan kasus, template literal adalah pilihan paling jelas.
• Pisahkan logika penyusunan string ke dalam variabel antara jika ekspresinya panjang.
• Gunakan spasi yang tepat; template literal membantumu menghindari spasi ganda atau kurang.
• Jika string mengandung banyak baris, template literal lebih nyaman daripada menambahkan n manual.
• Untuk menggabungkan array string, method join() lebih tepat daripada concat().

Jika kamu sering bekerja dengan array, kamu mungkin juga perlu tahu cara menggabungkan array di JavaScript. Prinsipnya mirip, tetapi ada method khusus seperti concat() dan spread operator. Kamu bisa membaca panduan memilih antara push, unshift, dan splice untuk operasi array lainnya.

Kesalahan yang Sering Terjadi

Pemula sering keliru saat menggabungkan string dengan angka. Contohnya, '5' + 3 menghasilkan '53', bukan 8. Jika kamu ingin menjumlahkan angka, pastikan keduanya bertipe number. Menggunakan typeof bisa membantumu memeriksa tipe data sebelum operasi. Baca juga cara cek tipe data di JavaScript dengan typeof agar lebih yakin.

Kesalahan lain adalah lupa menambahkan spasi di antara kata. Template literal mengurangi risiko ini karena spasi ditulis apa adanya di dalam backtick.

Ringkasan

Untuk menggabungkan string di JavaScript, operator + adalah cara paling dasar, tetapi template literal menawarkan keterbacaan yang lebih baik, terutama untuk string multi-baris atau yang melibatkan banyak ekspresi. Method concat() berguna dalam kasus tertentu, meskipun jarang menjadi pilihan utama. Pilih gaya yang paling sesuai dengan kebutuhanmu dan jaga konsistensi.

Pertanyaan yang Sering Diajukan

Kapan sebaiknya menggunakan template literal daripada operator +?

Gunakan template literal jika kamu perlu menyisipkan beberapa variabel, membuat string multi-baris, atau ingin menghindari penambahan spasi manual. Operator + lebih ringkas untuk penggabungan sederhana dua string.

Apakah concat() bisa menggabungkan lebih dari dua string?

Ya, method concat() menerima beberapa argumen sekaligus. Kamu bisa memanggilnya dengan str.concat(a, b, c) dan hasilnya adalah gabungan semua argumen.

Bagaimana cara menggabungkan string dengan angka tanpa mengubah tipenya?

Jika kamu ingin menjumlahkan angka, pastikan keduanya bertipe number. Jika salah satu string, JavaScript akan mengonversi yang lain menjadi string. Gunakan Number() atau parseInt() untuk mengubah string menjadi angka sebelum operasi aritmetika.