Mussten Sie schon einmal einen String in camelCase konvertieren? Beim Erkunden des Open-Source-Repositorys Supabase habe ich einen interessanten Codeausschnitt gefunden. Hier ist die Methode, die sie verwenden:

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

Diese Funktion ist ziemlich nett. Es ersetzt Doppelpunkte durch Unterstriche, teilt die Zeichenfolge in Wörter auf und ordnet dann jedes Wort zu, um es in camelCase umzuwandeln. Das erste Wort wird in Kleinbuchstaben geschrieben und bei den folgenden Wörtern wird das erste Zeichen groß geschrieben, bevor es wieder zusammengefügt wird. Einfach und doch effektiv!

Ich bin bei Stack Overflow auf einen anderen Ansatz gestoßen, der keine regulären Ausdrücke verwendet. Hier ist die Alternative:

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

Dieser Codeausschnitt von SO enthält Kommentare, die erklären, was dieser Code tut, außer dass er keinerlei Regex verwendet. Der Code, der in Supabases Methode zum Konvertieren eines Strings in camelCase gefunden wird, ist dieser SO-Antwort sehr ähnlich, mit Ausnahme der Kommentare und des verwendeten regulären Ausdrucks.

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

Diese Methode teilt die Zeichenfolge nach Leerzeichen auf und ordnet sie dann jedem Wort zu. Das erste Wort wird vollständig in Kleinbuchstaben geschrieben, während die folgenden Wörter beim ersten Zeichen großgeschrieben und für den Rest kleingeschrieben werden. Abschließend werden die Wörter wieder zu einem CamelCase-String zusammengefügt.

Ein interessanter Kommentar eines Stack Overflow-Benutzers erwähnte den Leistungsvorteil dieses Ansatzes:

“ 1 für die Nichtverwendung regulärer Ausdrücke, auch wenn in der Frage nach einer Lösung gefragt wurde, die diese verwendet. Dies ist eine viel klarere Lösung und auch ein klarer Leistungsgewinn (da die Verarbeitung komplexer regulärer Ausdrücke eine viel schwierigere Aufgabe ist, als nur eine Reihe von Zeichenfolgen zu durchlaufen und Teile davon zusammenzufügen). Siehe jsperf.com/camel-casing-regexp-or-character-manipulation/1 wo ich einige der Beispiele hier zusammen mit diesem (und auch meinem eigenen bescheidenen Beispiel) genommen habe Verbesserung der Leistung, obwohl ich dieser Version aus Gründen der Übersichtlichkeit in den meisten Fällen wahrscheinlich den Vorzug geben würde).“

Beide Methoden haben ihre Vorzüge. Der Regex-Ansatz im Supabase-Code ist prägnant und nutzt leistungsstarke Techniken zur String-Manipulation. Andererseits wird der Nicht-Regex-Ansatz für seine Klarheit und Leistung gelobt, da er den mit regulären Ausdrücken verbundenen Rechenaufwand vermeidet.

So können Sie zwischen ihnen wählen:

• Verwenden Sie den Regex-Ansatz, wenn Sie eine kompakte, einzeilige Lösung benötigen, die die leistungsstarken Regex-Funktionen von JavaScript nutzt. Fügen Sie außerdem unbedingt Kommentare hinzu, die erklären, was Ihr regulärer Ausdruck bewirkt, damit Ihr zukünftiger Selbst- oder nächster Entwickler, der mit Ihrem Code arbeitet, es verstehen kann.
• Entscheiden Sie sich für die Nicht-Regex-Methode, wenn Sie Wert auf Lesbarkeit und Leistung legen, insbesondere wenn Sie mit längeren Zeichenfolgen arbeiten oder diese Konvertierung mehrmals ausführen.

Möchten Sie lernen, wie man shadcn-ui/ui von Grund auf erstellt? Schauen Sie sich an Build-from-Scratch

Über mich:

Website: https://ramunarasinga.com/

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

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

E-Mail: [email protected]

Shadcn-ui/ui von Grund auf erstellen

Verweise:

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