Metode String JavaScript Dijelaskan: substr vs substring vs slice (Praktik Terbaik)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

JavaScript adalah bahasa pemrograman penting dalam pengembangan web modern. Khususnya, manipulasi string sering digunakan untuk pemformatan data, parsing, dan pembaruan UI dinamis.

Artikel ini memberikan penjelasan terperinci tentang tiga metode string JavaScript yang umum digunakan—substr, substring, dan slice. Karena metode‑metode ini memiliki fungsi yang serupa, memahami perbedaannya akan membantu Anda memilih yang paling tepat untuk setiap situasi.

Kami juga akan membahas mengapa substr telah deprecated, memperkenalkan alternatif yang direkomendasikan, dan memberikan saran praktis agar kode Anda selaras dengan praktik terbaik JavaScript modern.

2. Gambaran Dasar dan Penggunaan Setiap Metode

Bagian ini menjelaskan sintaks dasar dan penggunaan substr, substring, dan slice secara detail. Dengan memahami setiap metode, Anda dapat memilih yang tepat serta meningkatkan keterbacaan dan pemeliharaan kode.

2.1 Metode substr

Syntax:

string.substr(start, length)

Deskripsi:

• start : Menentukan posisi awal (indeks) untuk ekstraksi. Pengindeksan dimulai dari 0.
• length : Menentukan jumlah karakter yang akan diekstrak. Jika diabaikan, karakter akan diekstrak dari posisi awal hingga akhir string.

Contoh:

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

Catatan Penting:
Metode substr deprecated, dan penggunaannya tidak disarankan dalam pengembangan JavaScript modern. Sebagai gantinya, gunakan slice atau substring sebagai alternatif.

Contoh Alternatif (Menggunakan slice):

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 Metode substring

Sintaks:

string.substring(start, end)

Deskripsi:

• start : Menentukan posisi awal untuk ekstraksi.
• end : Menentukan posisi akhir (karakter pada indeks ini tidak termasuk).

Contoh:

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

Poin Penting:

1. Urutan argumen secara otomatis disesuaikan: Jika substring(10, 4) diberikan, secara otomatis diinterpretasikan sebagai substring(4, 10).
2. Nilai negatif diabaikan: Jika nilai negatif diberikan, akan dianggap sebagai 0.

Alternatif Ketika Nilai Negatif Diperlukan (Menggunakan slice):

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 Metode slice

Sintaks:

string.slice(start, end)

Deskripsi:

• start : Menentukan posisi awal untuk ekstraksi.
• end : Menentukan posisi akhir (karakter pada indeks ini tidak termasuk).

Contoh:

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

Poin Penting:

1. Mendukung nilai negatif: Nilai negatif diinterpretasikan sebagai offset dari akhir string.
2. Berlaku untuk string dan array: Karena slice juga dapat digunakan pada array, metode ini sangat serbaguna.

3. Tabel Perbandingan Setiap Metode

Cara Memilih Berdasarkan Kasus Penggunaan:

• Mengekstrak bagian pendek dari sebuah string: → slice
• Saat indeks negatif diperlukan: → slice
• Kompatibilitas kode lama: → Hindari substr dan migrasikan ke alternatif modern

4. Contoh Kode Praktis

Manipulasi String Dasar

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

Mengekstrak Nilai dari Pola Tertentu

let url = "https://example.com/index.html";

// Get the filename
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. Menangani Metode yang Tidak Direkomendasikan

Dalam JavaScript, metode substr dianggap tidak direkomendasikan. Hal ini karena secara resmi diklasifikasikan sebagai pendekatan yang tidak disarankan dalam spesifikasi ECMAScript terbaru. Bagian ini menjelaskan masalah dengan substr, alternatif yang tersedia, dan strategi migrasi yang praktis.

5.1 Mengapa substr Tidak Direkomendasikan?

1. Keterbacaan rendah:

