String & Metodenya di JS
Lebih dalam tentang tipe data string di JavaScript! Pelajari cara membuat, menggabungkan, mengakses karakter, dan menggunakan berbagai metode string yang berguna.
Jadi Jagoan Olah Teks: Kenalan Sama String dan Metode Ajaibnya di JavaScript!
Udah tau kan kalau String
itu tipe data buat nyimpen teks di JavaScript? Nah, teks ini bukan cuma sekadar pajangan. JavaScript ngasih kita banyak banget "alat" buat ngoprek, ngubah, dan ngedapetin informasi dari string. Alat-alat ini namanya properti dan metode string.
Di bagian ini, kita bakal lebih dalem lagi ngebahas soal string: dari cara bikinnya yang macem-macem, sampe metode-metode keren yang bisa bikin kerjaan olah teks jadi gampang!
Cara Bikin String di JavaScript
Ada tiga cara utama buat bikin string di JavaScript:
-
Pake Kutip Tunggal (
'...'
):javascript let namaHewan = 'Kucing Oren'; let pesanSingkat = 'Halo!';
-
Pake Kutip Ganda (
"..."
):javascript let judulBuku = "Belajar JavaScript dari Nol"; let kota = "Jakarta";
Gak ada beda fungsionalitas antara kutip tunggal dan kutip ganda. Pilih salah satu dan usahakan konsisten di proyekmu. Yang penting, kalau kamu mulai pake kutip tunggal, akhirnya juga harus kutip tunggal, begitu juga sebaliknya. Kamu bisa pake jenis kutip yang beda kalau mau nyisipin kutip di dalem string:
javascript let kutipan = 'Dia berkata, "JavaScript itu seru!"'; // Kutip ganda di dalam kutip tunggal let kutipanLain = "Ini adalah 'kutipan penting' katanya."; // Kutip tunggal di dalam kutip ganda
-
Pake Backtick (
`...`
) - Template Literals (ES6 ke Atas): Ini cara yang lebih modern dan punya beberapa kelebihan super:- String Multi-baris: Kamu bisa nulis string yang terdiri dari beberapa baris tanpa perlu karakter khusus kayak
\n
(newline). - Interpolasi Ekspresi (Expression Interpolation): Kamu bisa nyisipin nilai variabel atau ekspresi JavaScript langsung di dalem string pake sintaks
${...}
. Ini jauh lebih enak dibaca daripada ngegabungin string pake operator+
.
javascript let nama = "Budi"; let umur = 28; // String multi-baris let alamat = `Jalan Kemerdekaan No. 17 Kota Perjuangan Indonesia`; console.log(alamat); // Interpolasi ekspresi let perkenalan = `Halo, nama saya ${nama} dan saya berumur ${umur} tahun.`; console.log(perkenalan); // Output: Halo, nama saya Budi dan saya berumur 28 tahun. let harga = 50000; let diskon = 0.1; // 10% let infoHarga = `Harga setelah diskon: Rp ${harga * (1 - diskon)}`; console.log(infoHarga); // Output: Harga setelah diskon: Rp 45000
Template Literals ini sangat direkomendasikan buat dipake di JavaScript modern!
- String Multi-baris: Kamu bisa nulis string yang terdiri dari beberapa baris tanpa perlu karakter khusus kayak
Karakter Khusus (Escape Characters) di String
Kadang kita butuh nyisipin karakter yang punya makna khusus di string (kayak kutip di dalem string yang diapit kutip sejenis, atau baris baru). Kita bisa pake escape character yaitu backslash (\
).
\'
: Kutip tunggal.\"
: Kutip ganda.\\
: Backslash.\n
: Baris baru (newline).\t
: Tab.- Dan lainnya.
let stringDenganKutip = 'Ini adalah string dengan kutip tunggal di dalamnya: \'Contoh\'.';
console.log(stringDenganKutip);
let stringDenganNewline = "Baris pertama.\nBaris kedua.";
console.log(stringDenganNewline);
Tapi, dengan adanya template literals, kebutuhan buat escape kutip jadi berkurang.
Properti String: length
String di JavaScript punya satu properti bawaan yang berguna banget: length
. Properti ini ngasih tau kita jumlah karakter di dalem string itu (termasuk spasi).
let kalimat = "Belajar JavaScript itu menyenangkan!";
console.log(kalimat.length); // Output: 32
let kata = "Halo";
console.log(kata.length); // Output: 4
Metode-Metode String yang Sering Dipake
JavaScript nyediain banyaaak banget metode (fungsi bawaan yang nempel di objek string) buat manipulasi dan ngedapetin informasi dari string. Metode ini dipanggil pake titik (.
) setelah variabel stringnya. Ingat, sebagian besar metode string ini gak ngubah string aslinya, tapi ngembaliin string baru hasil operasinya.
Ini beberapa yang paling sering kepake:
-
Mengubah Huruf Besar/Kecil:
toUpperCase()
: Ngubah semua karakter jadi huruf besar.toLowerCase()
: Ngubah semua karakter jadi huruf kecil.
javascript let nama = "Budi Santoso"; console.log(nama.toUpperCase()); // Output: BUDI SANTOSO console.log(nama.toLowerCase()); // Output: budi santoso
-
Mencari Teks di Dalem String:
indexOf(substring, startIndex)
: Nyari kemunculan pertamasubstring
di dalem string. Ngembaliin indeks (posisi) pertama darisubstring
itu (indeks dimulai dari 0). Kalau gak ketemu, hasilnya-1
.startIndex
itu opsional, buat mulai nyari dari indeks tertentu.lastIndexOf(substring, endIndex)
: MiripindexOf
, tapi nyarinya dari belakang.includes(substring, startIndex)
: Ngecek apakah string mengandungsubstring
. Ngembaliintrue
ataufalse
. (ES6)startsWith(substring, startIndex)
: Ngecek apakah string diawali dengansubstring
. Ngembaliintrue
ataufalse
. (ES6)endsWith(substring, endIndex)
: Ngecek apakah string diakhiri dengansubstring
. Ngembaliintrue
ataufalse
. (ES6)
javascript let kalimat = "JavaScript adalah bahasa yang seru dan populer."; console.log(kalimat.indexOf("bahasa")); // Output: 17 console.log(kalimat.indexOf("Python")); // Output: -1 (karena gak ada) console.log(kalimat.includes("seru")); // Output: true console.log(kalimat.startsWith("Java")); // Output: true console.log(kalimat.endsWith(".")); // Output: true
-
Mengambil Sebagian String (Substring):
slice(startIndex, endIndex)
: Ngambil potongan string daristartIndex
sampe sebelumendIndex
.endIndex
opsional, kalau gak ada, diambil sampe akhir string. Bisa pake indeks negatif (ngitung dari belakang).substring(startIndex, endIndex)
: Miripslice
, tapi perlakuannya beda kalaustartIndex > endIndex
atau ada nilai negatif (biasanyaslice
lebih disukai karena lebih konsisten).substr(startIndex, length)
: (Udah deprecated, jangan dipake lagi!) Dulu dipake buat ngambil potongan string daristartIndex
sepanjanglength
karakter.
javascript let teksPanjang = "Ini adalah contoh teks yang sangat panjang."; console.log(teksPanjang.slice(0, 10)); // Output: Ini adalah console.log(teksPanjang.slice(11)); // Output: contoh teks yang sangat panjang. console.log(teksPanjang.slice(-8, -1)); // Output: panjang (dari belakang)
-
Mengganti Bagian String:
replace(searchValue, replaceValue)
: NyarisearchValue
(bisa string atau Regular Expression) dan ngegantinya denganreplaceValue
. Cuma ngeganti kemunculan pertama aja kalausearchValue
itu string.replaceAll(searchValue, replaceValue)
: (ES2021) Miripreplace
, tapi ngeganti semua kemunculansearchValue
. Kalau mau ganti semua pakereplace
biasa,searchValue
-nya harus Regular Expression dengan flagg
(global).
javascript let pesan = "Saya suka kopi, kopi itu enak."; console.log(pesan.replace("kopi", "teh")); // Output: Saya suka teh, kopi itu enak. console.log(pesan.replaceAll("kopi", "teh")); // Output: Saya suka teh, teh itu enak. // Pake Regex buat ganti semua dengan replace biasa: // console.log(pesan.replace(/kopi/g, "teh"));
-
Mengubah String Jadi Array dan Sebaliknya:
split(separator)
: Mecah string jadi array berdasarkanseparator
. Kalau separator string kosong (""
), tiap karakter jadi elemen array. Kalau gak ada separator, seluruh string jadi satu elemen array.- (Buat gabungin array jadi string, kita pake metode array
join(separator)
yang bakal dibahas nanti).
javascript let daftarBuah = "apel,jeruk,mangga,pisang"; let arrayBuah = daftarBuah.split(","); console.log(arrayBuah); // Output: ["apel", "jeruk", "mangga", "pisang"] let kata = "HALO"; let arrayHuruf = kata.split(""); console.log(arrayHuruf); // Output: ["H", "A", "L", "O"]
-
Menghilangkan Spasi Ekstra:
trim()
: Ngilangin spasi (whitespace) dari awal DAN akhir string.trimStart()
(atautrimLeft()
): Ngilangin spasi dari awal string aja.trimEnd()
(atautrimRight()
): Ngilangin spasi dari akhir string aja.
javascript let inputPengguna = " banyak spasi "; console.log("'" + inputPengguna.trim() + "'"); // Output: 'banyak spasi'
-
Mengakses Karakter Individual:
- Kamu bisa ngakses karakter di posisi tertentu pake kurung siku
[]
(kayak di array), atau pake metodecharAt(index)
. - Ingat, indeks dimulai dari
0
.
javascript let nama = "JavaScript"; console.log(nama[0]); // Output: J console.log(nama.charAt(4)); // Output: S console.log(nama[nama.length - 1]); // Output: t (karakter terakhir)
Perhatian: String di JavaScript itu immutable (gak bisa diubah). Jadi,
nama[0] = "L";
itu gak bakal ngubah stringnama
jadi "LavaScript". Metode string selalu ngembaliin string baru. - Kamu bisa ngakses karakter di posisi tertentu pake kurung siku
Menggabungkan String (Konkatenasi)
Selain pake template literals, kamu juga bisa gabungin string pake operator +
atau metode concat()
.
let s1 = "Selamat ";
let s2 = "Pagi";
let s3 = "!";
let salamLengkap = s1 + s2 + s3;
console.log(salamLengkap); // Output: Selamat Pagi!
let salamLain = s1.concat(s2, s3, " Apa kabar?");
console.log(salamLain); // Output: Selamat Pagi! Apa kabar?
Template literals (`${...}`
) biasanya cara yang lebih modern dan gampang dibaca buat gabungin string dengan variabel.
String dan metode-metodenya ini bakal sering banget kamu pake pas ngoding JavaScript, entah itu buat nampilin pesan ke pengguna, ngolah input form, atau manipulasi data teks lainnya. Jangan ragu buat nyoba-nyoba semua metode ini di console.log()
biar makin paham cara kerjanya!
Di materi selanjutnya, kita bakal ngulik tipe data Number
dan operasi matematika di JavaScript.
Kuis String dan Metodenya di JavaScript
Pertanyaan 1 dari 5
Manakah cara yang PALING direkomendasikan dan fleksibel untuk membuat string yang mengandung variabel atau ekspresi di JavaScript modern (ES6+)?