String Method JavaScript Adalah: Panduan Lengkap Metode String untuk Pemula

String method adalah fungsi bawaan JavaScript yang kamu pakai untuk mengolah teks: mengubah huruf jadi kapital, memotong sebagian karakter, menghapus spasi berlebih, mencari kata, sampai memecah kalimat jadi daftar kata. Setiap kali kamu bekerja dengan teks (nama pengguna, alamat email, isi form, judul artikel), hampir pasti kamu memanggil salah satu string method ini. Kabar baiknya: method-method ini sudah tersedia langsung di setiap string tanpa perlu install apa pun; tinggal kamu panggil dengan titik (.) di belakang teksnya.

Kita mulai dari nol: apa itu string method, method yang paling sering dipakai beserta contohnya, satu sifat penting bernama immutability yang wajib kamu pahami, sampai perbandingan slice vs substring vs substr yang sering membuat bingung. Ada juga playground interaktif supaya kamu bisa langsung mencoba tiap method dan melihat hasilnya secara live.

Apa Itu String Method?

String adalah tipe data untuk menyimpan teks: apa pun yang kamu tulis di dalam tanda kutip, entah kutip ganda ("..."), kutip tunggal ('...'), atau backtick (`...`). Nah, string method adalah aksi yang bisa kamu jalankan pada string tersebut. Bentuknya selalu: nama variabel, titik, lalu nama method dengan tanda kurung di belakangnya.

let teks = "Halo Dunia"

teks.toUpperCase()   // "HALO DUNIA"
teks.length          // 10
teks.includes("Halo") // true

Perhatikan polanya: teks.toUpperCase(). Kita meminta string bernama teks untuk mengubah dirinya jadi huruf besar, dan JavaScript mengembalikan hasilnya. Method yang punya tanda kurung () adalah fungsi yang dijalankan; sedangkan .length tanpa kurung sebenarnya sebuah properti: nilai yang tinggal dibaca, bukan fungsi yang dipanggil. Keduanya sama-sama sering dikelompokkan sebagai “string method” saat belajar karena cara pakainya mirip.

Kalau kamu ingin mendalami konsep ini sambil langsung praktik di browser, ada materi string methods interaktif di Hyper Sheets yang membangun pemahamanmu langkah demi langkah dengan latihan bertahap.

Sifat Paling Penting: String Itu Immutable

Sebelum masuk ke daftar method, ada satu konsep yang WAJIB kamu pahami lebih dulu karena menjadi sumber kebingungan nomor satu bagi pemula: string di JavaScript bersifat immutable, artinya tidak bisa diubah. Setiap string method tidak pernah mengubah string aslinya; ia selalu mengembalikan string baru sebagai hasil.

Coba perhatikan kode ini:

let nama = "budi"

nama.toUpperCase()   // "BUDI" (ini hasil kembalian)
console.log(nama)    // "budi" (yang asli TIDAK berubah!)

Banyak pemula mengira setelah memanggil nama.toUpperCase(), isi variabel nama otomatis berubah jadi "BUDI". Padahal tidak. nama tetap "budi". Kalau kamu ingin menyimpan hasilnya, kamu harus menampung nilai kembaliannya ke sebuah variabel:

let nama = "budi"
let namaBesar = nama.toUpperCase()

console.log(namaBesar)  // "BUDI"
console.log(nama)       // "budi" (aslinya tetap)

String Method yang Paling Sering Dipakai

Berikut method-method yang akan kamu pakai hampir setiap hari, masing-masing dengan contohnya.

.length: menghitung jumlah karakter

.length memberi tahu berapa banyak karakter di dalam string (spasi ikut dihitung). Ini properti, jadi ditulis tanpa tanda kurung.

"JavaScript".length   // 10
"Halo Dunia".length   // 10 (spasi ikut dihitung)
"".length             // 0 (string kosong)

.toUpperCase() dan .toLowerCase(): mengubah besar-kecil huruf

Dua method ini mengubah seluruh huruf jadi kapital atau jadi huruf kecil. Berguna untuk membandingkan teks tanpa peduli besar-kecilnya.

"halo".toUpperCase()   // "HALO"
"HALO".toLowerCase()   // "halo"

