String Methods

Siti menerima kiriman data produk dari tiga supplier yang berbeda. Satu supplier menulis nama produk dengan spasi berlebihan di awal dan akhir, satu lagi memakai huruf besar-kecil yang berubah-ubah, dan nomor serinya datang dengan panjang yang tidak konsisten. Semua data itu tetap berupa string, tetapi belum layak tampil di etalase toko.

Method bawaan string adalah kotak peralatan untuk pekerjaan perapian semacam ini. Chapter ini membedah method inti satu per satu: trim untuk membersihkan ujung, toUpperCase dan toLowerCase untuk menyeragamkan huruf, slice dan substring untuk memotong, replace dan replaceAll untuk menukar isi, serta split, padStart/padEnd, dan repeat untuk menguraikan serta menyusun teks. Di akhir chapter, semuanya dirangkai menjadi satu berkas latihan yang bisa dijalankan dengan node.

Membersihkan Ujung String dengan trim #

Aturan trim(): hapus whitespace — spasi, tab, dan baris baru — hanya di awal dan akhir string. Spasi di tengah tidak disentuh sama sekali.

Mekanismenya penting dipahami sejak awal: string di JavaScript bersifat immutable. Setiap method string bekerja dengan menghitung dan mengembalikan string baru; string asal tetap utuh. Karena itu hasil trim() hampir selalu perlu ditampung ke variabel baru.

const mentah = "   kopi gayo   ";
console.log("[" + mentah + "]");
console.log("[" + mentah.trim() + "]");
console.log("[" + mentah + "]");

Output yang Dihasilkan:

[   kopi gayo   ]
[kopi gayo]
[   kopi gayo   ]

Tanda kurung siku sengaja dipakai agar spasi terlihat. Baris pertama menampilkan string asli lengkap dengan spasinya, baris kedua menampilkan hasil trim(), dan baris ketiga membuktikan mentah tidak berubah — tiga spasi di kedua ujungnya masih ada.

Mari kita telaah baris-baris kode di atas:

1. Baris 2 ("[" + mentah + "]"): operator + menyambung string dengan isi variabel; tanda [ dan ] menandai batas spasi secara visual.
2. Baris 3 (mentah.trim()): method mengembalikan string baru tanpa whitespace di ujung; string asal tidak tersentuh.
3. Baris 4: mencetak ulang variabel asli, dan keluarannya identik dengan baris pertama — bukti sifat immutable.

Menyeragamkan Huruf: toUpperCase dan toLowerCase #

Kedua method mengembalikan salinan string dengan seluruh hurufnya diubah: kapital semua untuk toUpperCase(), huruf kecil semua untuk toLowerCase(). Karakter non-huruf seperti angka dan spasi dibiarkan apa adanya.

const nama = "Kopi Gayo";
console.log(nama.toUpperCase());
console.log(nama.toLowerCase());
console.log(nama);

Output yang Dihasilkan:

KOPI GAYO
kopi gayo
Kopi Gayo

Pemakaian paling umum adalah menyeragamkan kode dan kategori sebelum dibandingkan. Perbandingan "KOPI" === "kopi" menghasilkan false, tetapi "KOPI".toLowerCase() === "kopi" menghasilkan true. Dengan menyamakan bentuk huruf terlebih dahulu, dua data yang tertulis berbeda bisa dianggap sama.

Memotong String: slice dan substring #

slice(awal, akhir) dan substring(awal, akhir) sama-sama mengambil potongan string dari indeks awal sampai sebelum akhir — karakter di posisi akhir tidak ikut. Ingat kembali dari section Arrays: indeks dimulai dari 0. Bedanya ada pada dua situasi khusus:

const teks = "JavaScript";
console.log(teks.slice(0, 4));
console.log(teks.slice(-4));
console.log(teks.substring(4, 1));
console.log(teks.slice(4, 1));
console.log(teks.substring(-4));

Output yang Dihasilkan:

Java
ript
ava

JavaScript

Baris keempat keluaran tampak kosong — itu memang isinya: slice(4, 1) diminta memotong dari indeks 4 ke indeks 1 yang berada di belakangnya, sehingga hasilnya string kosong. Versi substring dengan argumen yang sama menghasilkan "ava" karena kedua argumennya ditukar menjadi substring(1, 4).

1. Baris 2 (teks.slice(0, 4)): mengambil indeks 0 sampai 3 — "Java".
2. Baris 3 (teks.slice(-4)): indeks negatif dihitung mundur dari akhir; -4 berarti mulai empat karakter sebelum akhir — "ript".
3. Baris 4 (teks.substring(4, 1)): argumen ditukar menjadi substring(1, 4), menghasilkan "ava".
4. Baris 5 (teks.slice(4, 1)): potongan arah mundur tidak dimungkinkan, hasilnya string kosong — baris kosong pada keluaran.
5. Baris 6 (teks.substring(-4)): indeks negatif dianggap 0, sehingga potongan berjalan dari awal sampai akhir string.

Mengganti Isi: replace dan replaceAll #

replace(cari, ganti) menukar kemunculan pertama, sedangkan replaceAll(cari, ganti) menukar semua kemunculannya. Perbedaan ini sering luput dari perhatian:

const pesan = "kopi habis, kopi yang terakhir dibeli Siti";
console.log(pesan.replace("kopi", "teh"));
console.log(pesan.replaceAll("kopi", "teh"));

Output yang Dihasilkan:

teh habis, kopi yang terakhir dibeli Siti
teh habis, teh yang terakhir dibeli Siti

