Bab 08: String JavaScript, Cara Mengolah Teks, Template, dan Method

Kalau kamu pernah ngetik “hai dunia” di console.log(), berarti kamu sudah bermain dengan string. Tapi jangan salah, string itu bukan cuma buat nge chat sama mantan atau nulis caption Instagram. Di dunia JavaScript, string adalah salah satu tipe data paling sering dipakai mulai dari menampilkan pesan error sampai membangun UI yang interaktif.

Nah, di bab ini kita bakal kupas tuntas soal string: dari dasar banget (kayak cara bikinnya), sampai trik canggih kayak template literals dan method-method keren yang bikin coding mu makin efisien.

Siap? Yuk, mulai petualangan kita di dunia teks JavaScript!

Apa Itu String dalam JavaScript

Pengertian string

String itu kumpulan karakter bisa huruf, angka, simbol, atau bahkan spasi yang disusun jadi satu kesatuan teks. Contohnya: "Selamat pagi", "123", atau bahkan "" (string kosong).

Di JavaScript, string termasuk tipe data primitif, artinya nilainya langsung disimpan di memori dan nggak bisa diubah (immutable). Jadi kalau kamu “mengubah” string, sebenarnya JavaScript bikin string baru.

Cara membuat string

Ada tiga cara utama:

// 1. Pakai single quote
let salam1 = 'Halo';

// 2. Pakai double quote
let salam2 = "Halo juga";

// 3. Pakai backtick (untuk template literal – dibahas nanti!)
let salam3 = `Halo semua!`;

// 1. Pakai single quote
let salam1 = 'Halo';

// 2. Pakai double quote
let salam2 = "Halo juga";

// 3. Pakai backtick (untuk template literal – dibahas nanti!)
let salam3 = `Halo semua!`;

Semua sah-sah aja. Yang penting konsisten dan nggak campur-campur tanpa alasan.

Fun fact: Kalau kamu nulis 'Halo" (single + double quote), JavaScript bakal marah: “SyntaxError: Unexpected token” — kayak mantan yang tiba-tiba balik tapi nggak jelas maksudnya.

Penulisan String di JavaScript

String dengan tanda kutip

Seperti yang disebut tadi, kamu bisa pakai ' ' atau " ". Keduanya berfungsi sama.

Tapi hati-hati kalau ada kutip di dalam string:

// Ini error!
let ucapan = "Dia bilang "Halo" padaku";

// Solusi: escape character (\)
let ucapan = "Dia bilang \"Halo\" padaku";

// Atau ganti jenis kutip:
let ucapan = 'Dia bilang "Halo" padaku';

// Ini error!
let ucapan = "Dia bilang "Halo" padaku";

// Solusi: escape character (\)
let ucapan = "Dia bilang \"Halo\" padaku";

// Atau ganti jenis kutip:
let ucapan = 'Dia bilang "Halo" padaku';

Perbedaan single quote dan double quote

Secara teknis? Nggak ada bedanya. JavaScript nggak peduli. Tapi tim kamu mungkin peduli

Beberapa developer pakai aturan:

• Single quote untuk string biasa.
• Double quote kalau string itu akan dipakai di HTML (biar nggak bentrok dengan atribut HTML yang pakai double quote).

Contoh praktis:

<!-- Di HTML, atribut pakai double quote -->
<button onclick="alert('Klik saya!')">Klik</button>

<!-- Di HTML, atribut pakai double quote -->
<button onclick="alert('Klik saya!')">Klik</button>

Jadi kalau kamu generate HTML lewat JS, single quote lebih aman:

let button = '<button onclick="alert(\'Klik saya!\')">Klik</button>';

let button = '<button onclick="alert(\'Klik saya!\')">Klik</button>';

Atau… pakai template literals (next section!) biar hidupmu lebih tenang.

Template String (Template Literals)

Penulisan template string

