String & Template Literal JavaScript: Interpolasi dan Method

Tiga cara menulis string

JavaScript memberimu tiga pembatas string. Dua di antaranya bisa saling menggantikan; yang ketiga bisa lebih banyak.

const single = 'hello';
const double = "hello";
const backtick = `hello`;

console.log(single === double, double === backtick);

Tanda kutip tunggal dan ganda menghasilkan string yang identik: pilih salah satu dan konsisten (kebanyakan codebase modern memakai tanda kutip tunggal sebagai default atau membiarkan formatter yang memutuskan). Backtick menghasilkan template literal, dan di sinilah hal menarik dimulai: ia mendukung interpolasi dan bisa membentang beberapa baris.

Di balik layar, ketiganya menghasilkan tipe string primitif yang sama. Pembatasnya hanya pilihan sintaks.

Escape sequence dan tanda kutip di dalam string

Di dalam string, backslash memulai escape sequence. Yang umum adalah \n (baris baru), \t (tab), \\ (backslash harfiah), dan \" / \' untuk menyisipkan tanda kutip yang sama dengan pembukanya:

const quote = "She said \"hi\" and left.";
const path = "C:\\Users\\Rosa";
const lines = "first\nsecond\nthird";

console.log(quote);
console.log(path);
console.log(lines);

Kamu bisa menghindari sebagian besar escape dengan memakai gaya tanda kutip yang lain: 'She said "hi" and left.' tidak butuh backslash. Pragmatis, bukan dogmatis.

Template literal: kekuatan super backtick

Template literal melakukan dua hal yang tidak bisa dilakukan string biasa. Pertama, ia menyisipkan ekspresi dengan ${...}:

const name = "Ada";
const age = 36;

const greeting = `Hello, ${name}. You are ${age} years old.`;
console.log(greeting);

Apa pun di dalam ${...} adalah ekspresi JavaScript, bukan sekadar nama variabel. Aritmetika, pemanggilan fungsi, ternary, bahkan template literal lain, semuanya boleh:

const price = 19.99;
const qty = 3;
const user = { name: "rosa" };

console.log(`Total: $${(price * qty).toFixed(2)}`);
console.log(`Hi, ${user.name.toUpperCase()}!`);
console.log(`Status: ${qty > 0 ? "in stock" : "sold out"}`);

Kedua, template literal bisa membentang beberapa baris tanpa perlu \n:

const message = `Dear customer,

Your order has shipped.
Expect delivery in 3-5 days.

Thanks.`;

console.log(message);

Baris baru di kode sumber menjadi baris baru di string. Untuk apa pun yang lebih panjang dari label singkat, backtick hampir selalu pilihan yang tepat.

Interpolasi lebih baik daripada concatenation

Sebelum ada template literal, satu-satunya cara menyusun string dinamis adalah operator +:

const name = "Ada";
const age = 36;

const old = "Hello, " + name + ". You are " + age + " years old.";
const modern = `Hello, ${name}. You are ${age} years old.`;

console.log(old);
console.log(modern);

Keduanya menghasilkan output yang identik. Template literal terbaca seperti kalimat yang sedang disusunnya, sedangkan versi + memaksamu melacak tanda kutip, spasi, dan operator penyambung. Pakai + hanya saat kamu menambahkan satu hal kecil ke string yang sudah ada. Untuk yang lebih panjang, pakai backtick.

String tidak bisa diubah

Setiap method yang terlihat mengubah string sebenarnya mengembalikan string baru:

const s = "hello";

s.toUpperCase();           // returns "HELLO" - discarded
console.log(s);            // still "hello"

const loud = s.toUpperCase();
console.log(loud);         // "HELLO"

Kalau kamu ingin perubahannya, kamu harus menyimpan hasilnya di suatu tempat. Ini menjebak pemula yang menulis s.replace("a", "b") dan berharap s berubah. Tidak akan. String di JavaScript seperti angka: nilainya sendiri tidak bisa diubah, hanya variabelnya yang bisa diarahkan ke nilai baru.

Method string yang benar-benar akan kamu pakai

