Artigo original: https://www.freecodecamp.org/news/javascript-split-how-to-split-a-string-into-an-array-in-js/

De maneira geral, uma string nada mais é do que uma sequência de caracteres de determinada linguagem de programação.

Vejamos o exemplo de uma string com a seguinte sequência de caracteres: "Yes, You Can DO It!". Podemos criar uma string de maneiras diferentes em JavaScript. Por exemplo:

• Fazendo uma declaração literal

const msg = "Yes, You Can DO It!";

• Criando um objeto a partir do construtor String()

const msg = new String("Yes, You Can DO It!");

Um fato interessante sobre strings em JavaScript é que podemos acessar um caractere específico usando seu índice. O índice do primeiro caractere é 0 e os seguintes aumentam sequencialmente de 1 em 1. Assim, conseguimos acessar cada caractere de uma string, deste modo:

let str = "Yes, You Can Do It!";

console.log(str[0]); // Y
console.log(str[1]); // e
console.log(str[2]); // s
console.log(str[3]); // ,

console.log(str[10]); // a

A imagem abaixo representa o mesmo funcionamento:

Além da possibilidade de acessar caracteres de uma string por seus índices, o JavaScript também fornece diversos métodos para acessar caracteres, bem como recortar e manipular uma parte de uma string.

Neste artigo, aprenderemos sobre um método bastante útil chamado split(). Espero que goste do conteúdo.

O método split() em JavaScript

O método split() divide uma string em duas ou mais substrings, dependendo de um separador (ou splitter). Esse separador pode ser um único caractere, outra string ou até mesmo uma expressão regular.

Após separar a string em diversas substrings, o método split() adiciona essas substrings em um array e o retorna. Isso é feito sem nenhuma alteração na string original.

Vejamos um exemplo para entender melhor como isso funciona. A seguir, temos uma string declarada de maneira literal:

let message = 'I am a Happy Go lucky Guy';

Aqui, podemos chamar o método split() na string message. Vamos dividir a string usando um caractere de espaço ('  ') como base. O espaço servirá como um separador.

// Usando o caractere de espaço na divisão
let arr = message.split(' ');

// O array
console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"]


// Acessando cada elemento do array
console.log(arr[0]); // "I"
console.log(arr[1]); // "am"
console.log(arr[2]); // "a"
console.log(arr[3]); // "Happy"
console.log(arr[4]); // "Go",
console.log(arr[5]); // "lucky"
console.log(arr[6]); // "Guy"

O principal objetivo do método split() é obter as partes que queremos de uma string para usá-las de outras maneiras quaisquer.

Como dividir uma string caractere por caractere

Podemos dividir uma string caractere por caractere ao usar uma string vazia ('') como separador. No exemplo abaixo, dividimos a mesma mensagem do exemplo anterior usando uma string vazia. Como resultado, temos um array contendo todos os caracteres da string message.

console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]

💡 Tenha em mente que dividir uma string vazia ('') usando outra string vazia como separador retornará um array vazio. Pode ser que lhe façam essa pergunta na entrevista para uma vaga!

''.split(''); // retorna []

Como dividir uma string em um array

Podemos chamar o método split() em uma string sem usar um separador. Isso significa apenas que o método split() não recebeu nenhum argumento.

Quando chamamos o método split() em uma string sem especificar um separador, o retorno será um array contendo todo o conteúdo da string.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split()); // retornará ["I am a Happy Go lucky Guy"]

💡 Novamente, tenha em mente que chamar o método split() em uma string vazia ('') sem um separador retornará um array com uma string vazia. Nesse caso, o retorno não será um array vazio.

Veja estes dois exemplos para perceber a diferença:

// Este tetorna um array vazio
''.split(''); // retorna []

// Este retorna um array com uma string vazia
''.split() // retorna [""]

Como dividir uma string usando um caractere não correspondente

Normalmente, usamos um separador que faz parte da string que estamos tentando dividir. Em alguns casos, podemos acabar passado um divisor que não faz parte da string ou que não corresponde a nenhuma parte dela. Em situações assim, o método split() retorna um array com toda a string como elemento.

No exemplo abaixo, a string message não tem o caractere de vírgula (,). Vamos tentar dividir a string usando a vírgula (,) inexistente como separador.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]

💡 Você deve estar ciente desse comportamento para caso precise depurar o erro trivial de ter passado o divisor errado para o método split().

Como dividir com um limite

Se você pensou que o método split() tinha apenas o separador como parâmetro opcional, preciso contar a você que existe outro. Também podemos passar o limite (limit) como parâmetro opcional para o método split().

string.split(splitter, limit);