• Metode substr menentukan jumlah karakter yang akan diambil sebagai argumen keduanya, yang berbeda dari metode lain yang menggunakan posisi mulai dan akhir. Inkonsistensi ini membuat kode lebih sulit dipahami sekilas.

2. Potensi masalah kompatibilitas di masa depan karena perubahan spesifikasi:

• Selama proses standardisasi ECMAScript, fitur lama dapat ditandai sebagai tidak direkomendasikan. Akibatnya, substr sebaiknya dihindari dalam kode baru untuk memastikan kompatibilitas jangka panjang.

3. Tidak mendukung nilai negatif:

• Sementara substr tidak mendukung nilai negatif, slice sepenuhnya mendukung indeks negatif, memungkinkan ekstraksi string yang lebih fleksibel.

5.2 Cara Migrasi ke Metode Alternatif

Kasus 1: Mengambil Substring dengan Panjang Tetap

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"

// Recommended code (slice)
console.log(str.slice(0, 4)); // Output: "Java"

Kasus 2: Mengambil Akhir String

// Deprecated code
console.log(str.substr(-6)); // Error (negative values are not supported)

// Recommended code (slice)
console.log(str.slice(-6)); // Output: "Script"

Kasus 3: Mengambil Bagian dari URL atau Nama File

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // Output: "index.html"

// Recommended code (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // Output: "index.html"

5.3 Tips Refactoring untuk Kode Warisan

1. Jalankan pemindaian kode:

• Gunakan alat seperti ESLint untuk mendeteksi keberadaan substr dalam basis kode Anda.

2. Tingkatkan cakupan pengujian:

• Gunakan unit test untuk memverifikasi perilaku setelah refactoring dan memastikan perubahan tidak menimbulkan regresi.

3. Migrasi secara bertahap:

• Prioritaskan bagian kritis dari basis kode Anda dan ganti metode yang tidak direkomendasikan langkah demi langkah.

5.4 Manfaat Migrasi Menjauh dari substr

1. Keterbacaan dan pemeliharaan yang lebih baik:

• Niat kode menjadi lebih jelas, memudahkan kolaborasi dan pemeliharaan jangka panjang.

2. Keselarasan dengan spesifikasi modern:

• Mematuhi standar ECMAScript memastikan pembaruan dan kompatibilitas di masa depan berjalan lebih mulus.

3. Penanganan nilai negatif yang fleksibel:

• Menggunakan slice memungkinkan ekstraksi mudah dari awal maupun akhir string, menghasilkan kode yang lebih bersih dan ringkas.

6. Pertanyaan yang Sering Diajukan (FAQ)

Bagian ini merangkum pertanyaan umum dan jawaban terkait metode manipulasi string JavaScript, membantu pembaca dengan cepat menyelesaikan keraguan yang biasanya muncul.

Q1: Apakah substr masih dapat digunakan?

A:
Ya, substr masih berfungsi di sebagian besar browser modern. Namun, karena tidak direkomendasikan dalam spesifikasi ECMAScript, sebaiknya dihindari dalam proyek baru atau ketika mempertimbangkan kompatibilitas jangka panjang.

Alternatif yang direkomendasikan:

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

Q2: Apa perbedaan antara slice dan substring?

A:
Tabel di bawah merangkum perbedaan utama antara slice dan substring.

Contoh:

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3: Apa risiko melanjutkan penggunaan metode yang tidak direkomendasikan?

A:
Melanjutkan penggunaan metode yang sudah usang dapat menyebabkan risiko berikut.

1. Akhir dukungan browser: Di masa depan, substr mungkin tidak lagi didukung oleh browser.
2. Biaya pemeliharaan meningkat: Menangani bug atau peringatan yang disebabkan oleh metode yang usang dapat menambah beban yang tidak perlu.
3. Penurunan kualitas kode: Tidak menyesuaikan dengan spesifikasi modern mengurangi keterbacaan dan kemampuan pemeliharaan.

