首頁  >  文章  >  web前端  >  在 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.

我在 Stack Overflow 上發現了另一種不使用正規表示式的方法。這是替代方案:

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 我在這裡舉了一些例子以及這個(還有我自己的謙虛的例子)改進了它的性能,儘管在大多數情況下,為了清晰起見,我可能更喜歡這個版本) 。 兩種方法都有其優點。 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

參考:

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

https://stackoverflow.com/a/35976812

以上是在 Javascript 中使用此函數將字串轉換為駝峰命名法。的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn