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

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

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

1. Pendahuluan

JavaScript adalah bahasa pemrograman penting dalam pengembangan web. Khususnya, manipulasi string sering digunakan untuk memformat data, analisis, dan memperbarui UI secara dinamis.
Dalam artikel ini, kami akan menjelaskan secara detail tiga metode string JavaScript yang umum digunakan—substr, substring, dan slice. Karena metode‑metode ini memberikan fungsionalitas yang serupa, memahami perbedaannya akan membantu Anda memilih yang tepat untuk setiap situasi.
Kami juga akan membahas mengapa substr telah ditandai usang dan memberikan pendekatan alternatif, serta memberikan saran praktis untuk menulis JavaScript dengan praktik terbaik modern.

2. Informasi Dasar dan Penggunaan Setiap Metode

Bagian ini menjelaskan sintaks dasar dan penggunaan substr, substring, dan slice. Memahami metode‑metode ini akan membantu Anda memilih yang tepat serta meningkatkan keterbacaan dan pemeliharaan kode.

2.1 Metode substr

Sintaks:

string.substr(start, length)

Deskripsi:

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

Contoh Penggunaan:

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

Catatan:
Metode substr telah usang, dan disarankan untuk tidak menggunakannya dalam kode di masa mendatang. Gunakan slice atau substring sebagai gantinya.

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 : Indeks awal ekstraksi.
• end : Indeks akhir (karakter pada indeks ini tidak termasuk).

Contoh Penggunaan:

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

Poin:

1. Urutan argumen secara otomatis diperbaiki: Jika Anda memanggil substring(10, 4), itu akan diperlakukan sebagai substring(4, 10).
2. Nilai negatif diabaikan: Setiap argumen negatif diperlakukan sebagai 0.

Contoh 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 : Indeks awal ekstraksi.
• end : Indeks akhir (karakter pada indeks ini tidak termasuk).

Contoh Penggunaan:

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

Poin:

1. Mendukung nilai negatif: Indeks negatif dihitung dari akhir string.
2. Bekerja untuk string maupun array: Ia juga dapat mengekstrak elemen dari array, menjadikannya sangat serbaguna.

3. Tabel Perbandingan Setiap Metode

Memilih Metode yang Tepat Berdasarkan Kasus Penggunaan:

• Mengekstrak segmen pendek: → slice
• Saat nilai negatif diperlukan: → slice
• Kompatibilitas kode lama: → Hindari substr; migrasikan bila diperlukan

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 Berdasarkan Pola

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

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

5. Cara Menangani Metode yang Usang

Metode substr pada JavaScript telah usang. Hal ini karena substr telah diklasifikasikan sebagai metode yang tidak direkomendasikan dalam spesifikasi ECMAScript terbaru.
Bagian ini menjelaskan masalah dengan substr, metode alternatif, dan cara memigrasikan kode Anda.

5.1 Mengapa substr Didepresiasi?

1. Keterbacaan yang buruk:

• substr menggunakan argumen kedua sebagai “jumlah karakter yang akan diambil,” yang berbeda dari metode lain yang menggunakan indeks akhir. Ketidakkonsistenan ini membuat kode lebih sulit dipahami.

1. Kemungkinan masalah kompatibilitas di masa depan karena perubahan spesifikasi:

• Fitur lama didepresiasi selama standarisasi ECMAScript. Kode baru seharusnya tidak bergantung pada mereka.

1. Tidak mendukung nilai negatif:

• substr tidak mendukung indeks negatif, sementara slice mendukungnya.

5.2 Cara Migrasi ke Metode Modern

Kasus 1: Mengambil Substring dengan Panjang Tetap

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

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

Kasus 2: Mengambil Akhir String

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

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

Kasus 3: Mengambil Bagian URL atau Nama File

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

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

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

5.3 Poin Refaktorisasi untuk Kode Legacy

1. Lakukan pemindaian kode:

• Gunakan alat seperti ESLint untuk mendeteksi di mana substr digunakan.

1. Perkuat cakupan pengujian:

• Gunakan unit test untuk memastikan perilaku tetap benar setelah mengganti metode.

1. Migrasi secara bertahap:

• Prioritaskan penggantian pada bagian yang penting atau sering dieksekusi.

