Já precisou converter uma string para camelCase? Encontrei um trecho de código interessante enquanto explorava o repositório Supabase de código aberto. Este é o método que eles usam:

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

Esta função é muito legal. Ele substitui dois pontos por sublinhados, divide a string em palavras e, em seguida, mapeia cada palavra para convertê-la em camelCase. A primeira palavra é mantida em letras minúsculas e as palavras subsequentes têm seu primeiro caractere em maiúscula antes de serem unidas novamente. Simples, mas eficaz!

Me deparei com outra abordagem no Stack Overflow que não usa expressões regulares. Aqui está a alternativa:

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

Este trecho de código do SO contém comentários explicando o que esse código faz, exceto que não usa nenhum tipo de regex. O código encontrado na forma de conversão de uma string para camelCase do Supabase é muito semelhante a esta resposta do SO, exceto pelos comentários e pelo regex usado.

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

Este método divide a string por espaços e depois mapeia cada palavra. A primeira palavra está inteiramente em letras minúsculas, enquanto as palavras subsequentes são maiúsculas no primeiro caractere e minúsculas no restante. Finalmente, as palavras são unidas novamente para formar uma string camelCase.

Um comentário interessante de um usuário do Stack Overflow mencionou a vantagem de desempenho desta abordagem:

“ 1 por não usar expressões regulares, mesmo que a pergunta pedisse uma solução usando-as. Esta é uma solução muito mais clara e também uma clara vitória para o desempenho (porque processar expressões regulares complexas é uma tarefa muito mais difícil do que apenas iterar um monte de strings e juntar pedaços delas). Veja jsperf.com/camel-casing-regexp-or-character-manipulation/1 onde peguei alguns dos exemplos aqui junto com este (e também meu próprio modesto melhoria para desempenho, embora eu provavelmente prefira esta versão por uma questão de clareza na maioria dos casos).”

Ambos os métodos têm seus méritos. A abordagem regex no código Supabase é concisa e aproveita técnicas poderosas de manipulação de strings. Por outro lado, a abordagem não-regex é elogiada pela sua clareza e desempenho, pois evita a sobrecarga computacional associada às expressões regulares.

Veja como você pode escolher entre eles:

• Use a abordagem regex se precisar de uma solução compacta e de uma linha que aproveite os poderosos recursos de regex do JavaScript. Certifique-se também de adicionar comentários explicando o que seu regex faz, para que seu futuro ou próximo desenvolvedor trabalhando com seu código possa entender.
• Opte pelo método não regex se você prioriza legibilidade e desempenho, especialmente ao lidar com strings mais longas ou executar essa conversão várias vezes.

Quer aprender como construir shadcn-ui/ui do zero? Confira construir do zero

Sobre mim:

Site: https://ramunarasinga.com/

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

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

E-mail: [email protected]

Construa shadcn-ui/ui do zero

Referências:

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