Tipe Data String JavaScript: Cara Membuat dan Menggabungkan

String merupakan salah satu tipe data yang akan sering kita gunakan dalam membuat aplikasi menggunakan JavaScript dan termasuk bahasa pemrograman pada umumnya.

Misalnya data pengguna seperti nama, email, dan alamat akan kita simpan dalam tipe string.

Oleh karena itu, kita memerlukan pemahan yang baik mengenai tipe data yang satu ini.

Berikut beberapa topik yang akan kita bahas terkait tipe data string:

1. Apa Itu String
2. Cara Membuat Data String
   1. String Literal
   2. String()
   3. new String()
3. Perbedaan String Literal, String(), dan new String()
4. Petik Ganda atau Tunggal?
5. Cara Menggabungkan String
6. Karakter Escape

Apa Itu String?

String merupakan tipe data yang dapat digunakan untuk menyimpan data yang direpresentasikan dalam bentuk teks.

Kita tidak bisa menyimpan data teks tanpa string, perhatikan kode dibawah.

Maksudnya, kita di sini ingin menyimpan data reza ke dalam variabel nama, tapi karena tidak ditulis sesuai aturan data string ini akan dianggap lain:

const nama = reza; // Uncaught ReferenceError: reza is not defined

Yang terjadi, reza dianggap sebagai variabel bukan string, oleh karena itu JavaScript mengembalikan kesalahan bahwa variabel reza belum dideklarasikan.

Ini baru sesuai dengan yang kita harapkan:

const nama = 'reza';

Cara Membuat Data String

Ada tiga cara yang bisa kita gunakan untuk membuat data string:

1. String literal.
2. String()
3. new String()

Namun yang paling sering digunakan dan memang direkomendasikan adalah string literal.

Tapi tetap kita bahas di sini, tujuannya agar kita tahu bahwa ada cara lain yang bisa kita gunakan meskipun tidak direkomendasikan.

String Literal

Untuk membuat string literal kita bisa membungkus data teks di dalam tanda petik, entah itu petik ganda maupun tunggal.

Yang perlu diperhatikan, jika petik pembuka menggunakan petik tunggal maka petik penutup harus menggunakan petik tunggal, begitupula dengan petik ganda.

Saya biasanya menggunakan petik tunggal karena lebih mudah ditulis, tanpa ribet menekan tombol Shift.

Contoh:

const nama = 'reza';

Contoh di atas kita menyimpan data teks "reza" ke dalam variabel nama.

String()

Data teks yang dibuat menggunakan string literal dan data yang dikembalikan oleh String() tanpa kata kunci new adalah data string primitif.

Tapi kita tidak perlu membuatnya menggunakan cara ini, nilai yang dihasilkan sama saja.

Contoh:

const nama = String('reza');

new String()

Data teks yang dibuat menggunakan new String() akan menjadi data non-primitif atau objek. Ini tidak direkomendasikan.

const nama = new String('reza');

Perbedaan String Literal, String(), dan new String()

Lantas apa bedanya ketiga metode di atas?

Yang perlu diperhatikan adalah string literal dan String() mengembalikan data primitif, keduanya identik.

Sehingga jika kita bandingkan nilai yang sama menggunakan operator kesetaraan ketat === akan menghasilkan nilai true.

const str1 = 'reza';
const str2 = String('reza');

console.log(typeof str1); // string
console.log(typeof str2); // string

console.log(str2 instanceof String); // false
console.log(str2 instanceof String); // false

console.log(str1 === str2); // true

Sedangkan new String() mengembalikan data non-primitif atau objek.

Selain itu, string yang dibuat dengan new String() akan membuat objek baru bertipe objek.

Oleh karena itu jika kita bandingkan nialinya dengan yang dibuat menggunakan string literal akan dianggap berbeda, meskipun teks atau datanya sama.

const str1 = 'reza';
const str2 = new String('reza');

console.log(typeof str2); // object
console.log(str2 instanceof String); // true
console.log(str1 === str2); // false

Bahkan jika kita bandingkan string dengan data atau teks yang sama yang dibuat menggunkaan new String(), dianggap tidak sama meskipun nilainya sama.

Perhatikan bahwa ketika kita menggunakan kata kunci new, JavaScript akan membuat objek baru.

const str1 = new String('reza');
const str2 = new String('reza');

console.log(str1 === str2); // false

Tpi di belakang layar, JavaScript secar otomatis mengonversi string primitif menjadi objek String.

Oleh karena itu kita bisa mengakses berbagai properti dan method, diantaranya:

const nama = 'reza';

nama.length; // 4
nama.toUpperCase(); // REZA
nama.charAt(0); // r

Jadi jangan heran jika kita tiba-tiba bisa mengakse method dan properti, itu semua ada di dalam objek String.

Topik ini sebetulnya cukup menarik untuk dikupas, tapi kita perlu memiliki pemahaman yang cukup mengenai prototype dan paradigma OOP.

Singkatnya, selalu gunakan string literal untuk membuat data tekstual.

Petik Ganda atau Tunggal?

Entah itu petik ganda atau petik tunggal keduanya sama, digunakan untuk membungkus data teks agar menjadi string.

Oleh karena itu, pilih salah satu dan gunakan secara konsisten.

Kecuali jika data teks mengandung petik yang digunkaan sebagai petik pembuka dan penutup.

Dalam kasus seperti ini kita bisa menggunakan petik yang berbeda sebagai pembuka dan penutup.

Contoh, kode di bawah akan menghasilkan kesalahan (Uncaught SyntaxError: Invalid or unexpected token) karena petik di dalam kata "jum'at" akan dianggap sebagai petik penutup.

const hari = 'jum'at'; 
// Uncaught SyntaxError: Invalid or unexpected token

Jadi, solusinya gunakan petik pembuka dan penutup yang berbeda dengan yang ada di dalam data teks:

const hari1 = "jum'at";
// atau
const hari2 = 'jum"at';

Selain menggunakan solusi di atas, kita juga bisa menggunakan karakter escape dan template literals.

Cara Menggabungkan String

Untuk menggabungkan string kita juga juga bisa menggunakan template literals atau operator +.

Untuk saat ini, mari kita gunakan operator +:

const firstName = 'renova';
const lastName = 'reza';

const fullName = firstName + ' ' + lastName;

console.log(fullName); // renova reza

Karakter Escape

Karakter escape (\) adalah karater yang dapat digunakan untuk mengubah karakter khusus menjadi string atau teks.

Mari kita lihat contoh berikut:

const hari = 'jum\'at';

Jika kita tidak menambahkan karakter escape \ tepat setelah karakter khusus, tanda petik di dalam kata "jum'at" akan diterjemahkan sebagai penutup string.

Namun karena kita menggunakan karakter escape ini akan dianggap sebagai data teks.

Bagaimana jika kita ingin menambahkan baris baru? kita tidak bisa membuatnya seperti ini:

const info = 'Sekarang hari senin.
Besok hari selasa.';

Solusinya, gunakan \n:

const info = 'Sekarang hari senin.\nBesok hari selasa.';

console.log(info);
/*
Sekarang hari senin.
Besok hari selasa.
*/

Ada beberapa karakter khusus yang bisa kita escape diantaranya:

Lima teratas biasanya yang paling sering digunakan, enam terbawah awalnya dirancang untuk mengontrol mesin ketik, teletype, dan mesin faks.