ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript でこの関数を使用して文字列をキャメルケースに変換します。

Javascript でこの関数を使用して文字列をキャメルケースに変換します。

PHPz
PHPzオリジナル
2024-08-01 08:07:23573ブラウズ

文字列をキャメルケースに変換する必要があったことがありますか?オープンソースの 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<typeof feature>
}

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

Convert a string to camelCase using this function in Javascript.

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

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://ramunarasinga.com/

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

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

メール: ramu.narasinga@gmail.com

shadcn-ui/ui を最初から構築する

参考文献:

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

以上がJavascript でこの関数を使用して文字列をキャメルケースに変換します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。