Como converter string em camel case em JavaScript

Neste artigo você vai aprender a como converter string em camel case, com uma abordagem simples de entender!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e strings!

Converter uma string em camel case é uma tarefa comum na programação JavaScript.

O camel case é um estilo de escrita onde as palavras são unidas e a primeira letra de cada palavra, exceto a primeira, é capitalizada.

Isso é comum em nomes de variáveis, funções e propriedades em JavaScript.

Neste artigo, exploraremos como converter uma string em camel case em JavaScript e discutiremos algumas abordagens diferentes que podem ser usadas.

Usando replace() e toUpperCase()

Uma maneira simples e direta de converter uma string em camel case é usar o método replace() para remover os espaços entre as palavras e o método toUpperCase() para capitalizar as letras iniciais das palavras subsequentes.

function converterParaCamelCase(string) {
  return string.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
    return index === 0 ? word.toLowerCase() : word.toUpperCase();
  }).replace(/\s+/g, '');
}

Neste exemplo, usamos o método replace() para remover os espaços entre as palavras da string e o método toUpperCase() para capitalizar as letras iniciais das palavras subsequentes.

A expressão regular usada no método replace() verifica se a primeira letra da palavra está em maiúscula e, se estiver, não a capitaliza.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Usando split(), map() e join()

Outra abordagem para converter uma string em camel case é usar o método split() para dividir a string em um array de palavras, o método map() para capitalizar a primeira letra de cada palavra e o método join() para unir as palavras em uma única string.

function converterParaCamelCase(string) {
  return string.split(' ').map(function(word, index) {
    if (index === 0) {
      return word.toLowerCase();
    }
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  }).join('');
}

Neste exemplo, usamos o método split() para dividir a string em um array de palavras, o método map() para capitalizar a primeira letra de cada palavra e o método join() para unir as palavras em uma única string.

A condição no método map() verifica se é a primeira palavra e, se for, ela é convertida para minúscula.

Usando replace() e uma função callback

Uma terceira abordagem para converter uma string em camel case é usar o método replace() e uma função de retorno de chamada para capitalizar a primeira letra de cada palavra subsequente.

function converterParaCamelCase(string) {
  return string.replace(/\s(.)/g, function(match, group) {
    return group.toUpperCase();
  }).replace(/^\w/, function(match) {
    return match.toLowerCase();
  });
}

Neste exemplo, usamos o método replace() com uma expressão regular para localizar o espaço entre as palavras e a função de retorno de chamada para capitalizar a primeira letra da palavra subsequente.

A segunda chamada ao método replace() verifica se é a primeira palavra e, se for, ela é convertida para minúscula.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em resumo, converter uma string em camel case é uma tarefa comum na programação JavaScript e pode ser realizada usando várias abordagens diferentes.

As abordagens discutidas neste artigo incluem o uso do método replace() e toUpperCase(), split(), map() e join(), e replace() com uma função de retorno de chamada.

Cada abordagem tem suas vantagens e desvantagens, mas todas produzem o mesmo resultado. Escolha a abordagem que melhor se adapte ao seu código e preferência de estilo.

Independentemente da abordagem escolhida, é importante manter um código limpo, legível e consistente.

Com a prática e a experiência, você pode desenvolver seu próprio estilo de codificação para converter strings em camel case e outras tarefas comuns de programação em JavaScript.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Adicionar um mini exemplo de entrada e saída, mostrando a função rodando de verdade:

console.log(converterParaCamelCase("hora de codar")) // horaDeCodar console.log(converterParaCamelCase("nome da variavel")) // nomeDaVariavel

Quem cai aqui buscando ‘camelcase javascript’ quer VER o resultado, não só a função solta

Duas linhinhas de saída já matam a dúvida na hora

Adicionar uma seção tratando o caso real que o post ignora: string com underscore (‘nome_da_variavel’) ou com hífen (‘nome-da-variavel’), não só com espaço

Na prática é isso que mais aparece quando tu recebe dado de API ou de CSS

Dá pra resolver os três de uma vez (espaço, _ e -):

function paraCamelCase(str) { return str ”) .replace(/^./, c => c.toLowerCase()); }

Adicionar de 2 a 3 perguntas rápidas, cada uma respondida em 2 ou 3 linhas e funcionando sozinha como snippet:

‘Qual a diferença entre camelCase e PascalCase?’ No camelCase a primeira letra é minúscula (nomeCompleto), no PascalCase a primeira também é maiúscula (NomeCompleto) JS usa camelCase pra variável e função, PascalCase costuma ficar pra classe e componente

‘Qual a diferença entre camelCase e snake_case?’ snake_case usa underline entre as palavras e tudo minúsculo (nome_completo) camelCase junta tudo e marca a divisão com a maiúscula (nomeCompleto)

‘JavaScript tem uma função pronta de camelCase?’ Não tem um método nativo tipo toCamelCase(), tu monta com replace/split como mostrado aqui, ou usa uma lib utilitária se já tiver no projeto

Adicionar uma versão moderna das funções usando arrow function, que é como se escreve JS hoje em dia:

const converterParaCamelCase = (str) => ”)) .replace(/^./, (c) => c.toLowerCase());

Mesma lógica, sintaxe mais enxuta

Quem já está acostumado com arrow function e const vai se sentir mais em casa