String dan template literal

String adalah tipe untuk teks, dan JavaScript menyediakan tiga cara menulisnya, yaitu kutip satu, kutip dua, dan backtick. Bentuk ketiga disebut template literal, yaitu string yang ditulis dengan backtick dan mendukung interpolasi nilai serta baris baru tanpa trik apa pun. Topik ini membahas kapan setiap bentuk dipakai, penanganan karakter khusus, dan metode string yang paling sering muncul pada kode nyata. Semua contohnya dapat dijalankan dengan Node.js dan keluarannya ditampilkan apa adanya.

Tiga cara menulis string#

Kutip satu dan kutip dua berperilaku persis sama, dan pemilihan antara keduanya adalah soal konsistensi gaya. Backtick terlihat sama untuk string polos, tetapi punya dua kemampuan tambahan, yaitu interpolasi dan baris baru. Kode berikut menampilkan ketiganya berdampingan.

console.log('kutip satu');
console.log("kutip dua");
console.log(`backtick`);

kutip satu
kutip dua
backtick

Selama isi string tidak perlu interpolasi dan tidak banyak baris, ketiga bentuk benar-benar setara. Banyak tim JavaScript menetapkan aturan gaya, misalnya kutip satu untuk semua string biasa dan backtick hanya ketika interpolasi dibutuhkan. Konsistensi di dalam satu proyek lebih penting daripada pilihan yang mana. Sisanya adalah memahami dua kemampuan khusus backtick, dan yang pertama adalah interpolasi.

Interpolasi dengan $#

Interpolasi (interpolation) adalah penyisipan nilai langsung ke dalam string lewat pola ${}, yaitu tanda dolar diikuti kurung kurawal. Di dalam kurung kurawal boleh ditulis ekspresi apa pun, mulai dari nama variabel sampai perhitungan. Template literal mengevaluasi ekspresi itu pada saat string dibuat, lalu hasilnya menyatu sebagai bagian teks.

const barang = "Pensil";
const harga = 3000;
const jumlah = 4;

console.log(`${barang} x ${jumlah}`);
console.log(`Subtotal: ${harga * jumlah}`);
console.log(`Barang: ${barang.toUpperCase()}`);

Pensil x 4
Subtotal: 12000
Barang: PENSIL

Baris Subtotal menunjukkan ekspresi harga * jumlah yang dievaluasi menjadi 12000, sedangkan baris terakhir memanggil metode toUpperCase() di dalam interpolasi dan hasilnya menyatu ke teks. Dibandingkan penggabungan dengan +, interpolasi menjaga urutan teks tetap sama dengan urutan keluarannya. Pada string panjang dengan banyak nilai, perbedaannya makin terasa, karena tidak ada tanda kutip dan tanda plus yang terpisah-pisah. Sejak fitur ini tersedia, template literal menjadi bentuk standar untuk menyusun teks yang berisi nilai.

String banyak baris#

Kutip satu dan kutip dua tidak boleh langsung menyimpan baris baru di dalamnya, sehingga teks bertingkat dirakit dengan \n. Backtick menyimpan baris apa adanya, persis sebagaimana ditulis di kode. Perbandingan keduanya terlihat pada dua contoh berikut.

const catatan = `Baris pertama,
baris kedua,
baris ketiga.`;

console.log(catatan);

Baris pertama,
baris kedua,
baris ketiga.

console.log("baris pertama\nbaris kedua");

baris pertama
baris kedua

Kedua keluaran menampilkan teks bertingkat, tetapi sumber kodenya berbeda keterbacaannya. Pola \n tetap berguna ketika teksnya pendek dan baris barunya ditentukan oleh logika program, sedangkan template literal dipilih ketika bentuk teksnya memang bertingkat, misalnya template pesan atau bagian dokumen. Hati-hati dengan indentasi, karena spasi di awal baris ikut tersimpan di dalam string. Baris baru juga ikut terhitung pada panjang stringnya.

Escape dan karakter khusus#