API string lengkapnya besar. Segelintir yang akan kamu pakai setiap hari:

const s = "  Hello, World!  ";

console.log(s.length);                     // 17
console.log(s.trim());                     // "Hello, World!"
console.log(s.toLowerCase());              // "  hello, world!  "
console.log(s.includes("World"));          // true
console.log(s.startsWith("  He"));         // true
console.log(s.replace("World", "Ada"));    // "  Hello, Ada!  "
console.log(s.split(","));                 // ["  Hello", " World!  "]
console.log(s.slice(2, 7));                // "Hello"

Beberapa catatan yang perlu diingat:

• length adalah property, bukan method, jadi tanpa tanda kurung.
• replace dengan string biasa hanya mengganti kecocokan pertama. Pakai replaceAll atau regex dengan flag g untuk mengganti semua kemunculan.
• slice(start, end) menerima rentang setengah terbuka: karakter di posisi end tidak ikut.
• Indeks negatif pada slice dihitung dari belakang: s.slice(-3) memberi tiga karakter terakhir.

Indeks dan perulangan karakter

String berperilaku seperti array karakter yang hanya bisa dibaca. Kamu bisa mengakses indeksnya dan menelusurinya, tapi tidak bisa melakukan assignment ke sebuah posisi:

const s = "hello";

console.log(s[0]);      // "h"
console.log(s[4]);      // "o"
console.log(s[99]);     // undefined

s[0] = "H";             // silently ignored (or throws in strict mode)
console.log(s);         // still "hello"

for (const ch of s) {
    console.log(ch);
}

for...of menelusuri code point, yang menangani sebagian besar Unicode dengan benar. Memakai indeks (s[i]) menelusuri code unit UTF-16, yang bisa membelah emoji dan karakter non-BMP lain menjadi dua. Untuk teks biasa, keduanya tidak masalah; untuk apa pun yang dibuat pengguna, utamakan for...of atau [...s].

Tagged template literal

Ada satu bentuk lagi yang perlu kamu tahu, walaupun jarang kamu tulis sendiri. Template literal bertag memanggil sebuah fungsi dengan potongan string statis dan nilai yang disisipkan sebagai argumen terpisah:

function highlight(strings, ...values) {
    return strings.reduce((out, str, i) => {
        const val = values[i] !== undefined ? `[${values[i]}]` : "";
        return out + str + val;
    }, "");
}

const name = "Ada";
const score = 95;

console.log(highlight`User ${name} scored ${score} points.`);

Fungsi tag-nya yang menentukan seperti apa string akhirnya: ia bisa meng-escape HTML, menyusun SQL dengan aman, meng-compile CSS, atau mem-parse GraphQL. Kamu akan jauh lebih sering melihat pola ini di library (styled-components, graphql-tag, lit-html) daripada menulisnya sendiri. Tapi saat kamu memang butuh pemrosesan string khusus, tag adalah alat paling rapi untuk tugas itu.

Kesalahan umum

Daftar singkat hal yang sering menjebak orang:

• Lupa menyimpan hasil method. s.trim() tidak melakukan apa-apa kalau berdiri sendiri.
• Memakai + untuk menyambung angka dan string. "Age: " + 30 + 5 hasilnya "Age: 305", bukan "Age: 35". Template literal menghindari masalah ini: `Age: ${30 + 5}`.
• Mencampuradukkan == dan perbandingan string. Kita akan membahas kesetaraan dengan lengkap nanti, tapi "1" == 1 bernilai true dan "1" === 1 bernilai false. Utamakan ===.
• Mengira length sama dengan jumlah karakter. Untuk emoji dan karakter surrogate pair lainnya, "🙂".length bernilai 2, bukan 1. Pakai [..."🙂"].length atau Array.from(s).length saat kamu butuh jumlah karakter seperti yang dilihat pengguna.

Berikutnya: number dan BigInt

String adalah satu tipe primitif; number adalah tipe lainnya, dan sistem angka JavaScript punya keanehannya sendiri: satu tipe Number untuk bilangan bulat dan desimal, ditambah BigInt untuk saat itu tidak cukup. Itulah halaman berikutnya.