Um dos primeiros assuntos que precisamos aprender em uma linguagem de programação é sobre quais são os tipos de dados existentes e quais os recursos disponíveis para trabalharmos com eles. A string, por exemplo, faz parte dos tipos de dados primitivos e o método JavaScript split é uma das formas disponíveis para manipular o seu conteúdo.

Entender como utilizar esse método ajudará em diversas situações do dia a dia de quem programa em JavaScript, como para separar o primeiro nome do sobrenome de uma pessoa visitante de uma página e em muitas outras ocasiões. Para que você saiba como esse recurso é útil, confira:

• O que é e como funciona o método split()?
• Qual a sua sintaxe?
• Confira 5 exemplos de uso do método split
• Qual a compatibilidade com os navegadores?

Quer saber como ele funciona? Vamos lá!

O que é e como funciona o método split()?

O tipo string é utilizado para armazenar caracteres alfanuméricos, ou seja, ela pode conter letras, números e símbolos. A string é um tipo de dado primitivo em JavaScript. Isso significa que ela não pode ter o seu valor modificado, pois os tipos primitivos são sempre imutáveis.

Vale dizer que as strings do tipo primitivo são declaradas da forma literal, ou seja, pela atribuição de um conteúdo delimitado por aspas, que pode ser a simples ou a dupla, em uma variável, ou ainda, com a especificação do tipo da variável antes do conteúdo delimitado por parênteses e aspas, conforme as instruções a seguir.

var letras = "a, b, c, d, e";
var letras2 = String("a, b, c, d, e");

Quando a string é iniciada através de um construtor, ela é do tipo objeto. Nesse caso, sua inicialização é feita dessa forma:

var letras3 = new String("a, b, c, d, e"); 