5.4 Manfaat Migrasi dari substr

1. Keterbacaan dan pemeliharaan yang lebih baik:

• Niat kode menjadi lebih jelas, meningkatkan pemahaman tim.

1. Kompatibilitas dengan standar modern:

• Mengikuti standar ECMAScript memastikan stabilitas jangka panjang.

1. Dukungan fleksibel untuk nilai negatif:

• slice memungkinkan ekstraksi singkat dari posisi awal maupun akhir.

6. Pertanyaan yang Sering Diajukan (FAQ)

Bagian ini merangkum pertanyaan umum dan jawabannya tentang metode manipulasi string JavaScript.

Q1: Masih bisakah saya menggunakan substr?

A: Ya, sebagian besar browser modern masih mendukung substr. Namun, karena ECMAScript menandainya sebagai deprecated, sebaiknya dihindari dalam proyek baru atau basis kode yang memerlukan kompatibilitas di masa depan. Alternatif yang direkomendasikan:

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

Q2: Apa perbedaan antara slice dan substring?

A: Tabel di bawah merangkum perbedaannya:

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 terus menggunakan metode yang deprecated?

A:

1. Kemungkinan penghapusan dukungan browser: substr mungkin akhirnya tidak didukung.
2. Biaya pemeliharaan yang meningkat: Debugging fitur yang deprecated memakan waktu tambahan.
3. Kualitas kode yang menurun: Tidak mengikuti standar modern mengurangi keterbacaan.

Q4: Metode mana yang terbaik untuk string panjang?

A: slice adalah yang terbaik karena mendukung indeks negatif dan menawarkan fleksibilitas tinggi. Contoh:

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

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

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Bagaimana cara menghitung mundur menggunakan nilai negatif?

A: Gunakan slice, karena substring memperlakukan nilai negatif sebagai 0. Contoh:

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

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

Q6: Apakah Ada Perbedaan Performa?

J: Browser modern tidak menunjukkan perbedaan performa utama di antara slice, substring, atau substr. Karena semuanya adalah fungsi native, utamakan keterbacaan dan kemudahan pemeliharaan daripada mikro-optimasi.

7. Ringkasan dan Praktik Terbaik yang Direkomendasikan

Dalam artikel ini, kami mengeksplorasi metode string JavaScript substr, substring, dan slice, mencakup sintaks dasar, perbedaan, contoh kode praktis, dan strategi migrasi untuk metode yang sudah usang. Bagian ini mengatur ulang karakteristik utama dari setiap metode dan menyajikan praktik terbaik modern yang direkomendasikan.

7.1 Ringkasan Setiap Metode

7.2 Kriteria Pemilihan Praktis

1. Gunakan substring untuk ekstraksi rentang sederhana:

• Terbaik ketika nilai negatif tidak diperlukan. Contoh:

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

2. Gunakan slice untuk fleksibilitas maksimal:

• Mendukung indeks negatif dan merupakan metode yang disukai untuk kode baru. Contoh:

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

3. Ganti substr secepat mungkin:

• Migrasi ke slice atau substring saat memelihara kode lama.

7.3 Praktik Terbaik Modern

1. Tulis kode dengan mempertimbangkan keterbacaan:

• Kode yang jelas dan ringkas meningkatkan kemudahan pemeliharaan jangka panjang.

1. Hindari metode yang sudah usang:

• substr mungkin kehilangan dukungan browser di pembaruan mendatang—migrasi lebih awal.

1. Gunakan slice saat bekerja dengan nilai negatif:

• slice adalah satu-satunya metode yang menangani indeks negatif dengan benar.

1. Gunakan ESLint dan suite tes untuk menjaga kualitas kode:

• Analisis statis membantu mendeteksi metode yang sudah usang dan menerapkan gaya pengkodean modern.

7.4 Contoh Gaya Pengkodean Modern

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

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

7.5 Rencana Aksi untuk Pembaca

1. Tinjau kode yang ada:

• Periksa apakah substr digunakan dalam proyek Anda dan ganti di mana diperlukan.

1. Ikuti praktik terbaik dalam kode baru:

• Gunakan pola modern yang fleksibel dan hindari fitur yang sudah usang.

1. Manfaatkan komentar dan pertanyaan komunitas:

