Strings

Teks adalah jenis data yang paling sering dipegang sebuah program. Formulir pendaftaran mengirim nama seperti "Siti" dan email seperti [email protected]; aplikasi pesan menampilkan kalimat sapaan; laporan penjualan menyusun kalimat ringkasan dari angka. Semua teks itu direpresentasikan oleh tipe string — rangkaian karakter yang diapit tanda kutip — dan hampir setiap fitur yang kita bangun menyentuh string di satu titik atau lainnya.

Chapter ini melatih semua cara membuat string di JavaScript: tiga jenis tanda kutip, escape sequence untuk karakter khusus, dan template literal untuk menyisipkan nilai ke dalam teks. Di bagian akhir, kita membaca panjang string dan mengakses karakternya satu per satu. Semua contoh diuji lewat satu berkas di Node.

Tiga Cara Menulis String #

String bisa dibuat dengan kutip tunggal, kutip ganda, atau backtick. Ketiga bentuk berikut menghasilkan string dengan isi yang sama persis:

console.log('Kopi Gayo'); // kutip tunggal
console.log("Kopi Gayo"); // kutip ganda
console.log(`Kopi Gayo`); // backtick

Output yang Dihasilkan:

Kopi Gayo
Kopi Gayo
Kopi Gayo

Kutip tunggal dan kutip ganda berperilaku identik — JavaScript tidak membedakan keduanya. Backtick juga menghasilkan string biasa, tetapi punya dua kemampuan tambahan yang tidak dimiliki keduanya: menyisipkan nilai ke dalam teks dan membentang beberapa baris. Dua kemampuan itu kita bahas di bagian Template Literal.

String kosong juga sah: dua kutip tanpa karakter apa pun ("") adalah string dengan panjang nol. String kosong sering menjadi nilai awal yang praktis ketika teks baru akan diisi belakangan.

Escape Sequence #

Bagaimana menuliskan kutip ganda di dalam string yang diapit kutip ganda? Jawabannya escape sequence: kombinasi backslash (\) dan satu karakter yang memberi tahu engine, “ini karakter khusus, jangan dianggap penutup string”. Escape yang paling sering dipakai:

console.log("Ia berkata: \"Halo\""); // kutip di dalam string
console.log('C:\\Users\\Budi');      // backslash nyata
console.log('Baris satu\nBaris dua'); // pindah baris di tengah teks

Output yang Dihasilkan:

Ia berkata: "Halo"
C:\Users\Budi
Baris satu
Baris dua

Pada baris pertama, \" membuat engine mencetak kutip ganda tanpa menganggap string selesai. Pada baris kedua, \\ menghasilkan satu karakter backslash — cukup tulis dua kali untuk memperoleh satu. Baris ketiga menunjukkan \n yang membelah satu string menjadi dua baris keluaran.

Template Literal #

Template literal adalah string yang diapit backtick dengan dua keunggulan. Pertama, ekspresi apa pun bisa disisipkan di dalam tanda ${...}, dan hasil evaluasinya masuk ke teks secara otomatis:

const nama = "Siti";
const salam = `Halo, ${nama}! Stok kopi: ${3 + 2} cangkir.`;
console.log(salam);

Output yang Dihasilkan:

Halo, Siti! Stok kopi: 5 cangkir.

Engine mengevaluasi isi ${...} terlebih dahulu — termasuk perhitungan seperti 3 + 2 — lalu mengubah hasilnya menjadi teks dan menyisipkannya pada posisi tersebut.

Kedua, template literal membentang beberapa baris tanpa \n. Spasi dan baris baru yang kita ketik ikut menjadi bagian string:

const undangan = `Kepada Yth.
Siti
Mohon hadir tepat waktu.`;
console.log(undangan);

Output yang Dihasilkan:

Kepada Yth.
Siti
Mohon hadir tepat waktu.

Panjang dan Akses Karakter #

Properti .length menyimpan jumlah karakter dalam string. Perhatikan bahwa .length adalah properti, bukan method — dibaca tanpa tanda kurung:

const pesanan = "kopi gula aren";
console.log(pesanan.length);            // 14 — termasuk dua spasi
console.log(pesanan[0]);                // "k" — indeks dimulai dari 0
console.log(pesanan[pesanan.length - 1]); // "n" — karakter terakhir

Output yang Dihasilkan:

14
k
n

Karakter diakses lewat indeks dalam tanda kurung siku, dan indeks dimulai dari 0. Karena itu karakter terakhir berada di posisi length - 1, bukan length — pola yang akan terus kita pakai dan perlu menjadi refleks.

