文字列をキャメルケースに変換する必要があったことがありますか?オープンソースの Supabase リポジトリを探索しているときに、興味深いコード スニペットを見つけました。彼らが使用する方法は次のとおりです:

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

この関数は非常に優れています。コロンをアンダースコアに置き換え、文字列を単語に分割し、各単語をマッピングしてキャメルケースに変換します。最初の単語は小文字のままで、後続の単語は結合される前に最初の文字が大文字になります。シンプルなのに効果的!

スタック オーバーフローで、正規表現を使用しない別のアプローチを見つけました。代替案は次のとおりです:

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('');
}

SO のこのコード スニペットには、正規表現を一切使用しないことを除いて、このコードが何を行うかを説明するコメントが含まれています。 Supabase の文字列をキャメルケースに変換する方法で見つかったコードは、コメントと使用される正規表現を除いて、この SO の回答と非常に似ています。

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

このメソッドは文字列をスペースで分割し、各単語をマップします。最初の単語は完全に小文字ですが、後続の単語は最初の文字が大文字になり、残りの文字が小文字になります。最後に、単語が結合されてキャメルケース文字列が形成されます。

Stack Overflow ユーザーからの 1 つの興味深いコメントでは、このアプローチのパフォーマンス上の利点について言及しています:

“ 1 は正規表現を使用した解決策を求める質問であっても、正規表現を使用しなかった場合です。これははるかに明確なソリューションであり、パフォーマンスの面でも明らかな利点があります (複雑な正規表現を処理することは、単に多数の文字列を反復処理してそれらの一部を結合することよりもはるかに難しいタスクであるため)。 jsperf.com/camel-casing-regexp-or-character-manipulation/1 を参照してください。ここでは、この例とともにいくつかの例を取り上げています (また、私自身の控えめな例も示しています)。パフォーマンスを向上させるためにこのバージョンを改良しましたが、ほとんどの場合、わかりやすくするためにこのバージョンの方が良いと思います)。」

どちらの方法にもそれぞれメリットがあります。 Supabase コードの正規表現アプローチは簡潔で、強力な文字列操作テクニックを活用しています。一方、非正規表現アプローチは、正規表現に伴う計算オーバーヘッドを回避できるため、その明快さとパフォーマンスで高く評価されています。

どちらかを選択する方法は次のとおりです:

• JavaScript の強力な正規表現機能を活用したコンパクトなワンライナー ソリューションが必要な場合は、正規表現アプローチを使用します。また、将来の自分やコードを扱う次の開発者が理解できるように、正規表現の動作を説明するコメントを必ず追加してください。
• 可読性とパフォーマンスを優先する場合、特に長い文字列を扱う場合やこの変換を複数回実行する場合は、非正規表現メソッドを選択してください。

shadcn-ui/ui を最初から構築する方法を学びたいですか?チェックアウト スクラッチから構築

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