Escape adalah cara menandai karakter yang biasanya menjadi bagian sintaks agar dibaca sebagai teks biasa, ditulis dengan garis miring terbalik \ sebelum karakternya. Karakter yang paling sering diloloskan ada tiga, yaitu tanda kutip dari jenis yang sama dengan pembuka string, garis miring terbalik itu sendiri, serta urutan \n sebagai penanda baris baru.

console.log("Ia berkata, \"siap\".");
console.log('Direktori C:\\proyek');
console.log("kutip 'satu' di dalam kutip dua");

Ia berkata, "siap".
Direktori C:\proyek
kutip 'satu' di dalam kutip dua

Baris pertama meloloskan tanda kutip dua di dalam string kutip dua, sedangkan baris kedua menuliskan garis miring terbalik dua kali karena satu karakter \ dalam string perlu ditulis sebagai \\. Baris ketiga memperlihatkan jalan keluar yang paling sederhana, yaitu memakai jenis kutip yang berbeda sehingga tidak perlu diloloskan sama sekali. Ketika teks mulai penuh karakter khusus, mengganti jenis kutip sering lebih bersih daripada menumpuk escape. Untuk backtick di dalam template literal, polanya sama, yaitu garis miring terbalik ditulis sebelum karakternya.

Metode string yang sering dipakai#

String menyimpan kumpulan metode bawaan yang menyelesaikan sebagian besar kebutuhan pengolahan teks sehari-hari. Metode-metode ini tidak mengubah string aslinya, melainkan mengembalikan string baru, karena string di JavaScript tidak dapat diubah isinya. Contoh berikut memakai satu string yang sengaja diapit spasi untuk memperlihatkan kerja trim().

const teks = "  Latihan JavaScript  ";

console.log(teks.length);
console.log(teks.trim().length);
console.log(teks.trim().toUpperCase());
console.log(teks.includes("Script"));
console.log(teks.trim().slice(0, 7));

22
18
LATIHAN JAVASCRIPT
true
Latihan

trim() memotong spasi di kedua ujung string, toUpperCase() mengubah semua hurufnya menjadi kapital, includes() memeriksa apakah sebuah potongan teks ada di dalamnya, dan slice() mengambil bagian dari indeks pertama sampai sebelum indeks kedua. Properti length menghitung panjang string termasuk spasi, sehingga angka 22 menurun menjadi 18 setelah trim(). Kombinasi trim() sebelum metode lain adalah pola yang umum, karena masukan dari luar hampir selalu membawa spasi yang tidak terlihat.

const baris = "Budi,Matematika,90";
const bagian = baris.split(",");
console.log(bagian);
console.log(bagian[0], bagian[2]);

const nomor = "7";
console.log(nomor.padStart(3, "0"));

const kalimat = "sore ini minum kopi";
console.log(kalimat.replace("kopi", "teh"));

[ 'Budi', 'Matematika', '90' ]
Budi 90
007
sore ini minum teh

split() memecah string menjadi array pada setiap pemisah yang diberikan, replace() mengganti kemunculan pertama saja, dan padStart() mengisi sisi kiri sampai panjang yang diminta, misalnya untuk menyeragamkan nomor urut. Perhatikan bahwa replace("kopi", "teh") hanya mengganti kemunculan pertama, dan mengganti semua kemunculan memerlukan pola regex, yaitu pencocokan teks berpola yang dibahas pada topik lanjutan. Kedelapan metode dan properti di atas sudah menutup sebagian besar tugas teks pada program kecil.

Ringkasan#

• Kutip satu dan kutip dua setara, sedangkan backtick membuka interpolasi ${} dan string banyak baris.
• Interpolasi mengevaluasi ekspresi apa pun di dalam ${} pada saat string dibuat.
• Escape dengan garis miring terbalik meloloskan kutip, garis miring, dan karakter khusus seperti \n.
• length, trim(), toUpperCase(), includes(), slice(), split(), replace(), dan padStart() menutup sebagian besar kebutuhan teks, dan semuanya mengembalikan string baru tanpa mengubah aslinya.

Referensi#

• JavaScript — MDN Web Docs — Rujukan tipe string beserta daftar metode bawaannya.
• The Modern JavaScript Tutorial — javascript.info — Bab string dan template literal dengan contoh yang bertahap.