.trim(): menghapus spasi di ujung

.trim() membuang spasi (dan baris baru) di awal dan akhir string, tapi tidak mengutak-atik spasi di tengah. Ini wajib dipakai saat memproses input dari form, karena pengguna sering tidak sengaja menekan spasi.

"  halo  ".trim()        // "halo"
"  a b c  ".trim()       // "a b c" (spasi tengah tetap)

.slice(): mengambil sepotong string

.slice(awal, akhir) mengambil bagian string dari indeks awal sampai sebelum indeks akhir. Karakter di posisi akhir tidak ikut terambil.

let teks = "JavaScript"

teks.slice(0, 4)   // "Java"  (indeks 0,1,2,3)
teks.slice(4)      // "Script" (dari indeks 4 sampai habis)
teks.slice(-6)     // "Script" (indeks negatif = hitung dari belakang)

.replace() dan .replaceAll(): mengganti teks

.replace() mengganti kemunculan pertama dari sebuah teks, sedangkan .replaceAll() mengganti semua kemunculan.

"Halo Dunia".replace("Dunia", "JS")      // "Halo JS"
"a-b-c".replace("-", "_")                // "a_b-c" (hanya yang pertama)
"a-b-c".replaceAll("-", "_")             // "a_b_c" (semuanya)

.indexOf() dan .includes(): mencari teks

.indexOf() mengembalikan posisi (indeks) kemunculan pertama sebuah teks, atau -1 kalau tidak ditemukan. .includes() lebih sederhana: ia hanya menjawab true atau false.

"Halo Dunia".indexOf("Dunia")   // 5
"Halo Dunia".indexOf("xyz")     // -1 (tidak ditemukan)
"Halo Dunia".includes("Halo")   // true
"Halo Dunia".includes("xyz")    // false

.split(): memecah string jadi array

.split(pemisah) memecah string menjadi array berdasarkan pemisah yang kamu tentukan. Berguna untuk mengubah kalimat jadi daftar kata, atau memecah data yang dipisah koma.

"Halo Dunia".split(" ")     // ["Halo", "Dunia"]
"a,b,c".split(",")          // ["a", "b", "c"]
"halo".split("")            // ["h", "a", "l", "o"] (per karakter)

Karena .split() menghasilkan array, langkah berikutnya biasanya mengolah array itu dengan array method. Kalau kamu belum kenal array, baca dulu array JavaScript adalah supaya paham cara kerja daftar dan indeksnya.

.charAt(): mengambil satu karakter

.charAt(indeks) mengembalikan satu karakter di posisi tertentu. Cara ini setara dengan mengakses lewat kurung siku seperti pada array.

"Halo".charAt(0)   // "H"
"Halo"[0]          // "H" (cara lain, sama hasilnya)
"Halo".charAt(3)   // "o"

Coba Sendiri: String Method Interaktif

Teori saja tidak cukup. Coba edit teksnya dan klik tiap method di bawah ini. Perhatikan hasil kembalian dan tipenya, lalu lihat baris “input asli tetap” untuk membuktikan bahwa string aslinya memang tidak pernah berubah:

Setelah bermain dengan playground di atas, kamu bisa lanjut mengeksplorasi lebih banyak method dengan latihan yang lebih terstruktur lewat pelajaran string methods di Hyper Sheets.

slice vs substring vs substr: Mana yang Dipakai?

Ini bagian yang paling sering membuat bingung karena ketiganya sama-sama “mengambil sepotong string”, tapi cara kerjanya berbeda. Berikut perbandingan lengkapnya:

Perhatikan perbedaan utamanya. slice dan substring sama-sama menerima posisi awal dan akhir, tapi substr berbeda sendiri: argumen keduanya adalah panjang karakter, bukan posisi akhir. Ini sumber bug klasik kalau kamu tertukar.

let teks = "JavaScript"

teks.slice(0, 4)      // "Java"
teks.substring(0, 4)  // "Java" (sama untuk angka positif)
teks.substr(0, 4)     // "Java" (0=awal, 4=PANJANG, kebetulan sama)

teks.slice(4, 0)      // "" (slice tidak menukar argumen)
teks.substring(4, 0)  // "Java" (substring menukar jadi 0,4!)