Para conferir quais são os tipos correspondentes, utilize o comando console.log(typeof(nome_da_variável) e perceba a diferença entre elas. Portanto, nos dois primeiros exemplos a variável é criada com o tipo string, enquanto na terceira declaração ela é criada como um objeto.

Internamente, o JavaScript transforma as strings do tipo primitivo em objeto sempre que for preciso utilizar algum método ou propriedade. Dessa forma, é possível executar uma série de ações na variável, entre elas a utilização do método split.

Na prática, o método lê uma string e a divide com base em um separador, que pode ser um caractere qualquer ou uma expressão regular. A seguir, ela verifica se há um limite definido e devolve o resultado em forma de array.

Portanto, sempre que o valor do separador for encontrado na string, haverá uma divisão naquele ponto. É importante dizer que o método split não altera o conteúdo original da string.

Qual a sua sintaxe?

Basicamente, o objetivo do método split() é dividir uma string. Para isso, o método admite dois parâmetros, que são opcionais. O valor retornado é atribuído a uma variável do tipo array. Sua sintaxe é:

variavelString.split( [separador[, limite]]);

No qual:

• separador: é o caractere ou caracteres que servem como base para a separação da string. O separador também pode ser uma expressão regular;
• limite: corresponde à quantidade máxima de divisões que devem ser feitas na string. Quando informado, o valor deve ser do tipo inteiro.

É importante dizer que os parâmetros separador e limite são opcionais. Isso significa que, se nada for informado, a string retornará todo o seu conteúdo em formato de uma array de caracteres, porém, sem nenhuma divisão.

Já ao especificar um separador e um limite, será feita uma varredura nos caracteres da string até encontrar o separador correspondente. Então, esse primeiro resultado é atribuído à primeira posição da array e assim por diante até atingir o número limite ou que chegue ao final da string.

Se o parâmetro limite não for informado, o método split varrerá toda a array e sempre que encontrar o separador solicitado, fará nova divisão da string. É importante dizer que ao estipular o limite, a string será dividida o número de vezes solicitada, mesmo que existam outros caracteres que correspondam ao separador.

Por exemplo, imagine uma string com o conteúdo “José Carlos de Souza”. Se definirmos o separador como o caractere espaço e estipularmos o limite para dois, o resultado será uma array com dois elementos, que correspondem a “José” e “Carlos”. Portanto, o conteúdo restante da string (“de Souza”) será desprezado.

Confira 5 exemplos de uso do método split

A melhor forma de compreender como o método split funciona é através de exemplos práticos. Por isso, confira a seguir algumas maneiras de aplicar esse recurso.

Exemplo 1

Vamos iniciar com o exemplo citado no tópico anterior sobre a separação do nome José Carlos de Souza. Veja o código a seguir:

var nomeString = "José Carlos de Souza";
var resultadoEspaco = nomeString.split(" ", 2);
console.log(resultadoEspaco);
/* saída:
Array(2) ["José", "Carlos"]
*/


No código acima o método JavaScript split é utilizado com o separador espaço e com um limite de duas posições. Portanto, após encontrar o espaço pela segunda vez, o resultado da array é retornado.

No próximo exemplo, em vez de adicionarmos o espaço no separador, informaremos apenas as aspas duplas. Dessa forma, a divisão será feita por caractere. Portanto, ao depurar o código serão devolvidas as duas primeiras letras da string, que correspondem à “J” e “o”. Veja o código e a saída correspondente.

var resultadoCaracter = nomeString.split("",2);
console.log(resultadoCaracter);
/* saída:
Array(2) ["J", "o"]
*/


Exemplo 2

Como os parâmetros para o método js split são opcionais, vamos fazer um exemplo sem nenhuma informação adicional, ou seja, sem o separador e limite definidos. Confira o código a seguir.

var nomePessoaString = "José Carlos de Souza";
var resultadoString = nomePessoaString.split();
console.log(resultadoString);
/* saída:
Array(1) ["José Carlos de Souza"]
*/ 


Nesse exemplo, o resultado é o mesmo conteúdo que contém a string original, porém, em formato de array com um único elemento.

Exemplo 3

O separador do método split também pode ser utilizado com expressões regulares. Basicamente, elas funcionam como um código com uma combinação de caracteres que facilitam a busca por padrões específicos. Se você não sabe como funcionam as expressões regulares, dê uma olhada neste link e conheça um pouco mais sobre esse recurso.

No exemplo a seguir, vamos utilizar expressões regulares para verificar de que forma elas podem ajudar na utilização do método split em uma string. Confira o código abaixo:

var testeString = "Vamos testar o uso de expressões regulares!";
var resultadoTesteString = testeString.split(/[\s,]+/)
console.log(resultadoTesteString);

Na primeira linha do código definimos o texto da string. A seguir, criamos uma variável para receber o resultado do método split com a expressão regular (/[\s,]+/), que varrerá a string em busca de caracteres de espaço, que será o ponto de separação do texto. O resultado será armazenado na array resultadoTesteString, que terá sete elementos:

/* saída:
Array(7) ["Vamos", "testar", "o", "uso", "de", "expressões", "regulares!"]
*/


Podemos fazer uma pequena alteração nesse código para adicionar o limite em que a expressão regular deve ser verificada. Vamos limitar a verificação em quatro vezes. Confira como ficará o código.

var testeString2 = "Vamos testar o uso de expressões regulares!";
var resultadoTesteString2 = testeString2.split((/[\s,]+/),4);
console.log(resultadoTesteString2);


Dessa forma, a array de saída terá quatro elementos com o seguinte valor:

/* saída:
Array(7) ["Vamos", "testar", "o", "uso"]
*/


Também é possível fazer uma expressão regular para identificar as letras maiúsculas dentro de uma variável do tipo string e separar o texto com base nesse critério. Veja o exemplo, a seguir.

var stringMaiuscula = "VamosTestarExpressõesRegulares";
var splitMaiuscula = stringMaiuscula.split(/(?=[A-Z])/);
console.log(splitMaiuscula);
/* saída:
Array(4) ["Vamos", "Testar", "Expressões", "Regulares"]
*/


No primeiro código, a variável stringMaiuscula foi escrita sem espaços: “VamosTestarExpressõesRegulares”. No comando seguinte é feita a aplicação do método split com a expressão regular que identifica as letras maiúsculas. Dessa forma, o retorno é uma variável do tipo array com 4 elementos separados pelas iniciais.

Já no código seguinte, a variável string foi declarada com espaços entre as palavras. Na instrução para aplicar o método split na string é feita a mesma instrução, ou seja, para utilizar as letras maiúsculas como elemento de corte. Perceba que no resultado o caractere espaço foi adicionado nos três primeiros elementos do array, pois eles fazem parte da string.

var stringMaiusculacomEspaco = "Vamos Testar Expressões Regulares";
var splitMaiusculacomEspaco = stringMaiusculacomEspaco.split(/(?=[A-Z])/);
console.log(splitMaiusculacomEspaco);
/* saída:
Array(4) ["Vamos ", "Testar ", "Expressões ", "Regulares"]
*/


Exemplo 4

Imagine que em um cadastro de pessoas usuárias de um site qualquer, o nome do usuário seja definido com base no e-mail cadastrado. Claro que deve haver uma checagem para conferir duplicidades e adicionar números para contornar o problema, mas esse não é o nosso escopo no momento. O método split pode ser utilizado para facilitar essa necessidade.

Confira o código a seguir:

var stringSeparaEmail = "[email protected]";
var resultadoSeparaEmail = stringSeparaEmail.split("@",1);
console.log(resultadoSeparaEmail);
/* saída:
Array(1) ["nomePessoa"]
*/


Perceba que a instrução aplicada com o método split para separar o e-mail contém o caractere @, que será utilizado para identificar o ponto de separação e o limite igual a um. Dessa forma, o array retornado conterá apenas a primeira parte do endereço eletrônico.

Já no algoritmo a seguir, omitimos o parâmetro limite. Dessa forma, o resultado do processamento será a divisão do e-mail em dois elementos na array, o primeiro com o nome da pessoa usuária e o segundo com o complemento do endereço.

var stringEmail = "[email protected]";
var resultadoEmail = stringEmail.split("@");
console.log(resultadoEmail);
/* saída:
Array(1) ["nomePessoa", "email.com.br"]
*/


Exemplo 5

É muito comum a leitura de dados armazenados em arquivos no formato CSV — Comma-separated values — que têm o seu conteúdo separado por vírgula. O método split também pode ser utilizado para facilitar a leitura desse modelo de dados. Confira, a seguir, um exemplo de código:

var arquivoCSVpv = "Confira; um; arquivo; com; dados; separados; por ponto-e-vírgula";
var resultadoArquivoCSVpv = arquivoCSVpv.split(/\s*;\s*/);
console.log(resultadoArquivoCSVpv);
/* saída
Array(7) ["Confira", "um", "arquivo", "com", "dados", "separados", "por ponto-e-vírgula"]
*/


No primeiro exemplo mostramos a simulação de um arquivo separado por ponto e vírgula, no qual é feita a separação por meio de uma expressão regular para identificar o separador desejado.

Já no próximo modelo de código, temos a simulação de um arquivo separado por vírgula. O resultado nos dois exemplos, portanto, retornam uma variável do tipo array com 7 elementos cada uma.

var arquivoCSV = "Confira, um, arquivo, com, dados, separados, por vírgula";
var resultadoArquivoCSV = arquivoCSV.split(/\s*,\s*/);
console.log(resultadoArquivoCSV);
/* saída
Array(7) ["Confira", "um", "arquivo", "com", "dados", "separados", "por vírgula"]
*/

Qual a compatibilidade com os navegadores?

Ao utilizar o método split no desenvolvimento de uma página é importante verificar a compatibilidade com os navegadores. Isso porque se ele for incompatível pode ocorrer falhas durante a execução da página. Veja a seguir, quais navegadores suportam esse recurso.

• Chrome;
• Firefox;
• Internet Explorer;
• Opera;
• Safari.

O método JavaScript split é um recurso que ajuda a manipular uma variável do tipo string e dividi-la partes para utilizar o seu conteúdo em outras situações. Existem diferentes formas de utilizar esse recurso, como para separar endereço de e-mail, fazer a leitura de arquivos separados por vírgula e muitas outras possibilidades.

Gostou do nosso conteúdo sobre método split em JavaScript? Então, confira este post sobre o que é Callback e de que forma é possível utilizar esse recurso!