Pelajari tentang teknik iterasi string paling populer di JavaScript

Untuk banyak hal di JavaScript, tidak ada satu cara pun untuk mencapainya. Sesuatu yang sederhana seperti mengulangi setiap karakter dalam sebuah string adalah salah satunya. Mari kita jelajahi beberapa metode dan diskusikan kelebihan dan kekurangannya.

Harap dicatat bahwa artikel ini juga tersedia sebagai CodePled interaktif.

Sebelum kita mulai, kita perlu kembali ke pertanyaan yang lebih mendasar.

Cara Mengakses Karakter Tunggal dari sebuah String

Saat ini dengan ECMAScript 2015 (ES6), ada dua cara untuk mengakses satu karakter:

karakter()

Metode objek string ini telah ada selama beberapa waktu dan dapat dilihat sebagai pendekatan klasik. Ini didukung bahkan di browser tertua.

Notasi braket

Metode kedua adalah mengakses karakter melalui notasi braket:

Pendekatan ini telah diperkenalkan dengan ECMAScript 2015 dan tampaknya lebih nyaman. Selain itu, ini memungkinkan Anda untuk memperlakukan string seperti struktur seperti array. Hal ini memungkinkan beberapa metode iterasi, seperti yang akan kita lihat segera.

Metode mana yang lebih disukai?

Kelemahan dari charAt() mungkin adalah keterbacaan. Namun, ini kompatibel dengan browser lama seperti IE7. Argumen lain yang menentang notasi braket adalah notasi ini tidak dapat digunakan untuk menetapkan karakter:

Hal ini dapat membingungkan, terutama karena tidak ada peringatan.

Menurut pendapat pribadi saya, notasi braket lebih nyaman untuk ditulis dan dibaca. Masalah kompatibilitas harus diselesaikan dengan melakukan transpilasi daripada tidak menggunakan fitur yang diinginkan.

Cara Populer untuk Mengulang String

Daftar teknik berikut ini tidak diklaim lengkap. Ini akan menunjukkan beberapa pendekatan yang paling sering digunakan.

Untuk mendemonstrasikan pemrosesan karakter tunggal string kita, kita akan menggunakan fungsi berikut:

untuk lingkaran

Pendekatan klasik — putaran for sederhana:

Meskipun agak rumit untuk menulis dan membaca, ini adalah metode tercepat yang diketahui.

untuk…dari

Pernyataan ini diperkenalkan dengan ECMAScript 2015 dan dapat digunakan dengan objek yang dapat diubah. Lebih mudah untuk menulis daripada perulangan for klasik jika Anda tidak peduli dengan indeks saat ini di badan perulangan.

untuk setiap()

Ini adalah versi fungsional dari loop for. Banyak orang lebih menyukainya daripada perulangan for…of dan for karena ini adalah fungsi tingkat tinggi, dan akan membantu jika tetap menggunakan gaya pemrograman yang memanfaatkan kekekalan (lihat panduan gaya Airbnb di referensi).

Satu kelemahannya adalah Anda perlu mengubah string menjadi array sebelum melakukan iterasi. Jika performa benar-benar penting dalam kasus penggunaan Anda (dan biasanya tidak), ini mungkin bukan pilihan pertama Anda.

Kesimpulan

Seperti banyak teknik dalam JavaScript, yang terpenting adalah masalah selera saat memutuskan teknik mana yang akan digunakan. Namun, waspadai dampak kecepatan konversi string ke array serta masalah kompatibilitas notasi braket.

Saya menyarankan Anda untuk memilih teknik yang paling mudah dibaca dan hanya peduli pada optimasi kecepatan jika Anda memiliki masalah kinerja dan untuk menyelesaikan masalah kompatibilitas melalui transpiling.

Referensi