Como o próprio nome sugere, o parâmetro limit limitará o número de divisões. Isso significa que o array resultante terá, no máximo, o número de elementos especificado no parâmetro de limite.

No exemplo abaixo, dividimos uma string usando o caractere de espaço (' ') como separador. Passamos, também, o número 4 como o limite. Feito isso, o método split() retornará apenas quatro elementos — ignorando o restante.

let message = 'I am a Happy Go lucky Guy';
console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"] 

Como dividir usando regex

Também é possível passar uma expressão regular (regex) como separador para o método split(). Consideremos a seguinte string a ser dividida:

let message = 'The sky is blue. Grass is green! Do you know the color of the Cloud?';

Agora, vamos dividi-la nos caracteres de ponto final (.), ponto de exclamação (!) e ponto de interrogação (?). Podemos, agora, escrever uma regex para identificar a presença desses caracteres. Em seguida, passaremos a regex para o método split() e chamaremos o método na string acima.

let sentences = message.split(/[.,!,?]/);
console.log(sentences);

O resultado será semelhante a este:

Podemos ainda usar o parâmetro limit para limitar o resultado aos três primeiros elementos. Fazemos isso da seguinte maneira:

sentences = message.split(/[.,!,?]/, 3);
console.log(sentences);

O resultado será semelhante a este:

💡 Para pegar os caracteres usados na expressão regular, é preciso ajustar a regex um pouco. Devemos usar parênteses para pegar os caracteres correspondentes. A regex atualizada será:/([.,!,?])/.

Como substituir caracteres em uma string usando o método Split()

Podemos resolver diversos problemas usando o método split() em conjunto com outros métodos de string e de array. Vejamos um desses problemas agora. Pode ser uma situação comum precisar substituir todas as ocorrências de um caractere na string por outro caractere diferente.

Por exemplo, você pode querer criar o id de um elemento HTML a partir do valor de um elemento name. O valor de name pode ter um espaço (' '). Porém, no HTML, valores de id não podem ter espaços. Podemos resolver esse problema da seguinte maneira:

let name = 'Tapas Adhikary';
let subs = name.split(' ');
console.log(subs); // ["Tapas", "Adhikary"]

let joined = subs.join('-');
console.log(joined); // Tapas-Adhikary

Consideremos que o valor de name seja o primeiro nome (Tapas), com o sobrenome (Adhikary) separados por um espaço. Nesse caso, primeiramente devemos dividir name usando o caractere de espaço como separador. Isso retornará um array contendo os valores de nome e sobrenome: ['Tapas', 'Adhikary'].

Em seguida, usamos o método array chamado join() para unir os elementos do array usando o seguinte caractere: -. O método join() retorna uma string resultante da união dos elementos a partir do caractere passado como parâmetro. Assim, obteremos como resultado da operação o valor Tapas-Adhikary.

ES6: como dividir usando desestruturação de array

O ECMAScript2015 (ES6) introduziu uma maneira mais inovadora de extrair um elemento de um array e atribuí-lo a uma variável. Essa sintaxe inteligente é conhecida como desestruturação de array. Podemos usá-la juntamente com o método split() para atribuir o resultado a uma variável de maneira mais fácil e usando menos linhas de código.

let name = 'Tapas Adhikary';
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName);

Nesse exemplo, dividimos o nome usando o caractere de espaço como separador. Em seguida, atribuímos os valores retornados pelo array a duas variáveis (firstName e lastName) usando a sintaxe da desestruturação de array.

Antes de terminarmos...

👋 Gostaria de programar e aprender comigo? Você pode encontrar o mesmo conteúdo deste artigo no vídeo do YouTube abaixo. Basta abrir o seu editor de código favorito e começar a pôr a mão na massa.

Espero que você tenha achado este artigo esclarecedor e que ele o ajude a entender o método split() do JavaScript mais claramente. Peço que, por favor, pratique exaustivamente os exemplos aqui apresentados para obter um bom domínio sobre esses conceitos. Você pode encontrar todos os exemplos de código no meu repositório no GitHub.

Vamos nos conectar. Você pode me encontrar no Twitter (@tapasadhikary). Fique à vontade para me seguir.

Você também pode se interessar por estes artigos:

• The JavaScript Array Handbook – JS Array Methods Explained with Examples (conteúdo em inglês)
• 10 DevTools tricks to help you with CSS and UX design (conteúdo em inglês)
• A practical guide to object destructuring in JavaScript (conteúdo em inglês)
• 10 trivial yet powerful HTML facts you must know (conteúdo em inglês)
• 10 VS Code emmet tips to make you more productive (conteúdo em inglês)