Cara Memotong String di JavaScript dengan slice dan substr

Kamu punya nama lengkap “Budi Santoso” dari input form, lalu ingin menampilkan hanya nama depannya di header. Di kasus lain, kamu perlu memotong nomor telepon supaya kode negaranya hilang. Untuk kebutuhan semacam ini, JavaScript menyediakan beberapa metode pemotongan string. Memilih yang tepat akan menghindarkanmu dari hasil tak terduga, terutama saat indeks negatif muncul.

Kenapa String Perlu Dipotong

String di JavaScript bersifat immutable. Metode seperti slice tidak mengubah teks asli, melainkan mengembalikan string baru berisi bagian yang diambil. Dari situ kamu selalu memegang dua variabel berbeda: sumber dan hasil potongan. Pola ini penting saat memproses data dari form atau API, sebab string awal tetap bisa dipakai untuk keperluan lain.

Semua metode di bawah bekerja dengan indeks karakter. Karakter pertama berada di indeks 0, bukan 1. Kalau kamu belum terbiasa menghitung dari nol, ingat saja bahwa indeks adalah jumlah karakter yang dilewati dari awal.

Cara Memotong String di JavaScript dengan slice

slice(start, end) mengambil karakter mulai dari indeks start sampai sebelum indeks end. Parameter end opsional. Kalau dihilangkan, slice mengambil sampai akhir string.

const nama = "Budi Santoso";

console.log(nama.slice(0, 4));   // "Budi"
console.log(nama.slice(5));      // "Santoso"
console.log(nama.slice(-7));     // "Santoso"
console.log(nama.slice(5, -1));  // "Santos"

Perhatikan indeks negatif. Di slice, angka negatif dihitung dari ujung string. -7 berarti tujuh karakter sebelum akhir. Inilah ciri khas slice, dan sering dipakai untuk mengambil ekstensi file atau potongan terakhir dari sebuah string.

Kasus praktis: mengambil ekstensi file

const file = "laporan-bulanan.pdf";
const ekstensi = file.slice(file.lastIndexOf(".") + 1);
console.log(ekstensi); // "pdf"

Baris di atas mencari posisi titik terakhir, lalu memotong satu karakter setelahnya. Teknik ini lebih aman daripada memakai indeks tetap, karena panjang nama file bisa berubah.

Membedakan substring dengan slice

substring(start, end) hampir sama dengan slice, dengan dua perbedaan. Pertama, angka negatif dianggap nol. Kedua, kalau start lebih besar dari end, kedua nilai ditukar otomatis.

const nama = "Budi Santoso";

console.log(nama.substring(4, 0));   // "Budi"
console.log(nama.substring(-3));     // "Budi Santoso"
console.log(nama.slice(4, 0));       // ""

Di contoh ketiga, slice mengembalikan string kosong karena start lebih besar dari end. substring diam-diam menukar posisinya. Perilaku ini menjelaskan mengapa substring terasa lebih pemaaf untuk pemula, tetapi juga bisa menutupi bug logika di kode yang lebih panjang.

Catatan tentang substr

substr(start, length) memotong mulai dari start sebanyak length karakter. Parameter keduanya bukan indeks akhir, melainkan jumlah karakter yang diambil.

const nama = "Budi Santoso";

console.log(nama.substr(5, 3));  // "San"
console.log(nama.substr(-7, 3)); // "San"

Metode ini dianggap warisan lama dan tidak lagi disarankan untuk kode baru. Sebagian besar panduan gaya JavaScript modern menyarankan slice karena perilakunya lebih konsisten. Kalau kamu menemukan substr di kode lama, pahami dulu cara kerjanya sebelum menggantinya supaya hasilnya tidak berubah.

Tabel Perbandingan Tiga Metode

Kesalahan yang Sering Terjadi

Beberapa jebakan muncul berulang saat pemula mulai memotong string. Mengenali pola ini menghemat waktu debugging.

• Lupa bahwa indeks dimulai dari 0. Mengambil nama.slice(1, 4) bukan berarti satu karakter pertama, melainkan karakter kedua sampai keempat.
• Mengira end bersifat inklusif. Karakter pada indeks end tidak ikut diambil.
• Memakai substring dengan nilai negatif, lalu bingung kenapa hasilnya sama seperti tanpa parameter.
• Mengira string asli berubah. Semua metode ini mengembalikan nilai baru tanpa menyentuh variabel asal.

Supaya lebih yakin, coba beberapa contoh di konsol browser sebelum menerapkannya di proyek. Kalau kamu masih membangun dasar JavaScript, mulailah dari tips praktis belajar JavaScript untuk pemula agar pola indeks dan tipe data tidak terasa asing.

Kapan Memakai Masing-masing

Untuk kode baru, slice adalah pilihan utama karena mendukung indeks negatif dan perilakunya bisa diprediksi. Pakai substring kalau kamu memang ingin menukar posisi secara otomatis tanpa memeriksa nilai, misalnya saat mengambil rentang dari dua variabel yang urutannya belum pasti. Hindari substr pada kode yang akan dirawat jangka panjang.

Kalau kamu memotong teks untuk ditampilkan di halaman, hasil potongan biasanya langsung disisipkan ke elemen. Cara menaruhnya ke DOM bisa kamu lihat di panduan menampilkan data ke halaman web dengan JavaScript. Untuk potongan yang berulang dan panjang, simpan dulu di variabel agar tidak memanggil metode yang sama berkali-kali.

Memotong string di JavaScript bertumpu pada satu ide: ambil rentang indeks, hasilnya selalu string baru. slice menangani angka negatif dengan baik, substring menukar posisi otomatis, dan substr lebih baik ditinggalkan. Uji contohnya di konsol, lalu sesuaikan dengan kebutuhan pemotonganmu.

Pertanyaan yang Sering Diajukan

Apa bedanya slice dan substring di JavaScript?

slice menghitung indeks negatif dari ujung string, sedangkan substring menganggapnya nol. Selain itu, substring menukar posisi start dan end kalau nilainya terbalik, sementara slice langsung mengembalikan string kosong.

Apakah slice mengubah string asli?

Tidak. String di JavaScript tidak bisa diubah. slice mengembalikan string baru, dan variabel sumber tetap berisi teks lengkap seperti semula.

Bagaimana cara mengambil tiga karakter terakhir dari sebuah string?

Pakai str.slice(-3). Angka negatif di slice dihitung mundur dari akhir string, sehingga langsung memberi tiga karakter terakhirnya tanpa perlu tahu panjang string.