DesenvolvimentoTecnologia

Converting Case: Além de Uma Ferramenta Útil é Algo Que Todo Desenvolvedor Deveria Saber

Visualizações

Primeiramente, Converting case é uma ferramenta que trata textos, alternando entre maiúsculas e minúsculas para formar padrões conhecidos como formato.

É muito comum a gente rascunhar um texto sem se preocupar com as palavras que devem ser maiúsculas, ou que devem estar GRITANDO no seu texto, e depois arrumar isso dá um belo trabalho, sem falar que é chato, não é mesmo?

Entretanto, para um desenvolvedor saber manipular uma string é algo essencial, se não obrigatório, principalmente se você for iniciante.

Obviamente é uma questão de evolução e de caso de uso até que você entenda cada caso e saiba quando fazer, e qual é a melhor forma de fazer para o seu objetivo.

Confira também: Mouse Gamer Fallen Lobo V2 – Review e Unboxing em vídeo

Preview do Converting Case

Aqui abaixo eu vou deixar uma ferramenta que engloba todos os casos que vamos falar nesse post, pode ficar a vontade para testar e se quiser acessar essa ferramenta de conversão de texto também, aqui está:

https://convertcase.marriedgames.com.br

Title Case (Perfeito para títulos)

O caso mais comum para nós aqui do blog, geralmente escrevemos um artigo por muito tempo, indo e voltando, edita aqui e ali, e em muitos poucos casos lembramos de deixar as palavras corretas com a primeira letra maiúscula e as palavras como: ‘de’, ‘em’, ‘até’ minúsculas em meio a uma frase.

É ai onde entra o Title Case, um exemplo bem legal, é o titulo do artigo “Além de Uma Ferramenta Útil é Algo Que Todo Desenvolvedor Deveria Saber”, quando eu escrevi o título,, estava dessa forma “além de uma ferramenta útil é algo que todo desenvolvedor deveria saber”, que está no formato do ‘Lower Case’.

Antes de mais nada, pensa no trampo meu amigo…

Agora pensa na ferramenta fazendo isso por nós:

Ferramenta de Converting Case
Imagem da Converting Case na seleção padrão

Primeiramente, ela começa com um “famoso Lorem Ipsum” na área de texto e com o ‘Sentence Case‘ selecionado.
Por outro lado, para usar é simples, clique no botão ‘Limpar’ e cole o seu texto lá, feito isso, basta selecionar o “Case” que deseja e pronto!

Está na mão. Bem mais fácil né?

Agora vem a parte dos desenvolvedores, como esse resultado foi alcançado?
Nesse caso em especifico eu estou usando JavaScript para fazer a manipulação, mas existem inúmeras formas de se alcançar o resultado e basicamente em qualquer linguagem.

Primeiro precisamos garantir que nosso texto está todo minusculo para que tenhamos consistência na hora de manipular.

let texto = 'site de notícias do mundo dos jogos e tecnologia';
let textoMinusculo = texto.toLowerCase();

O próximo passo é separar as palavras e transformar em um Array (ou Lista se preferir) para que seja possível manipular uma a uma. Quem vai fazer esse trabalho vai ser a função split do Javascript.

let palavras = textoMinusculo.split(' ');

Então devemos iterar o nosso array de palavras para validar se devemos ou não manipular essa palavra. Enfim, pegamos a primeira letra, usando o charAt e usamos o toUpperCase (explico mais abaixo), e imediatamente usamos o slice para remover o primeiro carácter, concatenando o resultado.

palavras = palavras.map(palavra => {
  if (palavra.length <= 2) return palavra; // Estamos ignorando palavras que tem 2 ou menos caracteres para que fiquem minusculas
  return palavra.charAt(0).toUpperCase() + palavra.slice(1);
});

E estamos quase no fim, agora precisamos unir as palavras novamente com o método join.

let textoTitulo = palavras.join(" ");

Então é isso, temos o nosso Title Case pronto? Ou quase?

Tem um caso que eu não mencionei aqui, quero deixar esse desafio para você, me fala nos comentários no final do artigo o que tem no código do repositório (que está no final do artigo) que faltou aqui.

Enfim, abaixo eu estou colocando o Sandbox do código que eu citei na integra e em funcionamento para ficar mais claro de entender e também esse repositório onde tem o snippet completo e mais otimizado.