• Bagikan pertanyaan atau kasus penggunaan untuk membantu orang lain belajar sambil memperkuat pemahaman Anda.

Kesimpulan

Artikel ini memberikan penjelasan mendalam tentang metode substr, substring, dan slice milik JavaScript, termasuk sintaks, contoh, tabel perbandingan, dan strategi migrasi.

• Hindari substr karena sudah usang.
• Gunakan substring untuk skenario sederhana.
• Gunakan slice untuk fleksibilitas maksimal dan praktik terbaik modern.

Gunakan wawasan ini untuk menulis kode JavaScript yang efisien dan mudah dipelihara.

8. Tautan Terkait dan Referensi

Untuk memperdalam pemahaman Anda tentang substr, substring, dan slice, berikut adalah tautan dan referensi yang bermanfaat. Dokumentasi resmi dan sumber belajar akan membantu Anda mengikuti pembaruan dan teknik JavaScript terbaru.

8.1 Dokumentasi Resmi

1. MDN Web Docs – Objek String JavaScript

• Tautan: String – MDN Web Docs
• Ikhtisar: Referensi lengkap untuk objek String JavaScript dengan spesifikasi rinci dan contoh.

1. Spesifikasi ECMAScript (ECMA-262)

• Tautan: Spesifikasi Resmi ECMAScript
• Gambaran: Spesifikasi bahasa resmi yang mencakup fitur ECMAScript terbaru, metode yang sudah tidak dipakai, dan detail teknis.

8.2 Situs Pembelajaran dan Tutorial

1. JavaScript.info – Panduan Manipulasi String

• Tautan: JavaScript.info
• Gambaran: Panduan lengkap yang mencakup operasi string dasar hingga lanjutan dengan contoh praktis.

1. Progate – Kursus JavaScript untuk Pemula hingga Menengah

• Tautan: Progate
• Gambaran: Platform interaktif yang ideal untuk pemula belajar melalui latihan coding praktis.

1. DotInstall – Pelajaran Pengantar JavaScript

• Tautan: DotInstall
• Gambaran: Pelajaran video singkat yang memudahkan belajar JavaScript secara visual dan cepat.

8.3 Sumber Kode Contoh Praktis

1. GitHub – Proyek Contoh JavaScript

• Tautan: GitHub
• Gambaran: Pelajari praktik terbaik dan pola dunia nyata dengan menjelajahi proyek open‑source.

1. CodePen – Berbagi Kode Interaktif

• Tautan: CodePen
• Gambaran: Bagikan dan uji kode Anda dengan pengembang lain atau telusuri contoh untuk inspirasi.

8.4 Buku yang Direkomendasikan

1. JavaScript: The Definitive Guide (7th Edition)

• Gambaran: Referensi komprehensif dan otoritatif yang mencakup JavaScript dari dasar hingga fitur lanjutan.

1. Mastering Modern JavaScript – Revised Edition

• Gambaran: Referensi praktis yang berfokus pada JavaScript modern dan standar coding terkini.

8.5 Komunitas dan Forum

1. Stack Overflow (Japanese)

• Tautan: Stack Overflow
• Gambaran: Komunitas tanya‑jawab di mana Anda dapat memecahkan masalah JavaScript secara efisien.

1. Qiita

• Tautan: Qiita
• Gambaran: Platform Jepang yang kaya dengan artikel praktis dan studi kasus JavaScript.

1. Teratail

• Tautan: Teratail
• Gambaran: Situs tanya‑jawab Jepang yang ideal untuk mengajukan pertanyaan teknis dalam bahasa asli.

Kesimpulan

Bagian ini memperkenalkan berbagai sumber daya—dari referensi resmi hingga tutorial, repositori kode contoh, dan platform komunitas—untuk mendukung pembelajaran berkelanjutan tentang operasi string JavaScript.

Poin Penting:

1. Periksa dokumentasi resmi secara berkala:

• Pastikan gaya coding Anda tetap selaras dengan standar terbaru.

2. Perkuat keterampilan melalui coding langsung:

• Praktik membuat konsep lebih jelas dan meningkatkan penerapan di dunia nyata.

3. Berinteraksi dengan komunitas:

• Berbagi pertanyaan dan solusi membantu memperdalam pemahaman serta memperluas jaringan Anda.