Converting Case: Além De Uma Ferramenta Útil é Algo Que Todo Desenvolvedor Deveria Saber | Desenvolvimento | Tecnologia
DesenvolvimentoTecnologia
Converting Case: Além de Uma Ferramenta Útil é Algo Que Todo Desenvolvedor Deveria Saber
JuanxCursed12 de junho de 20200 Comment0110
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á:
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:
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.
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.
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.
E estamos quase no fim, agora precisamos unir as palavras novamente com o método 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:
Da mesma forma que antes, abaixo tem o Sandbox com o código completo e também o repositório do Sentence 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/
Então a partir de agora todos as funções estarão presentes nesse repositório do Converting Case.
O UPPER CASE não é tão diferente, aqui todas as palavras ficam MAIÚSCULAS.
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.
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.
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.
Da mesma forma, só precisamos unir o nosso texto novamente e pronto!
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.
Como termos o Alternating Case ficou fácil né? Olha o resultado abaixo e o código completo aqui.
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.
Logo depois usamos uma função de array, que inverte completamente a sequência do array que temos:
Enfim, juntamos a nossa string:
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ê!