No desenvolvimento web, às vezes é preciso separar strings, e o melhor método para isso é o JavaScript Split. Mas você sabe usá-lo? Aprenda aqui!
Qualquer um que já programou em JavaScript e, principalmente, que fez testes técnicos nessa linguagem, um dia teve de separar strings. A edição de textos que recebemos do usuário é parte constituinte do desenvolvimento web. Uma das maiores necessidades é separar strings, o que é feito com o método JavaScript Split. Temos de fazer isso, por exemplo, para separar o primeiro nome do sobrenome de alguém, ou então para poder procurar por alguma palavra específica em uma string grande.
Frequentemente, esse é também o tema de perguntas de testes técnicos. O domínio dos métodos nativos do JavaScript é algo que os recruiters sondam bastante em desenvolvedores juniores. O domínio dessas funções é o sinal de que o programador conhece a língua, e não apenas frameworks ou conceitos; o que, sem dúvidas, separa um bom júnior de um que não está realmente interessado em aprender a programar. Aprender métodos como o JavaScript Split é, então, um dos deveres mais básicos que o programador deve cumprir: ele é realmente bastante simples, mas muito útil. Sempre utilizaremos em momentos chave da programação, e não é bom desconhecê-lo!
Por isso, vamos mergulhar nesse aprendizado de como utilizar o JavaScript Split.
Como funciona o JavaScript split()?
O split é um método que atua nas strings. Strings são um dos tipos primitivos do JavaScript, os quais são responsáveis por armazenar conteúdo textuais. São eles, por exemplo, que irão salvar o nome de um usuário ou o seu e-mail. Este é, então, um tipo bastante generalista que acaba por se responsabilizar por grande parte dos dados que iremos utilizar: até mesmo links e às vezes datas acabam sendo strings.
O split é um dos principais métodos para manuseio de strings que há. Ele serve para receber um grande conteúdo de texto, ler sobre ele e separá-lo com base em algum parâmetro definido pelo usuário, desta forma retornando um array de strings. Esse parâmetro, chamado de separador, pode ser um caractere, uma série de caracteres ou uma expressão regular; e, quando o método percorre o array, sempre que ele encontra o parâmetro divisor, ele faz uma nova partição da string, adicionando-a ao array de saída.
É possível ainda definir um limite de quantas divisões serão feitas, de forma a, por exemplo, receber apenas uma única string de saída. Isso pode ser mais útil para uso e até economizar memória do programa.
É importante ainda frisar que esse método não altera a string original, sendo, então, necessário que esse valor de saída seja atribuído a um novo parâmetro para o retorno. A entrada permanece intacta para que possamos usá-la depois no código.
A sintaxe do método
A sintaxe do método é a seguinte:
Vamos explicar melhor essa organização:
- resultado: é o array de saída que será retornado depois da execução da função
- entrada: é a string que será dividida
- split: a chamada do método que fará a divisão da string
- parâmetro: se trata do parâmetro que será usado para fazer a divisão. Caso você não forneça, a string original se dividirá caractere a caractere, retornando um array com a string totalmente separada. O parâmetro deve ser do tipo string
- limite: o limite de divisões que será feito no array. Deve ser um número inteiro
Note que os dois parâmetros que são fornecidos na chamada do método são opcionais. O comportamento já foi explicado antes: caso o parâmetro de separação não seja fornecido, o método retornará a string por inteiro dentro de um array; se, no entanto, você fornecer um caractere vazio (isto é, passar apenas “”), ele retornará toda a string separada caractere a caractere.
Caso não forneçamos um limite, o método dividirá ele até o final. Caso forneçamos, então o método irá parar a divisão assim que esse limite expirar. É bastante simples, realmente, mas não se torna menos importante por isso.
Exemplos de usos do Split
Agora, vamos ver alguns exemplos de usos do método do JavaScript Split para melhor poder apresentar os conceitos para você. Como citado antes, esse método não altera a string original; por isso, é preciso atribuir o valor de saída a uma nova variável. No mais, o método é realmente bastante simples, e não é preciso grandes explicações para entender perfeitamente o seu funcionamento. Vamos lá:
Primeiro exemplo
O primeiro exemplo, e o mais simples, é o de usos informando nenhum parâmetro ou então com um parâmetro vazio. Vamos ver:
const entrada = ‘string de exemplo’;
const saida1 = entrada.split(); // saída: [‘string de exemplo’]
const saida2 = entrada.split(“”); // saída: [‘s’, ‘t’, ‘r’, ‘i’, ‘n’, ‘g’, ‘d’, ‘e’, ‘e’, ‘x’, ‘e’, ‘m’, ‘p’, ‘l’, ‘o’]
Caso enviemos, então, uma string vazia (isto é, apenas com “”), então o método irá separar a string de entrada caractere por caractere, retornando um array com cada caractere em separado. Caso, porém, passemos o split vazio, então não haverá separações: o array terá a string por inteiro, sem nenhuma alteração.
Segundo exemplo
O segundo exemplo é também bastante simples, e é o que será mais usado, sem sombras de dúvidas. É principalmente útil em testes lógicos, quando é preciso separar uma string em strings menores dentro de um array, para que se possa iterar sobre ele. Vamos ver:
const entrada = ‘string de exemplo’;
const saida = entrada.split(” “); // saída: [‘string’, ‘de’, ‘exemplo’]
A string passada como parâmetro de divisão é uma string com um espaço, ou seja, ” “. Com isso, o método irá percorrer a string de entrada e gerar cortes cada vez que um espaço em branco for encontrado, o que serve para o importantíssimo propósito de conseguir as diferentes palavras de um mesmo array. E se, por exemplo, pusermos um limite de palavras, podemos ainda extrair o nome de alguém:
const entrada = ‘Drivenaldo Educacional da Silva Costa’;
const saida = entrada.split(” “, 2); // saída: [‘Drivenaldo’, ‘Educacional’];
De seguido, basta fazer um join para ter uma string com os primeiros nomes de um usuário. Caso, porém, haja um “de”, o método irá colocar, por exemplo, “Drivenaldo de”; para evitar isso, basta fazer um bloco if e testar se há algum caso desse tipo.
Terceiro exemplo
Agora, vamos testar a divisão de strings tomando uma expressão regular (RegEx) por parâmetro de divisão. A dificuldade é, basicamente, aquela que todo programador tem ao utilizar esses objetos: ninguém pode dizer com certeza que entende como fazer bons RegEx. No entanto, existem sites que podem ajudar com essa problemática, e aparecem agora até IA’s que conseguem traduzir linguagem natural para essas expressões. Sem mais delongas, vamos lá:
const entrada = ‘string de exemplo’;
const saida = entrada.split(/[\s,]+/); // saída: [‘string’, ‘de’, ‘exemplo’]
O resultado para esse caso é o mesmo que se utilizarmos uma string com um espaço. No entanto, a coisa pode vir a complicar. Vejamos:
const entrada = ‘StringDeExemplo’;
const saida = entrada.split(/(?=[A-Z])/); // saída: [‘String’, ‘De’, ‘Exemplo’]
Esse RegEx serve para separar pelos caracteres que são maiúsculos. Como se pode imaginar, esse é um exemplo que não é possível de resolver com strings comuns; é preciso fazer uso de RegEx (infelizmente). E assim o exemplo segue, sempre com aqueles princípios que citamos antes, inclusive o do limite. No entanto, caso se vá usar um regex com limite, é preciso colocar a expressão entre parênteses, para que não haja nenhum problema.
Conclusão
Com tudo isso, esperamos que tenha ficado clara a importância do método Split. Ele é um que é normalmente utilizado junto com o método Join, o qual escreveremos sobre depois em nossa série sobre métodos próprios do JavaScript. Todos eles são importantíssimos de se conhecer, dado que são o básico do básico da linguagem; pelo menos saber seus nomes e suas funcionalidades é algo indispensável. Eles são bastante simples, mas não menos importantes por causa disso.
Quanto ao uso de RegEx, há um aviso a se dar: às vezes, podemos fazer expressões que até funcionem, mas não da forma mais otimizada para isso. É possível se construir uma mesma expressão de diversas formas diferentes, cada uma retornando a mesma coisa, mas com diferentes níveis de otimização. Um RegEx mau feito será mais lentamente processado pelo computador, demorando para ser executado pela máquina e gerando lentidões. Isso pode vir a ser um problema em um sistema que será escalado, trazendo lentidão para o usuário final.
No mais, desejamos ótimos estudos. Mantenha-se antenado em nosso blog, já que postamos semanalmente dicas valiosíssimas de JavaScript. E, caso tenha gostado do conteúdo, não se esqueça de recomendar para os seus amigos. Até mais!