Sentente Case

Toda frase começa com a primeira letra maiúscula certo? Se vc esquece, ou pega um texto todo em “Upper Case” é quando o Sentence Case vem a calhar, e a implementação é bem mais simples.

A princípio, lembra que no item anterior nós usamos chartAt e slice? Enfim, vai ser a mesma coisa, veja que simples:

texto = texto.toLowerCase(); // Primeiro como de costume, normalizamos o texto que recebemos.
texto = texto.charAt(0).toUpperCase() + texto.slice(1);

Da mesma forma que antes, abaixo tem o Sandbox com o código completo e também o repositório do Sentence Case.

Lower Case

O lower case é um dos mais simples, ele é responsável por deixar todo o texto minusculo, então não acho que vale entrar em muitos detalhes aqui, se quiser, pode deixar nos comentários sua dúvida que eu responderei lá blz? o/

texto = texto.toLowerCase();

Então a partir de agora todos as funções estarão presentes nesse repositório do Converting Case.

Upper Case

O UPPER CASE não é tão diferente, aqui todas as palavras ficam MAIÚSCULAS.

texto = texto.toUpperCase();

Capitalized Case

Em alguns casos você vai querer usar Capitalized Case para chamar mais a atenção em um texto. Nesse caso temos uma situação quase que idêntica ao Title Case porém essa nós não vamos ter o if que remove pronomes por exemplo.

palavras = palavras.map(palavra => {
  return palavra.charAt(0).toUpperCase() + palavra.slice(1);
});

Alternating Case

Vai que de repente você está afim de dificultar a leitura para alguém, o aLtErNaTiNg CaSe é o que você procura.
A implementação dele também é simples e lembra alguns do casos anteriores.

Primeiro fazemos o split, mas dessa ver não será com o espaço sendo o nosso caractere separador, e sim “nada”, apenas uma string vazia, pois queremos pegar caractere a caractere para alterar separadamente.

texto.split('');

Agora nós temos nosso array de caracteres, para alternar entre um sim e outro não, podemos usar Divisão de Módulo para conseguir alternar entre os caracteres, fazendo assim um ficar maiúsculo e outro minúsculo.

caracteres.map(function(char, index) {
  return index % 2 === 1 ? char.toUpperCase() : char.toLowerCase();
});

Da mesma forma, só precisamos unir o nosso texto novamente e pronto!

caracteres.join('');

Inverse Case

Por outro lado, o InVeRsE cAsE é o contrário, e a implementação é a mesma do item acima, tudo o que precisamos fazer é trocar o 1 por 0 no nosso operador ternário do módulo.

caracteres.map(function(char, index) {
  return index % 2 === 0 ? char.toUpperCase() : char.toLowerCase();
});

Como termos o Alternating Case ficou fácil né? Olha o resultado abaixo e o código completo aqui.

Reverse Case

E que tal fazer pluzzles (quebra-cabeças) escrevendo de trás para frente? É ai que entra o esreveR, vou deixar você desfazer esse por conta própria hehehe.

Enquanto isso, nesse caso a implementação muda um pouco, mas com Javascript (e com a maioria das linguagens que tem funções de array) se troca até fácil de mais, fica vendo:
Primeiro quebramos a string em um array de caracteres, nada novo até aqui.

texto.split('')

Logo depois usamos uma função de array, que inverte completamente a sequência do array que temos:

caracteres.reverse()

Enfim, juntamos a nossa string:

caracteres.join('')

Fala sério, esse foi o mais desafiador né? hehehehe
Então não se esqueça de conferir o repositório completo das funções converting case desse artigo e sinta-se livre para contribuir com mais ideias ou formas de manipular texto, não apenas com JavaScript, mas também em outras linguagens.

Em conclusão, tem alguma sugestão de conteúdo sobre desenvolvimento que você queira ver? Deixa ai nos comentários que vamos trazer para você!

JuanxCursed
O autorJuanxCursed
Fundador/SEO/Redator
Empresário, 29 anos, fundador da Married Games, desenvolvedor, gamer, entusiasta e um completo NERD, Juan ainda gosta de pegar a sua guitarra e tirar um bom som no Rocksmith.