K

Command Palette

Search for a command to run...

Daftar

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:

  1. Pake Kutip Tunggal ('...'):

    javascript
    let namaHewan = 'Kucing Oren';
    let pesanSingkat = 'Halo!';
  2. 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
  3. 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!

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.
javascript
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).

javascript
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:

  1. 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
  2. Mencari Teks di Dalem String:

    • indexOf(substring, startIndex): Nyari kemunculan pertama substring di dalem string. Ngembaliin indeks (posisi) pertama dari substring itu (indeks dimulai dari 0). Kalau gak ketemu, hasilnya -1. startIndex itu opsional, buat mulai nyari dari indeks tertentu.
    • lastIndexOf(substring, endIndex): Mirip indexOf, tapi nyarinya dari belakang.
    • includes(substring, startIndex): Ngecek apakah string mengandung substring. Ngembaliin true atau false. (ES6)
    • startsWith(substring, startIndex): Ngecek apakah string diawali dengan substring. Ngembaliin true atau false. (ES6)
    • endsWith(substring, endIndex): Ngecek apakah string diakhiri dengan substring. Ngembaliin true atau false. (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
  3. Mengambil Sebagian String (Substring):

    • slice(startIndex, endIndex): Ngambil potongan string dari startIndex sampe sebelum endIndex. endIndex opsional, kalau gak ada, diambil sampe akhir string. Bisa pake indeks negatif (ngitung dari belakang).
    • substring(startIndex, endIndex): Mirip slice, tapi perlakuannya beda kalau startIndex > endIndex atau ada nilai negatif (biasanya slice lebih disukai karena lebih konsisten).
    • substr(startIndex, length): (Udah deprecated, jangan dipake lagi!) Dulu dipake buat ngambil potongan string dari startIndex sepanjang length 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)
  4. Mengganti Bagian String:

    • replace(searchValue, replaceValue): Nyari searchValue (bisa string atau Regular Expression) dan ngegantinya dengan replaceValue. Cuma ngeganti kemunculan pertama aja kalau searchValue itu string.
    • replaceAll(searchValue, replaceValue): (ES2021) Mirip replace, tapi ngeganti semua kemunculan searchValue. Kalau mau ganti semua pake replace biasa, searchValue-nya harus Regular Expression dengan flag g (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")); 
  5. Mengubah String Jadi Array dan Sebaliknya:

    • split(separator): Mecah string jadi array berdasarkan separator. 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"]
  6. Menghilangkan Spasi Ekstra:

    • trim(): Ngilangin spasi (whitespace) dari awal DAN akhir string.
    • trimStart() (atau trimLeft()): Ngilangin spasi dari awal string aja.
    • trimEnd() (atau trimRight()): Ngilangin spasi dari akhir string aja.
    javascript
    let inputPengguna = "   banyak spasi   ";
    console.log("'" + inputPengguna.trim() + "'"); // Output: 'banyak spasi'
  7. Mengakses Karakter Individual:

    • Kamu bisa ngakses karakter di posisi tertentu pake kurung siku [] (kayak di array), atau pake metode charAt(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 string nama jadi "LavaScript". Metode string selalu ngembaliin string baru.

Menggabungkan String (Konkatenasi)

Selain pake template literals, kamu juga bisa gabungin string pake operator + atau metode concat().

javascript
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+)?