#3 – Mengenal String dalam JavaScript: Panduan Lengkap untuk Pemula

ByMukhlis MJ

“Semua yang ada di layar komputer bisa jadi string.”
Kalimat, huruf, angka (yang dibungkus kutip), bahkan spasi—semuanya bisa jadi string!

Kalau kamu baru belajar JavaScript, atau baru denger istilah string, tenang… kamu sedang membaca artikel yang tepat. Kali ini kita akan bahas apa itu string dalam JavaScript, kenapa penting, bagaimana cara pakainya, sampai ke trik-trik sederhana yang bisa langsung kamu coba.

mengenal string pada javascript

🧠 Apa Itu String?

String adalah teks. Secara teknis, string adalah kumpulan karakter yang disusun berurutan.

Dalam JavaScript, string ditulis di dalam tanda kutip:

"Ini adalah string"
'Ini juga string'
`Dan ini pun string`

Tiga Jenis Tanda Kutip:

  • "kutip dua" – paling sering dipakai
  • 'kutip satu'
  • `backtick` – spesial, bisa menyisipkan variabel

🎯 Kenapa String Itu Penting?

Karena hampir semua interaksi manusia dengan komputer berbentuk teks. Mulai dari:

  • Menampilkan pesan ke pengguna
  • Menyimpan nama, alamat, email, dll.
  • Membuat chatbot
  • Mengatur input pengguna

Tanpa string, aplikasi nggak bisa “berbicara” ke pengguna.

💡 Cara Membuat String

Cukup tulis teks di dalam tanda kutip:

let nama = "Mukhlis";
let ucapan = 'Selamat pagi!';
let umur = "25"; // meskipun ini angka, selama ada tanda kutip, ini string

🔍 Mengenal Properti dan Metode String

Setelah kamu punya string, kamu bisa mengolah dan memanipulasi string itu. Berikut fitur penting yang perlu kamu tahu:

1. length – Menghitung Jumlah Karakter

let kata = "JavaScript";
console.log(kata.length); // Output: 10

2. Mengakses Karakter dengan Index

String di JavaScript bisa diakses seperti array:

let teks = "Halo";
console.log(teks[0]); // H
console.log(teks[1]); // a

Catatan: index dimulai dari 0 ya, bukan 1.

✂️ Metode String Populer

toUpperCase() dan toLowerCase()

Ubah huruf menjadi kapital atau kecil semua.

let kalimat = "Belajar JavaScript";
console.log(kalimat.toUpperCase()); // BELAJAR JAVASCRIPT
console.log(kalimat.toLowerCase()); // belajar javascript

trim() – Menghapus Spasi di Awal dan Akhir

let input = "   halo dunia   ";
console.log(input.trim()); // "halo dunia"

includes() – Cek Apakah Teks Mengandung Kata Tertentu

let kalimat = "Saya suka coding";
console.log(kalimat.includes("coding")); // true

replace() – Ganti Teks

let kata = "Aku lapar";
console.log(kata.replace("lapar", "kenyang")); // Aku kenyang

Hanya mengganti kata pertama yang ditemukan, bukan semuanya.

split() – Memecah String Menjadi Array

let daftar = "apel,jeruk,mangga";
let buah = daftar.split(",");
console.log(buah); // ["apel", "jeruk", "mangga"]

slice() – Memotong Bagian String

let teks = "Belajar JavaScript itu menyenangkan!";
console.log(teks.slice(8, 18)); // JavaScript

🧪 Interpolasi: Gabung String dan Variabel

