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.

Di panduan ini kamu akan belajar metode string dari nol: apa itu string method, 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 bikin 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. Mari bahas satu per satu 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. Sangat 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. Sangat 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:

Coba Sendiri

string methods

Isi variabel teks (boleh diedit)

Memanggilteks.toUpperCase()

Hasil kembalian" HALO DUNIA "string

Input asli tetap: " Halo Dunia " , string tidak berubah. Setiap method mengembalikan string baru, bukan mengubah yang asli.

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 bikin bingung karena ketiganya sama-sama “mengambil sepotong string”, tapi cara kerjanya berbeda. Berikut perbandingan lengkapnya:

Method	Argumen	Menerima indeks negatif?	Status
`slice(awal, akhir)`	posisi awal & akhir	Ya (hitung dari belakang)	Direkomendasikan
`substring(awal, akhir)`	posisi awal & akhir	Tidak (negatif dianggap 0)	Boleh dipakai
`substr(awal, panjang)`	posisi awal & panjang	Ya (untuk argumen awal)	Deprecated (hindari)

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:

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

Cek Pemahaman

Setelah menjalankan kode: let kata = "hallo"; kata.toUpperCase(); lalu console.log(kata), apa yang tercetak?

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 adalah salah satu keterampilan dasar yang akan kamu pakai di hampir setiap proyek, dari validasi form sampai memformat data dari API. Kunci menguasainya bukan menghafal, tapi banyak mencoba: edit teks, jalankan method, dan perhatikan hasil kembaliannya. 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.

Apa Itu String Method?

Sifat Paling Penting: String Itu Immutable

String Method yang Paling Sering Dipakai

.length, menghitung jumlah karakter

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

.trim(), menghapus spasi di ujung

.slice(), mengambil sepotong string

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

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

.split(), memecah string jadi array

.charAt(), mengambil satu karakter