Dividindo strings com o método split()

Manipular strings é um dos trabalhos mais comuns quando programamos. E neste artigo iremos falar sobre um dos métodos essenciais voltados para strings, o método split(). Também iremos identificar em quais situações ele pode nos ajudar.

O método split()

Esse método converte uma string em um array. Podemos dizer que ele como que “corta” uma string em vários “pedaços”, que são as posições do array que será retornado. Para realizar esse “corte” ou separação na string, o método split() se baseia em um divisor que informamos como parâmetro. Esse divisor pode ser qualquer caractere. Quando encontrado, esse divisor é removido da string.

Se você já tem familiaridade com outra linguagem de programação, como o PHP, podemos dizer que o split() é como o “explode() do JavaScript”.

Para entender bem esse conceito, nada melhor do que um bom exemplo, não é mesmo? Então, vamos desenvolver alguns deles agora!

Exemplos do método split()

Vamos criar uma variável company, que irá conter uma string:

let company = "Hcode Treinamentos Você especialista";

Vamos chamar o método split() nesta variável, informando um espaço para ele como parâmetro, desta forma

company.split(' ');

O resultado desse código será o seguinte:

Veja que cada espaço foi excluído e o array retornado contém cada uma das palavras de nossa frase. E como o retorno é um array, podemos usar qualquer método do JavaScript voltado para este tipo de dado para manipular essa informação.

Mas e se desejássemos ver uma quantidade específica das palavras dessa frase, como apenas as três primeiras palavras? Isso também é possível com o método split(). Ele espera um segundo parâmetro, que é a quantidade limite de posições que o array retornado deve possuir. Neste caso, poderíamos usar o seguinte código:

company.split(' ', 3);

O retorno será o seguinte:

Excelente, apenas as três primeiras palavras foram retornadas. Bem interessante, não é mesmo?

Assim como podemos ver todas as palavras de nossa frase em um array, também é possível ver todas as letras dela. Para isso, basta informar uma string vazia para o método split(), desta forma:

company.split('');

O resultado será este:

Imagine que desejássemos descobrir a quantidade de vogais ou consoantes nesta frase. Usando os métodos de array em conjunto com o retorno do método split(), poderíamos realizar esse processo neste caso.

Mas vamos imaginar uma situação: o que acontece se não informarmos nenhum parâmetro para o método split()? Vamos fazer o teste, por meio deste código:

company.split();

O resultado será o seguinte:

Note que quando ocultamos o divisor para a string, o método split() ainda retorna um array, mas com apenas uma posição, que é a própria string.

Até o momento usamos espaços como divisores no método split(). Mas o que ocorre se informarmos uma letra? Para descobrir, vamos usar o seguinte código:

company.split('o');

O resultado será este:

Note que todas as letras “o” foram removidas da string e as posições onde essa vogal foi encontrada na frase foram transformadas em índices do array. Há quatro itens no array. Sabemos que a última posição não possui a letra informada. Logo, podemos concluir que essa frase possui três letras “o”. Veja em quantas situações interessantes o método split() pode nos ajudar.

Lembra que comentamos sobre a possibilidade de usar métodos voltados para array ao trabalhar com o split()? Vamos fazer um exemplo sobre isso agora. Imagine que desejamos inverter o conteúdo de uma frase. Poderíamos fazer isso com o seguinte código:

company.split('').reverse().join('');

Explicando: nós realizamos o split() no espaço em branco da string. Já vimos que esse código irá converter nossa string em um array com cada uma de suas letras. Em seguida nós informamos o método reverse() que, como o nome diz, faz a “reversão” do array, ou seja, inverte suas posições. Depois informamos o método join(), que converte um array em uma string, exatamente o contrário do split() ?.

O resultado desse código será o seguinte:

Nossa string foi invertida com sucesso. Bem legal, não acha?

Outras situações em que podemos usar split()

Talvez nos perguntemos: “Mas em que situações do dia a dia de trabalho eu poderia usar o método split()?” Além das situações que informamos acima, o método split() pode ser usado quando possuímos uma string e desejamos selecionar apenas parte dela.

Exemplo: imagine que nosso usuário faça o upload de um arquivo e nós desejamos saber dinamicamente qual é o nome deste arquivo e sua extensão. O método split() pode nos ajudar. Sabemos que o sinal que separa o nome do arquivo de sua extensão é o “.” (ponto). Exemplo: hcode.png.

Vamos criar uma função que faça essa divisão para nós. Ela possuirá a seguinte estrutura:

function getNameAndExtensionFromFile(fileName) {
    let result = fileName.split('.');
    return {
        name: result[0],
        extension: result[1]
    };
}

Note que o nome do arquivo estará na posição 0 do array, enquanto a extensão estará na posição 1. Vamos fazer a chamada dessa função:

getNameAndExtensionFromFile('javascript.jpg');

O resultado dessa função é o seguinte:

As informações foram retornadas corretamente. Se desejássemos inserir esses dados no Banco de Dados de forma separada, já estaria tudo pronto.

Vamos pensar em outra situação: imagine que temos em nosso Banco de Dados uma tabela que armazena os emails de nossos usuários cadastrados. Mas, além de salvar o email por extenso, desejamos também cadastrar o domínio dele (gmail.com, hotmail.com, etc.), para poder converter essa informação em algum tipo de relatório no futuro. Como poderíamos identificar essa informação de forma automática no momento em que o usuário informa seu email?

Sabemos que o sinal que separa o nome do usuário de seu domínio de email é o “@” (arroba). Assim, poderíamos ter a seguinte função:

function getUsernameAndDomainFromEmail(email) {
    let result = email.split('@');
    return {
        username: result[0],
        domain: result[1]
    };
}

Vamos fazer a chamada dessa função:

getUsernameAndDomainFromEmail('[email protected]');

O retorno dela seria o seguinte:

Excelente. Temos acesso às informações do email. O melhor é que não foi necessário usar nenhum tipo de substring para isso. O método split() já nos retornou o que desejamos.

Você pode encontrar todos os códigos desenvolvidos neste artigo em nosso GitHub.

Nós usamos esse método em um dos projeto em nosso Curso Completo de HTML5. Você pode conferir um trecho dessa aula em nosso canal no YouTube ?.

Também, se desejar aprender outros recursos incríveis da linguagem JavaScript e usá-los para criar projetos sensacionais, não deixe de fazer nosso Curso Completo de JavaScript.

Até o próximo artigo :)