Contoh Lengkap: Kartu Nama Digital #

Berkas berikut merangkum seluruh materi chapter ini — tiga jenis kutip, escape sequence, template literal, serta panjang dan indeks — dalam satu contoh kartu nama:

// kartu-nama.js
// Melatih tiga cara menulis string, escape sequence, dan template literal.

const namaDepan = 'Budi';
const namaBelakang = "Santoso";

// Penggabungan string dengan +
console.log(namaDepan + ' ' + namaBelakang);

// Escape sequence: \" menyisipkan kutip ganda di dalam string kutip ganda
const slogan = "Kopi \"Gayo\" asli Aceh";
console.log(slogan);

// Template literal: backtick + ${} menyisipkan nilai langsung
const kota = 'Bandung';
const perkenalan = `Halo, saya ${namaDepan} ${namaBelakang} dari ${kota}.`;
console.log(perkenalan);

// Template literal membentang beberapa baris tanpa perlu \n
const undangan = `Kepada Yth.
${namaDepan} ${namaBelakang}
Mohon hadir tepat waktu.`;
console.log(undangan);

// Panjang string dan akses karakter lewat indeks
console.log(namaBelakang.length);
console.log(namaBelakang[0]);
console.log(namaBelakang[namaBelakang.length - 1]);

Output yang Dihasilkan:

Budi Santoso
Kopi "Gayo" asli Aceh
Halo, saya Budi Santoso dari Bandung.
Kepada Yth.
Budi Santoso
Mohon hadir tepat waktu.
7
S
o

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

1. Baris 4–5 (const namaDepan = 'Budi'; dst.): dua string dibuat dengan gaya kutip berbeda. Keduanya sama sahnya; isi baris 8 membuktikan mereka bisa digabung tanpa hambatan.
2. Baris 8 (console.log(namaDepan + ' ' + namaBelakang);): operator + menyambung tiga string berurutan — nama depan, satu spasi, lalu nama belakang.
3. Baris 11 (const slogan = "Kopi \"Gayo\" asli Aceh";): dua \" menyisipkan kutip ganda di tengah string kutip ganda. Tanpa backslash, engine akan menganggap string selesai di huruf sebelum Gayo dan program justru berhenti dengan SyntaxError.
4. Baris 16 (const perkenalan = ...): template literal menyisipkan tiga variabel sekaligus melalui ${...}. Hasilnya satu kalimat utuh tanpa perlu menyambung string manual.
5. Baris 20–22 (const undangan = \Kepada Yth.` …`): template literal membentang tiga baris, dan baris keduanya juga memakai penyisipan. Semua baris baru yang diketik ikut menjadi bagian string.
6. Baris 26–28 (console.log(namaBelakang.length); dst.): "Santoso" terdiri dari tujuh karakter; indeks 0 menghasilkan "S", dan length - 1 yaitu 6 menghasilkan "o" — huruf terakhir.

Perhatikan satu pola pada berkas di atas: menggabungkan banyak bagian teks dengan template literal jauh lebih mudah dibaca daripada menyambung string dengan + berulang-ulang. Untuk kalimat yang menyisipkan nilai, jadikan template literal pilihan utama.

Chapter berikutnya beralih ke tipe kedua yang paling sering dipakai: number, lengkap dengan batas presisinya dan dua nilai istimewa — Infinity dan NaN.

// kartu-nama.js
// Melatih tiga cara menulis string, escape sequence, dan template literal.

const namaDepan = 'Budi';
const namaBelakang = "Santoso";

// Penggabungan string dengan +
console.log(namaDepan + ' ' + namaBelakang);

// Escape sequence: \" menyisipkan kutip ganda di dalam string kutip ganda
const slogan = "Kopi \"Gayo\" asli Aceh";
console.log(slogan);

// Template literal: backtick + ${} menyisipkan nilai langsung
const kota = 'Bandung';
const perkenalan = `Halo, saya ${namaDepan} ${namaBelakang} dari ${kota}.`;
console.log(perkenalan);

// Template literal membentang beberapa baris tanpa perlu \n
const undangan = `Kepada Yth.
${namaDepan} ${namaBelakang}
Mohon hadir tepat waktu.`;
console.log(undangan);

// Panjang string dan akses karakter lewat indeks
console.log(namaBelakang.length);
console.log(namaBelakang[0]);
console.log(namaBelakang[namaBelakang.length - 1]);