Dan ingat, ketiganya tetap tunduk pada aturan immutability yang sama: baik slice, substring, maupun substr tidak mengubah string asli; semuanya mengembalikan string baru. String aslimu akan tetap utuh berapa kali pun kamu memotongnya.

Hubungannya dengan Template Literals

Kalau string method dipakai untuk mengolah teks yang sudah ada, maka template literals dipakai untuk menyusun teks baru dari beberapa nilai. Template literal memakai backtick dan memungkinkan kamu menyisipkan variabel langsung ke dalam string dengan sintaks ${...}:

let nama = "Budi"
let sapaan = `Halo, ${nama}!`   // "Halo, Budi!"

Keduanya sering dipakai bersamaan, misalnya kamu membersihkan input dengan .trim() lalu menyusunnya jadi kalimat dengan template literal. Untuk memahami sintaks backtick dan interpolasi ini lebih dalam, baca template literals adalah yang membahasnya lengkap dengan contoh.

Kesalahan Umum Pemula

Beberapa jebakan yang paling sering menimpa pemula saat bekerja dengan string method:

1. Mengira method mengubah string asli. Ini yang paling sering. teks.toUpperCase() tidak mengubah teks; kamu harus menampung hasilnya. Ingat: string itu immutable.
2. Tertukar antara .length dan indeks terakhir. Karakter terakhir ada di indeks .length - 1, bukan .length.
3. Salah kira argumen kedua substr. Di substr(awal, panjang), argumen kedua adalah panjang karakter, bukan posisi akhir seperti pada slice dan substring.
4. Lupa .trim() pada input form. Spasi yang tidak sengaja terketik di ujung sering membuat perbandingan teks gagal padahal “terlihat sama”.

FAQ Seputar String Method JavaScript

Apa itu string method dengan bahasa sederhana?

String method adalah kemampuan bawaan yang dimiliki setiap teks di JavaScript untuk diolah, seperti mengubah huruf jadi kapital, menghapus spasi, memotong, atau mencari kata. Kamu memanggilnya dengan menaruh titik dan nama method di belakang teks, misalnya "halo".toUpperCase(). Method-method ini sudah tersedia otomatis, jadi kamu tinggal memakainya.

Apakah string method mengubah teks aslinya?

Tidak. String di JavaScript bersifat immutable (tidak bisa diubah). Semua string method mengembalikan string baru sebagai hasil, sementara string aslinya tetap utuh. Kalau kamu ingin menyimpan hasilnya, tampung nilai kembaliannya ke sebuah variabel, misalnya let hasil = teks.trim().

Lebih baik pakai slice atau substring?

Untuk kebanyakan kasus, slice adalah pilihan yang lebih baik karena mendukung indeks negatif (menghitung dari belakang) dan tidak menukar-nukar argumen secara diam-diam. substring masih boleh dipakai, tapi hati-hati karena ia mengubah angka negatif jadi 0 dan menukar argumen jika awal lebih besar dari akhir. Hindari substr karena sudah deprecated.

Apa beda .length dengan method lainnya?

.length adalah sebuah properti, bukan method, jadi ditulis tanpa tanda kurung (teks.length). Ia hanya membaca dan mengembalikan jumlah karakter. Sementara method seperti .trim() atau .toUpperCase() adalah fungsi yang dijalankan, jadi selalu ditulis dengan tanda kurung ().

Lanjut Belajar String Method

String method akan kamu pakai di hampir setiap proyek, dari validasi form sampai memformat data dari API. Cara menguasainya adalah banyak mencoba: edit teks, jalankan method, dan perhatikan hasil kembaliannya. Dan selalu ingat prinsip utamanya: string itu immutable, jadi tampung hasilnya.

Siap praktik langsung? Kerjakan pelajaran string methods interaktif di Hyper Sheets yang bisa langsung kamu jalankan di browser tanpa setup, lengkap dengan latihan bertahap dan umpan balik instan. Setelah itu, lanjutkan ke template literals untuk belajar menyusun teks dinamis, lalu array JavaScript karena .split() yang baru kamu pelajari menghasilkan array yang siap kamu olah lebih lanjut.