Template literals menggunakan backtick (`) dan memungkinkan:

• Multi-line string
• Interpolasi ekspresi (masukin variabel ke dalam string)

Contoh:

let nama = "Bos";
let umur = 25;

// Tanpa template literal → ribet!
let perkenalan1 = "Halo, nama saya " + nama + ", umur saya " + umur + " tahun.";

// Dengan template literal → elegan!
let perkenalan2 = `Halo, nama saya ${nama}, umur saya ${umur} tahun.`;

let nama = "Bos";
let umur = 25;

// Tanpa template literal → ribet!
let perkenalan1 = "Halo, nama saya " + nama + ", umur saya " + umur + " tahun.";

// Dengan template literal → elegan!
let perkenalan2 = `Halo, nama saya ${nama}, umur saya ${umur} tahun.`;

Multi-line juga jadi gampang:

let puisi = `Di bawah langit biru,<br>aku coding sambil minum kopi,<br>dan nggak ada bug... (semoga).`;

let puisi = `Di bawah langit biru,<br>aku coding sambil minum kopi,<br>dan nggak ada bug... (semoga).`;

Kelebihan template string

Bisa masukin ekspresi apa aja: ${2 + 2}, ${user.name.toUpperCase()}
Nggak perlu escape quote biasa (' atau ")
Bisa multi-line tanpa \n
Lebih mudah dibaca dan dipelihara

Apikabe note: Kalau kamu masih pakai + buat gabungin string di tahun 2026, mungkin waktunya upgrade ke template literals. Masa depan udah datang, Bos!

Properti Panjang String

Setiap string punya properti .length yang otomatis ngasih tahu panjang karakternya.

let teks = "JavaScript itu asik!";
console.log(teks.length); // Output: 21

let teks = "JavaScript itu asik!";
console.log(teks.length); // Output: 21

Termasuk spasi dan tanda baca! Bahkan string kosong punya length:

console.log("".length); // 0

console.log("".length); // 0

Catatan: .length itu properti, bukan method. Jadi jangan tulis teks.length() — nanti error! JavaScript nggak suka dikasih kurung sembarangan.

Method Dasar String

Mengubah teks

Beberapa method populer:

let kalimat = "Belajar JavaScript itu seru!";

// Jadikan huruf besar
console.log(kalimat.toUpperCase()); // "BELAJAR JAVASCRIPT ITU SERU!"

// Jadikan huruf kecil
console.log(kalimat.toLowerCase()); // "belajar javascript itu seru!"

// Hapus spasi di awal/akhir
let kotor = "   halo   ";
console.log(kotor.trim()); // "halo"

let kalimat = "Belajar JavaScript itu seru!";

// Jadikan huruf besar
console.log(kalimat.toUpperCase()); // "BELAJAR JAVASCRIPT ITU SERU!"

// Jadikan huruf kecil
console.log(kalimat.toLowerCase()); // "belajar javascript itu seru!"

// Hapus spasi di awal/akhir
let kotor = "   halo   ";
console.log(kotor.trim()); // "halo"

Mengambil bagian string

Gunakan:

• .slice(start, end)
• .substring(start, end)
• .substr(start, length) ← deprecated, hindari!

Contoh:

let kata = "Programming";

console.log(kata.slice(0, 4));     // "Prog"
console.log(kata.slice(-3));       // "ing" (ambil dari belakang)
console.log(kata.substring(4, 7)); // "ram"

let kata = "Programming";

console.log(kata.slice(0, 4));     // "Prog"
console.log(kata.slice(-3));       // "ing" (ambil dari belakang)
console.log(kata.substring(4, 7)); // "ram"

Perbedaan slice vs substring:

• slice() bisa pakai angka negatif.
• substring() mengabaikan angka negatif (dianggap 0).

Mencari Teks dalam String

Pencarian teks sederhana

• .includes() → cek apakah ada substring
• .startsWith() / .endsWith() → cocok buat validasi

let email = "bos@jarvis.dev";

console.log(email.includes("@"));        // true
console.log(email.startsWith("bos"));    // true
console.log(email.endsWith(".com"));     // false

let email = "bos@jarvis.dev";

console.log(email.includes("@"));        // true
console.log(email.startsWith("bos"));    // true
console.log(email.endsWith(".com"));     // false

Posisi dan keberadaan string

• .indexOf() → cari posisi pertama, kembalikan -1 kalau nggak ketemu
• .lastIndexOf() → cari dari belakang

let kalimat = "Kucing tidur di atas kasur";

console.log(kalimat.indexOf("tidur"));      // 7
console.log(kalimat.indexOf("anjing"));     // -1 (nggak ada)
console.log(kalimat.lastIndexOf("a"));      // 22 (posisi 'a' terakhir)

let kalimat = "Kucing tidur di atas kasur";

console.log(kalimat.indexOf("tidur"));      // 7
console.log(kalimat.indexOf("anjing"));     // -1 (nggak ada)
console.log(kalimat.lastIndexOf("a"));      // 22 (posisi 'a' terakhir)

Tips: Kalau kamu cuma mau tahu “ada atau nggak”, pakai .includes(). Kalau butuh posisi, pakai .indexOf().

Referensi Method String JavaScript

Gambaran umum method string

JavaScript punya puluhan method string! Beberapa yang sering dipakai:

Contoh cepat:

"ha".repeat(3); // "hahaha"
"apple,banana,orange".split(","); // ["apple", "banana", "orange"]
"Hello World".replace("World", "Bos"); // "Hello Bos"

"ha".repeat(3); // "hahaha"
"apple,banana,orange".split(","); // ["apple", "banana", "orange"]
"Hello World".replace("World", "Bos"); // "Hello Bos"

Kapan menggunakan referensi

Saat kamu:

• Lupa cara pakai .padStart() atau .localeCompare()
• Butuh solusi cepat buat manipulasi teks
• Ingin optimalkan performa (misal: hindari loop manual buat cari teks)

Rekomendasi: Bookmark MDN Web Docs – String. Itu seperti kamus JavaScript resmi lengkap, akurat, dan gratis!

Kamu udah punya senjata lengkap buat mengolah teks di JavaScript. Dari bikin string sederhana sampai manipulasi canggih pakai method dan template literals—semua udah kita bahas dengan contoh yang bisa langsung dicoba.

Ingat: String itu immutable, jadi setiap operasi bikin string baru. Jangan heran kalau performa jadi lambat kalau kamu “menggabung” string dalam loop besar—itu saatnya pertimbangkan Array.join() atau StringBuilder pattern (tapi itu cerita lain!).

Terus eksplor, terus coba, dan jangan takut salah. Toh, error itu cuma JavaScript-nya yang protes bukan manusia.