Sign in Subscribe
Javascript

Pahami Substring dan Substr di JavaScript, Pilih yang Tepat!

Pahami Substring dan Substr di JavaScript, Pilih yang Tepat!
Photo by Tonik / Unsplash

Ketika bekerja dengan string di JavaScript, ada kalanya kamu perlu memotong bagian tertentu dari sebuah teks. Misalnya, mengambil nama depan dari sebuah nama lengkap atau hanya memerlukan beberapa karakter dari suatu string. Nah, JavaScript menyediakan dua metode populer untuk tugas ini, yaitu substring() dan substr(). Tapi, mana yang lebih cocok buat kamu? Yuk, kita pahami keduanya biar kamu bisa pilih metode yang paling tepat!

Apa Itu substring() dan substr()?

substring()

Metode substring() digunakan untuk mengambil sebagian string berdasarkan posisi awal dan posisi akhir yang kamu tentukan. Karakter pada posisi akhir tidak termasuk dalam hasil.

Sintaks:

string.substring(start, end);
  • start: Posisi awal (indeks) dari karakter yang ingin diambil.
  • end (opsional): Posisi akhir string yang ingin diambil (tidak termasuk). Jika tidak disertakan, maka akan mengambil hingga akhir string.

substr()

Metode substr() digunakan untuk mengambil sebagian string berdasarkan posisi awal dan panjang karakter yang ingin diambil.

Sintaks:

string.substr(start, length);
  • start: Posisi awal (indeks) dari karakter yang ingin diambil.
  • length (opsional): Jumlah karakter yang ingin diambil.

Perbedaan Utama substring() dan substr()

Aspek substring() substr()
Parameter Start dan End Start dan Length
Cara Kerja Berdasarkan posisi awal dan akhir Berdasarkan posisi awal dan panjang teks
Ketersediaan Masih digunakan luas di JavaScript Mulai dianggap deprecated (tidak disarankan)
Fleksibilitas Cocok untuk mengambil teks hingga posisi tertentu Cocok untuk mengambil jumlah karakter tertentu

Contoh Penggunaan substring() dan substr()

Menggunakan substring()

Misalnya, kamu punya string dan ingin mengambil nama depan saja.

let teks = "John Doe";
let namaDepan = teks.substring(0, 4);
console.log(namaDepan); // Output: John

Karakter pada indeks 4 (spasi) tidak termasuk dalam hasil.

Menggunakan substr()

Kalau kamu ingin mengambil karakter tertentu sebanyak jumlah tertentu.

let teks = "John Doe";
let namaDepan = teks.substr(0, 4);
console.log(namaDepan); // Output: John

Hasilnya sama dengan substring(), tapi logikanya berbeda. Di sini, 4 menunjukkan panjang string yang diambil, bukan posisi akhir.

Kapan Harus Memilih substring()?

Fleksibilitas Parameter
Kalau kamu ingin menukar parameter start dan end, substring() akan tetap bekerja dengan benar.Contoh:

let teks = "JavaScript";
console.log(teks.substring(4, 0)); // Output: Java

Ketika Kamu Mengetahui Posisi Akhir
Jika kamu sudah tahu posisi awal dan akhir teks yang ingin diambil, gunakan substring().Contoh:

let teks = "JavaScript Developer";
let job = teks.substring(11, 21); // Mengambil kata "Developer"
console.log(job); // Output: Developer

Kapan Harus Memilih substr()?

  1. String dengan Panjang Dinamis
    Jika kamu tidak tahu posisi akhir tetapi tahu panjang karakter yang ingin diambil, ini pilihan yang pas.

Jika Fokus pada Panjang Karakter
Gunakan substr() saat kamu hanya butuh jumlah karakter tertentu mulai dari posisi tertentu.Contoh:

let teks = "JavaScript Developer";
let bagian = teks.substr(11, 9); // Mengambil "Developer"
console.log(bagian); // Output: Developer

Perhatian: substr() Mulai Deprecated

Meskipun substr() masih berfungsi di banyak browser, metode ini mulai dianggap deprecated oleh spesifikasi JavaScript modern. Artinya, di masa depan, metode ini mungkin tidak lagi didukung. Oleh karena itu, jika memungkinkan, disarankan untuk menggunakan substring() atau alternatif seperti slice().

Studi Kasus: Manipulasi String

Ekstrak Nama Domain dari URL

Bayangkan kamu ingin mengambil nama domain dari sebuah URL.

let url = "https://idcsharp.com";
let domain = url.substring(8); // Menghapus "https://"
console.log(domain); // Output: idcsharp.com

Ambil Karakter Terbatas

Misalnya, kamu ingin mengambil 5 karakter pertama dari string.

let teks = "JavaScript is fun!";
let hasil = teks.substr(0, 5); // Mengambil "JavaS"
console.log(hasil); // Output: JavaS

Kesimpulan

Baik substring() maupun substr() punya kelebihan masing-masing. Pilihan terbaik tergantung pada kebutuhan:

  • Gunakan substring() jika kamu lebih fokus pada posisi awal dan akhir.
  • Gunakan substr() jika kamu lebih fokus pada jumlah karakter yang diambil (meskipun harus hati-hati karena mulai deprecated).

Selalu pilih metode yang paling sesuai dengan kebutuhan proyek kamu. Dan yang paling penting, coba langsung di editor kamu untuk lebih memahami cara kerjanya. Selamat mencoba dan happy coding!

Read next