String JavaScript: Mengolah Teks

Hampir semua hal yang ditampilkan program ke pengguna bentuknya teks. Pesan sambutan, nama produk, notifikasi error, label harga, sampai URL di kolom alamat browser — semuanya teks. Di JavaScript, teks ditampung oleh sebuah tipe yang bernama string. Kamu sebenarnya sudah berpapasan sebentar dengan string waktu kita bahas variabel dan tipe data. Sekarang kita kupas lebih serius, karena begitu kamu lancar membuat, menggabungkan, mencari, dan menata ulang teks, sebagian besar pekerjaan JavaScript sehari-hari langsung terasa jauh lebih masuk akal.

Kabar baiknya: string sudah dibekali banyak alat bawaan, dan kamu nggak perlu menghafal semuanya. Cukup segenggam yang penting, plus pemahaman soal cara kerjanya. Persis itu yang akan kamu dapat di artikel ini.

Apa itu string

String adalah rangkaian karakter — huruf, angka, spasi, tanda baca, emoji, apa saja. Cara membuatnya tinggal membungkus teks dengan tanda kutip. JavaScript menerima tiga jenis kutip, dan dua yang pertama bisa dipakai bergantian:

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

Kutip satu dan kutip dua melakukan hal yang sama persis. Orang biasanya memilih salah satu gaya lalu konsisten memakainya di seluruh proyek — banyak tim cenderung pakai kutip satu, tapi sejujurnya itu bebas, asal kamu konsisten. Nah, backtick (`) ini istimewa, dan kita bahas kelebihannya sebentar lagi.

Pakai kutip apa pun untuk membuka, kamu wajib menutupnya dengan kutip yang sama. Enaknya punya dua pilihan yang bisa dipertukarkan: kamu bisa menaruh satu jenis kutip di dalam jenis yang lain tanpa ribet:

const kalimat = "It's a sunny day";
const ucapan = 'Dia bilang "halo" ke aku';

Di sini kutip dua membungkus teks yang mengandung tanda petik satu, dan kutip satu membungkus teks yang mengandung kutip dua. Nggak butuh trik apa-apa.

Escape karakter spesial

Tapi gimana kalau teksmu mengandung kutip yang sama persis dengan yang kamu pakai untuk membungkusnya? Di situlah backslash (\) berperan. Namanya escape character, dan tugasnya memberi tahu JavaScript “perlakukan karakter berikutnya sebagai teks biasa, bukan sebagai kode”:

const tricky = 'It\'s a beautiful day';
const path = "C:\\Users\\Documents";

\' adalah tanda petik satu yang nggak akan menutup string lebih awal, sedangkan \\ menghasilkan satu backslash biasa. Ada beberapa escape lain yang sering muncul: \n menyisipkan baris baru, dan \t menyisipkan tab.

console.log("Baris satu\nBaris dua");
// Baris satu
// Baris dua

Panjang string dan karakter satuan

Setiap string punya property .length yang memberitahu berapa banyak karakter di dalamnya:

const nama = "JavaScript";
console.log(nama.length);   // 10

Untuk mengambil satu karakter tertentu, kamu bisa mengindeks string hampir seperti array — dan sama seperti array, posisi karakter mulai dari 0:

const kata = "Halo";
console.log(kata[0]);   // "H"  (karakter pertama)
console.log(kata[3]);   // "o"  (karakter keempat)

Jadi karakter terakhir selalu ada di length - 1. Kalau kamu sudah menamatkan array dan objek, penghitungan dari nol ini pasti sudah terasa akrab — aturannya memang sama.

Menggabungkan string

Menyatukan beberapa string disebut konkatenasi. Cara paling sederhana pakai operator +, tanda tambah yang sama dengan yang kamu pakai untuk hitung-hitungan — bedanya, pada string ia menempelkan keduanya ujung ke ujung:

const namaDepan = "John";
const namaBelakang = "Doe";
const namaLengkap = namaDepan + " " + namaBelakang;
console.log(namaLengkap);   // "John Doe"

Perhatikan " " di tengah — itu string berisi satu spasi. Tanpa itu hasilnya jadi "JohnDoe" yang nempel, karena + menambahkan persis apa yang kamu berikan, nggak lebih. Cara manual seperti ini memang jalan, tapi begitu kamu menyambung lebih dari dua atau tiga potong, hasilnya jadi berisik dan gampang keliru. Untungnya ada cara yang jauh lebih enak.

Template literal: cara modern menyusun string

Di sinilah backtick membuktikan dirinya. String yang ditulis pakai backtick disebut template literal, dan ia memungkinkanmu menyisipkan variabel langsung ke dalam teks lewat ${...}:

const namaDepan = "John";
const namaBelakang = "Doe";
const sapaan = `Halo, ${namaDepan} ${namaBelakang}!`;
console.log(sapaan);   // "Halo, John Doe!"

Bandingkan dengan versi + di atas — yang ini terbaca jauh lebih mirip kalimat yang sebenarnya ingin kamu susun. Apa pun yang ada di dalam ${...} akan dievaluasi lalu ditaruh di tempatnya, jadi kamu bisa menaruh ekspresi penuh di situ, bukan cuma nama variabel:

const harga = 50000;
const jumlah = 3;
console.log(`Total: ${harga * jumlah} rupiah`);   // "Total: 150000 rupiah"

Template literal punya bonus kedua: ia bisa membentang banyak baris persis seperti yang kamu tulis, tanpa perlu \n:

const pesan = `Pelanggan yang terhormat,
Terima kasih atas pesanan Anda.
ACY Partner Indonesia`;

Apa yang kamu lihat itulah yang kamu dapat — pergantian baris di kode sumber langsung menjadi pergantian baris di stringnya.

Mencari di dalam string

Sering kali kamu perlu tahu apakah sebuah string mengandung sesuatu, atau di posisi mana. JavaScript menyediakan beberapa method yang gampang dibaca untuk ini.

includes() menjawab pertanyaan ya/tidak — apakah teks ini muncul di mana pun? — dan mengembalikan true atau false:

const email = "john.doe@example.com";
console.log(email.includes("@"));        // true
console.log(email.includes("gmail"));    // false

startsWith() dan endsWith() memeriksa dua ujung secara spesifik:

const file = "laporan.pdf";
console.log(file.endsWith(".pdf"));      // true
console.log(file.startsWith("laporan")); // true

Saat kamu butuh posisi persis sesuatu, indexOf() mengembalikan index tempat ia pertama muncul — atau -1 kalau sama sekali tidak ketemu:

const kalimat = "si kancil yang cerdik";
console.log(kalimat.indexOf("kancil"));  // 3
console.log(kalimat.indexOf("kucing"));  // -1

Mengambil potongan string

Untuk menarik sepotong dari string yang lebih panjang, slice() adalah method yang wajib kamu kenal. Kamu beri ia index awal dan (opsional) index akhir, lalu ia mengembalikan karakter di antaranya — termasuk yang awal, tapi tidak termasuk yang akhir:

const teks = "JavaScript";
console.log(teks.slice(0, 4));   // "Java"   (index 0,1,2,3)
console.log(teks.slice(4));      // "Script" (dari index 4 sampai habis)

Kalau angka kedua kamu hilangkan, slice() jalan sampai ujung string. Ia juga menerima index negatif, yang menghitung dari belakang — pas banget buat mengambil bagian ekor sesuatu:

const file = "foto-liburan.jpg";
console.log(file.slice(-3));     // "jpg"  (3 karakter terakhir)

Ingat, semua ini nggak menyentuh teks atau file yang asli — slice() menyerahkan string baru dan membiarkan sumbernya utuh.

Mengubah string

Ada segerombolan method untuk menata ulang teks, dan ini sering banget muncul di pekerjaan nyata. Masing-masing mengembalikan string baru:

const teks = "  Halo Dunia  ";

console.log(teks.toUpperCase());   // "  HALO DUNIA  "
console.log(teks.toLowerCase());   // "  halo dunia  "
console.log(teks.trim());          // "Halo Dunia" (spasi pinggir dibuang)

trim() layak disorot khusus — ia membuang spasi di kedua ujung string, yang persis kamu butuhkan untuk apa pun yang diketik pengguna di sebuah form. Orang sering nggak sengaja menambah spasi nyasar, dan trim() diam-diam membereskannya.

replace() menukar satu potongan teks dengan yang lain:

const sapaan = "Halo John";
console.log(sapaan.replace("John", "Jane"));   // "Halo Jane"

Satu hal yang perlu kamu tahu: kalau targetnya berupa string biasa, replace() cuma mengubah kemunculan pertama. Kalau kamu perlu mengganti semua kemunculan, replaceAll() adalah pilihan modern yang jelas:

const path = "a/b/c/d";
console.log(path.replaceAll("/", "-"));   // "a-b-c-d"

Memecah dan menyatukan

split() memecah string menjadi sebuah array, mematahkannya di setiap titik pemisah yang kamu sebut. Ia berpasangan cantik dengan array yang sudah kamu kenal:

const csv = "apel,pisang,ceri";
const buah = csv.split(",");
console.log(buah);          // ["apel", "pisang", "ceri"]
console.log(buah.length);   // 3

Inilah cara sehari-hari mengubah satu baris berpisah koma, sebuah kalimat berisi kata-kata, atau sebuah path menjadi sesuatu yang bisa kamu telusuri dengan perulangan. Dan ia punya pasangan yang pas di sisi array — join() — yang merekatkan sebuah array kembali menjadi satu string:

const bagian = ["2026", "07", "29"];
console.log(bagian.join("-"));   // "2026-07-29"

split() dan join() itu dua sisi dari ide yang sama: yang satu memecah teks berdasarkan pemisah, yang lain menyatukannya kembali dengan pemisah pilihanmu.

Contoh realistis

Coba kita rangkai semuanya jadi sesuatu yang mungkin benar-benar akan kamu tulis — merapikan sebuah username dan menyusun sapaan ramah dari input yang masih mentah dan berantakan:

const inputMentah = "  John.Doe@Example.COM  ";

// Rapikan dulu
const email = inputMentah.trim().toLowerCase();
console.log(email);   // "john.doe@example.com"

// Tarik username-nya (semua yang sebelum @)
const username = email.slice(0, email.indexOf("@"));
console.log(username);   // "john.doe"

// Ubah "john.doe" jadi "John Doe" untuk ditampilkan
const namaTampil = username
  .split(".")
  .map(bagian => bagian[0].toUpperCase() + bagian.slice(1))
  .join(" ");

console.log(`Selamat datang kembali, ${namaTampil}!`);   // "Selamat datang kembali, John Doe!"

Lihat bagaimana method-nya saling menyambung: trim() lalu toLowerCase() membersihkan input, slice() dan indexOf() memahat username, lalu split() / map() / join() menyusunnya kembali menjadi nama yang rapi huruf kapitalnya. Tiap langkah menerima sebuah string lalu mengembalikan string baru, jadi semuanya mengalir mulus dari satu ke berikutnya. Beginilah pekerjaan string yang sesungguhnya — nggak ada yang aneh-aneh, cuma method dari artikel ini yang menjalankan tugasnya satu per satu secara berurutan.

Penutup

Sekarang kamu sudah bisa membuat dan menata ulang teks dengan percaya diri:

• String adalah rangkaian karakter, ditulis dengan kutip 'satu', "dua", atau `backtick`. Kutip satu dan dua bisa dipertukarkan; pilih yang paling sedikit butuh escape.
• Pakai \ untuk escape karakter spesial (\', \\, \n, \t) saat dibutuhkan.
• .length memberi jumlah karakter, dan kamu bisa mengindeks karakter dengan [ ], mulai dari 0. String itu immutable — method mengembalikan string baru dan tidak pernah mengubah yang asli, jadi selalu tampung hasilnya.
• Template literal (backtick dengan ${...}) adalah cara modern menyusun string berisi variabel, dan mendukung teks banyak baris. Jadikan andalan setiap kali ada variabel terlibat.
• Cari dengan includes(), startsWith(), endsWith(), dan indexOf() (yang mengembalikan -1 saat tak ketemu).
• Ambil potongan dengan slice(), dan ubah dengan toUpperCase(), toLowerCase(), trim(), replace() / replaceAll(), serta split() (yang berpasangan dengan join() milik array).

Teks ada di mana-mana dalam pemrograman, jadi method-method ini bakal menemanimu di hampir semua hal yang kamu bangun mulai dari sini. Berikutnya, kita beralih dari teks ke angka dan matematika — gimana JavaScript menangani aritmetika, pembulatan, nilai acak, dan keanehan-keanehan yang perlu kamu tahu sebelum keburu bikin kaget.