Gunakan backtick (`) dan ${} untuk menyisipkan variabel:

let nama = "Mukhlis";
let umur = 25;
let salam = `Halo, nama saya ${nama}, umur saya ${umur} tahun.`;
console.log(salam);

🔁 Menggabungkan String

Cara 1: Pakai +

let depan = "Halo";
let belakang = "dunia";
console.log(depan + " " + belakang); // Halo dunia

Cara 2: Pakai concat()

let hasil = depan.concat(" ", belakang);
console.log(hasil); // Halo dunia

🧨 Kesalahan Umum Pemula

1. Lupa tanda kutip

let kata = Belajar; // ❌ error
let kata = "Belajar"; // ✅ benar

2. Lupa spasi saat menggabungkan

let a = "Halo";
let b = "Dunia";
console.log(a + b); // HaloDunia ❌
console.log(a + " " + b); // Halo Dunia ✅

3. Kebingungan antara angka dan string angka

let umur = "25"; // string
let umurAngka = 25; // number

console.log(umur + 5); // "255" ❌
console.log(umurAngka + 5); // 30 ✅

🔍 String vs Number

Tipe Contoh Deskripsi
String “25” Teks
Number 25 Angka sebenarnya

Kalau kamu mau konversi string ke number:

let umur = "30";
let angka = Number(umur); // 30

🔐 String Itu Immutable (nggak bisa diubah langsung)

let nama = "Budi";
nama[0] = "S";
console.log(nama); // tetap "Budi", bukan "Sudi"

Kalau mau ubah, bikin string baru:

let nama = "Budi";
nama = "S" + nama.slice(1);
console.log(nama); // Sudi

🔁 Looping String

let teks = "Halo";
for (let i = 0; i < teks.length; i++) {
  console.log(teks[i]);
}
// Output: H, a, l, o

🧩 Bonus: Escape Character

Kadang kita butuh menulis tanda kutip di dalam string:

let ucapan = "Dia bilang: "Saya bisa!"";
console.log(ucapan); // Dia bilang: "Saya bisa!"

Karakter spesial lain:

  • n = baris baru
  • t = tab

✍️ Contoh Nyata Pemakaian String

1. Validasi Nama Pengguna

let nama = prompt("Masukkan nama Anda:");
if (nama.trim() === "") {
  alert("Nama tidak boleh kosong!");
}

2. Menyapa Pengguna

let nama = "Mukhlis";
console.log(`Halo, ${nama}! Selamat datang.`);

3. Membuat Slug dari Judul Artikel

let judul = "Belajar JavaScript dari Nol!";
let slug = judul.toLowerCase().replace(/ /g, "-").replace(/[^w-]/g, "");
console.log(slug); // belajar-javascript-dari-nol

🧠 Kesimpulan

String adalah fondasi penting dalam JavaScript karena hampir semua teks yang kamu lihat dan gunakan dalam aplikasi berbasis web menggunakan string di balik layar.

Rangkuman:

  • String = teks dalam kutip
  • Bisa dihitung panjangnya (length)
  • Bisa diubah (toUpperCase, replace, dll.)
  • Bisa digabung (+, concat)
  • Bisa diekstrak (slice, split)

🚀 Latihan Mandiri

Coba kerjakan ini di console browser:

  1. Buat variabel nama dan tampilkan “Halo, [namamu]!”
  2. Ubah kalimat “saya sedang belajar” menjadi huruf kapital semua
  3. Pisahkan kalimat “apel,jeruk,mangga” menjadi array
  4. Ambil huruf terakhir dari “JavaScript”
  5. Cek apakah kata “belajar” ada di “saya suka belajar JavaScript”

📚 Tambahan Lanjutan: Metode String Lain yang Berguna

startsWith() & endsWith() – Cek Awalan dan Akhiran

let pesan = "Selamat pagi dunia!";
console.log(pesan.startsWith("Selamat")); // true
console.log(pesan.endsWith("dunia!")); // true

repeat() – Ulangi String

let ha = "ha";
console.log(ha.repeat(3)); // "hahaha"

padStart() & padEnd() – Menambah Karakter di Awal atau Akhir

let angka = "7";
console.log(angka.padStart(3, "0")); // "007"
console.log(angka.padEnd(4, "*"));   // "7***"

charAt() & charCodeAt() – Ambil Karakter dan Kode ASCII

let teks = "Ayo";
console.log(teks.charAt(1));     // "y"
console.log(teks.charCodeAt(1)); // 121 (kode ASCII untuk "y")

codePointAt() – Mendukung Unicode Lebih Lengkap

let emoji = "💖";
console.log(emoji.codePointAt(0)); // 128150

normalize() – Menormalkan Unicode (jarang tapi penting)

let kata1 = "café";
let kata2 = "cafeu0301"; // huruf e + aksen terpisah
console.log(kata1 === kata2); // false
console.log(kata1.normalize() === kata2.normalize()); // true

localeCompare() – Bandingkan Dua String Secara Lokal

let a = "apel";
let b = "jeruk";
console.log(a.localeCompare(b)); // -1 artinya "apel" sebelum "jeruk"

valueOf() & toString() – Konversi ke Nilai Primitif

let teks = new String("Belajar");
console.log(teks.valueOf()); // "Belajar"
console.log(teks.toString()); // "Belajar"

🧪 Metode Regex Lanjutan

matchAll() – Cocokkan Semua Hasil Regex

let teks = "Email: user1@mail.com dan user2@mail.com";
let hasil = teks.matchAll(/w+@w+.w+/g);
for (let email of hasil) {
  console.log(email[0]);
}
// Output:
// user1@mail.com
// user2@mail.com

search() – Cari Index Cocokan Regex

let kalimat = "Belajar JavaScript itu seru";
let posisi = kalimat.search(/java/i);
console.log(posisi); // 8

🧠 Tips Belajar String Lebih Dalam

  • Coba string method langsung di console browser
  • Gunakan MDN Web Docs untuk referensi lengkap
  • Buat mini project yang melibatkan input/output teks seperti kalkulator, chatbot, atau form validasi

🎯 Penutup

String di JavaScript itu kaya fitur dan fleksibel. Kalau kamu sudah menguasai string, kamu punya fondasi kuat untuk bekerja dengan data teks, user input, hingga integrasi API yang mengandalkan JSON (yang notabene semuanya berbentuk string).

“Semua hal besar dimulai dari satu… string.”
(yaelah 😅)

Kalau kamu konsisten latihan, memahami string akan sangat memudahkan belajar ke tahap berikutnya seperti array, DOM, dan bahkan backend development.

Similar Posts