Konvertieren Sie mit dieser Funktion in Javascript einen String in camelCase.

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<typeof feature>
}
</typeof>

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 in 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 einer CamelCase-Zeichenfolge zusammengefügt.

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

„+1 dafür, dass keine regulären Ausdrücke verwendet werden, 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) übernommen 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 Build-from-Scratch

an

Über mich:

Website: https://ramunarasinga.com/

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

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

E-Mail: ramu.narasinga@gmail.com

Shadcn-ui/ui von Grund auf erstellen

Referenzen:

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

Das obige ist der detaillierte Inhalt vonKonvertieren Sie mit dieser Funktion in Javascript einen String in camelCase.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!