Q4: Metode mana yang terbaik untuk menangani string panjang?

A:
Saat bekerja dengan string panjang, slice adalah pilihan terbaik karena fleksibilitasnya dan dukungan untuk indeks negatif.

Example:

let longText = "This is a very long text string used for testing purposes.";

// Get the first 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Get the last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Bagaimana cara menghitung dari akhir menggunakan nilai negatif?

A:
Meskipun slice mendukung nilai negatif, substring memperlakukan nilai negatif sebagai 0, sehingga perlu berhati-hati.

Example:

let str = "JavaScript";

// Extract from the end using slice
console.log(str.slice(-6));  // "Script"

// substring treats negative values as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: Apakah ada perbedaan kinerja?

A:
Di browser modern, tidak ada perbedaan kinerja yang signifikan antara slice, substring, dan substr. Karena semuanya diimplementasikan sebagai fungsi native, disarankan untuk memprioritaskan keterbacaan dan kemampuan pemeliharaan daripada kinerja.

7. Ringkasan dan Praktik Terbaik yang Direkomendasikan

Artikel ini menjelaskan metode manipulasi string JavaScript—substr, substring, dan slice—dari penggunaan dasar hingga perbedaan utama, contoh praktis, dan strategi untuk menangani metode yang usang.

Bagian ini merangkum setiap metode dan menyoroti praktik terbaik yang direkomendasikan berdasarkan standar JavaScript modern.

7.1 Ringkasan Setiap Metode

7.2 Kriteria Praktis untuk Memilih Metode yang Tepat

1. Gunakan substring untuk ekstraksi rentang sederhana:

• Direkomendasikan saat bekerja dengan string pendek dan tidak memerlukan nilai negatif. Contoh:

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

2. Pilih slice untuk fleksibilitas maksimal:

• Karena mendukung indeks negatif dan menawarkan keanekaragaman yang lebih besar, slice adalah opsi yang paling direkomendasikan untuk kode modern. Contoh:

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. Ganti substr sesegera mungkin:

• Pada basis kode warisan, gantilah substr secara proaktif dengan slice atau substring.

7.3 Praktik Terbaik Modern

1. Prioritaskan keterbacaan:

Menulis kode yang jelas dan ringkas meningkatkan pemeliharaan jangka panjang.

2. Hilangkan metode yang usang:

• Karena substr mungkin dihapus pada pembaruan mendatang, migrasikan secara aktif ke slice atau substring.

3. Gunakan slice ketika nilai negatif diperlukan:

• slice menyediakan ekstraksi mundur yang fleksibel, menjadikannya ideal untuk banyak kasus penggunaan dunia nyata.

7.4 Contoh Gaya Pengkodean

Akhirnya, berikut beberapa contoh manipulasi string modern yang ditulis dalam gaya kode yang bersih dan dapat dipelihara.

// Example: Extracting the domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Extracting a file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 Rencana Tindakan untuk Pembaca

1. Lakukan tinjauan kode:

• Periksa proyek yang ada untuk penggunaan substr dan gantilah dengan slice atau substring bila sesuai.

2. Terapkan praktik terbaik dalam kode baru:

• Ikuti spesifikasi modern dan rancang kode dengan mempertimbangkan keterbacaan serta penanganan indeks negatif.

3. Manfaatkan komentar dan pertanyaan.

• Dorong pertanyaan dan diskusi tentang poin yang tidak jelas atau kasus penggunaan spesifik untuk berbagi pengetahuan dalam komunitas.

Kesimpulan

Artikel ini menjelaskan metode string JavaScript substr, substring, dan slice menggunakan sintaks dasar, contoh penggunaan, dan tabel perbandingan.

• substr sebaiknya dihindari karena sudah tidak direkomendasikan.
• substring cocok untuk kasus penggunaan sederhana.
• slice adalah metode yang paling fleksibel dan direkomendasikan.

Gunakan pengetahuan ini untuk menulis kode JavaScript yang efisien, mudah dibaca, dan dapat dipelihara.

