Tukar rentetan kepada camelCase menggunakan fungsi ini dalam Javascript.

Pernah perlu menukar rentetan kepada camelCase? Saya menemui coretan kod yang menarik semasa meneroka repositori Supabase sumber terbuka. Inilah kaedah yang mereka gunakan:

function featureToCamelCase(feature: Feature) {
  return feature
    .replace(/:/g, '\_')
    .split('\_')
    .map((word, index) => (index === 0 ? word : word\[0\].toUpperCase() + word.slice(1)))
    .join('') as FeatureToCamelCase<typeof feature>
}

Fungsi ini cukup kemas. Ia menggantikan titik bertindih dengan garis bawah, membelah rentetan menjadi perkataan, dan kemudian memetakan setiap perkataan untuk menukarnya kepada camelCase. Perkataan pertama disimpan dalam huruf kecil, dan perkataan berikutnya menggunakan huruf besar huruf pertama sebelum dicantumkan semula. Mudah tetapi berkesan!

Saya menemui pendekatan lain pada Stack Overflow yang tidak menggunakan ungkapan biasa. Inilah alternatifnya:

function toCamelCase(str) {
  return str.split(' ').map(function(word, index) {
    // If it is the first word make sure to lowercase all the chars.
    if (index == 0) {
      return word.toLowerCase();
    }
    // If it is not the first word only upper case the first char and lowercase the rest.
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  }).join('');
}

Coretan kod daripada SO ini mempunyai ulasan yang menerangkan perkara yang dilakukan oleh kod ini kecuali ia tidak menggunakan sebarang jenis regex. Kod yang ditemui dalam cara Supabase untuk menukar rentetan kepada camelCase sangat serupa dengan jawapan SO ini, kecuali untuk komen dan regex yang digunakan.

.replace(/:/g, '\_')

Kaedah ini membahagikan rentetan mengikut ruang dan kemudian memetakan setiap perkataan. Perkataan pertama adalah huruf kecil sepenuhnya, manakala perkataan seterusnya ditulis dengan huruf besar pada aksara pertama dan huruf kecil untuk yang lain. Akhir sekali, perkataan itu dicantumkan semula untuk membentuk rentetan unta.

Satu ulasan menarik daripada pengguna Stack Overflow menyebut kelebihan prestasi pendekatan ini:

“+1 kerana tidak menggunakan ungkapan biasa, walaupun soalan meminta penyelesaian menggunakan ungkapan itu. Ini adalah penyelesaian yang lebih jelas, dan juga kemenangan yang jelas untuk prestasi (kerana memproses ungkapan biasa yang kompleks adalah tugas yang jauh lebih sukar daripada hanya mengulangi sekumpulan rentetan dan menggabungkan bitnya bersama-sama). Lihat jsperf.com/camel-casing-regexp-or-character-manipulation/1 di mana saya telah mengambil beberapa contoh di sini bersama-sama dengan yang ini (dan juga sederhana saya sendiri penambahbaikan untuk prestasi, walaupun saya mungkin lebih suka versi ini demi kejelasan dalam kebanyakan kes).”

Kedua-dua kaedah ada kebaikannya. Pendekatan regex dalam kod Supabase adalah ringkas dan memanfaatkan teknik manipulasi rentetan yang berkuasa. Sebaliknya, pendekatan bukan regex dipuji kerana kejelasan dan prestasinya, kerana ia mengelakkan overhed pengiraan yang dikaitkan dengan ungkapan biasa.

Begini cara anda boleh memilih antara mereka:

• Gunakan pendekatan regex jika anda memerlukan penyelesaian padat, satu lapisan yang memanfaatkan keupayaan regex yang berkuasa JavaScript. Juga pastikan anda menambah ulasan yang menerangkan perkara regex anda, supaya diri anda atau pembangun seterusnya yang bekerja dengan kod anda boleh memahami.
• Pilih kaedah bukan regex jika anda mengutamakan kebolehbacaan dan prestasi, terutamanya apabila berurusan dengan rentetan yang lebih panjang atau menjalankan penukaran ini beberapa kali.

Ingin belajar cara membina shadcn-ui/ui dari awal? Lihat bina-dari-conteng

tentang saya:

Laman web: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

E-mel: ramu.narasinga@gmail.com

Bina shadcn-ui/ui dari awal

Rujukan:

1. https://github.com/supabase/supabase/blob/master/apps/studio/hooks/misc/useIsFeatureEnabled.ts#L16
2. https://stackoverflow.com/a/35976812

Atas ialah kandungan terperinci Tukar rentetan kepada camelCase menggunakan fungsi ini dalam Javascript.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!