replace berhenti setelah kecocokan pertama, sedangkan replaceAll mengganti semuanya. Kedua method juga menerima regex sebagai argumen pencari — kemampuan yang akan kita manfaatkan penuh di chapter Regular Expressions dan Regex Flags.

Memecah dan Menyusun: split, padStart, padEnd, repeat #

split(pemisah) menguraikan string menjadi array dengan pemisah sebagai batas. Ini jembatan dua arah antara string dan array: split menguraikan, dan method join dari section Arrays menyambungkannya kembali.

padStart(panjang, isian) dan padEnd(panjang, isian) menambah karakter di awal atau akhir sampai panjang string mencapai batas tertentu — berguna agar nomor seragam dan kolom rata. Sementara repeat(n) mengulang string sebanyak n kali.

const kalimat = "kopi teh gula";
console.log(kalimat.split(" "));
console.log(kalimat.split(" ").length);
console.log("7".padStart(4, "0"));
console.log("7".padEnd(4, "0"));
console.log("ab".repeat(3));

Output yang Dihasilkan:

[ 'kopi', 'teh', 'gula' ]
3
0007
7000
ababab

1. Baris 2 (kalimat.split(" ")): string diuraikan pada setiap spasi menjadi array tiga kata; tanda [ dan '...' adalah cara Node menampilkan array.
2. Baris 4 ("7".padStart(4, "0")): string "7" diberi isian "0" di depan sampai panjangnya empat karakter — "0007".
3. Baris 5 ("7".padEnd(4, "0")): arah sama, posisi berlawanan — isian ditambahkan di belakang menjadi "7000".
4. Baris 6 ("ab".repeat(3)): "ab" diulang tiga kali menjadi "ababab".

Studi Kasus: Merapikan Label Produk #

Method-method di atas biasanya dirangkai, bukan dipakai sendiri-sendiri. Berkas berikut mengolah satu data mentah dari supplier menjadi label siap cetak: bersihkan ujungnya, potong kodenya, uraikan katanya, beri nomor serinya, lalu samakan penulisannya.

// label-produk.js
// Siti merapikan data mentah dari supplier menjadi label produk siap cetak.

const namaMentah = "  kopi gayo arabika  ";

// trim: menghapus spasi di awal dan akhir string
const namaBersih = namaMentah.trim();
console.log(namaBersih);

// slice + toUpperCase: empat huruf pertama menjadi kode kategori
const kodeKategori = namaBersih.slice(0, 4).toUpperCase();
console.log(kodeKategori);

// split: memecah string menjadi array kata
const kata = namaBersih.split(" ");
console.log(kata.length);
console.log(kata[0]);

// padStart: nomor urut selalu empat digit
const nomorSku = String(7).padStart(4, "0");
console.log("SKU-" + nomorSku);

// repeat: garis pemisah sepanjang 15 karakter
console.log("-".repeat(15));

// replaceAll: menyamakan penulisan kata pada deskripsi
const deskripsi = "kopi gayo adalah kopi asli Aceh";
console.log(deskripsi.replaceAll("kopi", "Kopi"));

Output yang Dihasilkan:

kopi gayo arabika
KOPI
3
kopi
SKU-0007
---------------
Kopi gayo adalah Kopi asli Aceh

Simpan berkas di atas, jalankan dengan node label-produk.js, dan bandingkan keluarannya. Mari kita telaah baris-baris pentingnya:

1. Baris 7 (namaMentah.trim()): spasi berlebih dari data supplier dihapus, sehingga namaBersih berisi "kopi gayo arabika".
2. Baris 11 (namaBersih.slice(0, 4).toUpperCase()): potongan "kopi" dijadikan kode kategori "KOPI" — dua method dirangkai dalam satu ekspresi yang dibaca dari kiri ke kanan.
3. Baris 15 (namaBersih.split(" ")): nama diuraikan menjadi array ["kopi", "gayo", "arabika"], sehingga kata.length bernilai 3.
4. Baris 20 (String(7).padStart(4, "0")): angka 7 diubah ke string terlebih dahulu karena padStart adalah method string, lalu dilengkapi menjadi "0007".
5. Baris 24 ("-".repeat(15)): garis pemisah 15 karakter dibuat tanpa mengetik tanda hubung manual.
6. Baris 28 (deskripsi.replaceAll("kopi", "Kopi")): kedua kemunculan kata diberi huruf awal kapital sekaligus.

Satu kebutuhan tetap merepotkan pada contoh di atas: menyisipkan nilai ke tengah teks memaksa kita mengulang tanda kutip dan operator +. Chapter berikutnya memperkenalkan template literal — cara JavaScript modern menulis teks yang menyisipkan nilai.

// label-produk.js
// Siti merapikan data mentah dari supplier menjadi label produk siap cetak.

const namaMentah = "  kopi gayo arabika  ";

// trim: menghapus spasi di awal dan akhir string
const namaBersih = namaMentah.trim();
console.log(namaBersih);

// slice + toUpperCase: empat huruf pertama menjadi kode kategori
const kodeKategori = namaBersih.slice(0, 4).toUpperCase();
console.log(kodeKategori);

// split: memecah string menjadi array kata
const kata = namaBersih.split(" ");
console.log(kata.length);
console.log(kata[0]);

// padStart: nomor urut selalu empat digit
const nomorSku = String(7).padStart(4, "0");
console.log("SKU-" + nomorSku);

// repeat: garis pemisah sepanjang 15 karakter
console.log("-".repeat(15));

// replaceAll: menyamakan penulisan kata pada deskripsi
const deskripsi = "kopi gayo adalah kopi asli Aceh";
console.log(deskripsi.replaceAll("kopi", "Kopi"));