8. Tautan Terkait dan Referensi

Untuk lebih memperdalam pemahaman Anda tentang substr, substring, dan slice, bagian ini menyediakan tautan dan materi referensi yang berguna. Dokumentasi resmi dan sumber belajar akan membantu Anda tetap up‑to‑date dengan spesifikasi terbaru dan teknik lanjutan.

8.1 Dokumentasi Resmi

1. MDN Web Docs – Objek String JavaScript

• Tautan: String – MDN Web Docs
• Deskripsi: Dokumentasi referensi resmi untuk objek String JavaScript, termasuk spesifikasi detail dan contoh untuk setiap metode.

2. Spesifikasi ECMAScript (ECMA-262)

• Tautan: ECMAScript Official Specification
• Deskripsi: Spesifikasi resmi ECMAScript yang merinci fitur bahasa JavaScript, termasuk metode yang sudah tidak direkomendasikan dan pembaruan terbaru.

8.2 Situs Pembelajaran dan Tutorial

1. JavaScript.info – Metode String

• Tautan: JavaScript.info
• Deskripsi: Penjelasan komprehensif tentang manipulasi string, dari dasar hingga kasus penggunaan lanjutan, dengan contoh praktis.

2. Progate – Kursus Pembelajaran JavaScript

• Tautan: Progate
• Deskripsi: Platform pembelajaran interaktif untuk pemula, mencakup dasar-dasar JavaScript melalui coding langsung.

3. Dotinstall – Kursus Pemula JavaScript

• Tautan: Dotinstall
• Deskripsi: Platform pembelajaran berbasis video yang memungkinkan pemahaman cepat dan visual tentang konsep JavaScript.

8.3 Sumber Kode Contoh Praktis

1. GitHub – Proyek Contoh JavaScript

• Tautan: GitHub
• Deskripsi: Pelajari pola JavaScript dunia nyata dan praktik terbaik melalui proyek open‑source.

2. CodePen – Playground Kode Interaktif

• Tautan: CodePen
• Deskripsi: Platform untuk berbagi dan bereksperimen dengan kode JavaScript secara real‑time.

8.4 Buku yang Direkomendasikan

1. JavaScript: The Definitive Guide, 7th Edition (O’Reilly)

• Gambaran: Referensi komprehensif yang mencakup dasar‑dasar JavaScript hingga fitur bahasa terbaru.

2. Modern JavaScript Development Guide (Revised Edition)

• Gambaran: Panduan praktis yang berfokus pada sintaks JavaScript modern dan teknik pengembangan dunia nyata.

8.5 Komunitas dan Forum

1. Stack Overflow

• Tautan: Stack Overflow
• Deskripsi: Komunitas tanya‑jawab global untuk pertanyaan terkait pemrograman dan pemecahan masalah.

2. Qiita

• Tautan: Qiita
• Deskripsi: Platform artikel teknis Jepang yang menampilkan banyak contoh JavaScript praktis.

3. Teratail

• Tautan: Teratail
• Deskripsi: Situs tanya‑jawab Jepang dimana pengembang dapat mengajukan pertanyaan dalam bahasa Jepang.

Ringkasan

Bagian ini memperkenalkan referensi resmi, sumber belajar, repositori kode contoh, dan komunitas pengembang yang terkait dengan manipulasi string JavaScript.

Poin Penting:

1. Verifikasi spesifikasi menggunakan dokumentasi resmi:

• Jadikan kebiasaan untuk memeriksa spesifikasi terbaru dan panduan penggunaan.

2. Perkuat keterampilan praktis melalui tutorial dan contoh kode:

• Pengkodean langsung memperkuat pemahaman teoretis serta aplikasi dunia nyata.

3. Bagikan pengetahuan melalui komunitas pengembang:

• Berpartisipasi dalam diskusi membantu memperluas keahlian dan jaringan profesional Anda.