Join e Split em JavaScript: Array Vira Texto e Volta

POV: Você converteu array em texto e o texto virou array de novo 😎🔄

Começamos com um array de nomes (Pedro, Maria e João) e usamos join() para transformar essa lista em uma única string, definindo vírgula e espaço como separador entre os nomes. O resultado é um texto só, pronto para ser exibido ou salvo, mas que ainda guarda a estrutura original da lista através da pontuação escolhida.

"A gente pega uma matriz, que é a matriz nomes, e ele converte essa matriz nome num string. E o split é o contrário, ele pega um string e ele converte em um array. Dois métodos que fazem o caminho de ida e volta."

🔄 O que são join() e split() em JavaScript?

join() e split() são métodos que permitem a conversão entre arrays e strings . O join() transforma um array em uma string, unindo todos os elementos com um separador . O split() faz o oposto: transforma uma string em um array, quebrando o texto pelo separador definido .

// Array → String com join()
const nomes = ["Pedro", "Maria", "João"];
const texto = nomes.join(", ");
console.log(texto); // "Pedro, Maria, João"

// String → Array com split()
const letras = "A, B, C";
const arrayLetras = letras.split(", ");
console.log(arrayLetras); // ["A", "B", "C"]
        

🔗 O método join() — transformando array em string

O método join() é extremamente útil quando você precisa exibir ou salvar um array como texto . O separador define como os elementos serão concatenados .

const frutas = ["maçã", "banana", "laranja"];

// Separador padrão (vírgula)
const texto1 = frutas.join();
console.log(texto1); // "maçã,banana,laranja"

// Com separador personalizado
const texto2 = frutas.join(" e ");
console.log(texto2); // "maçã e banana e laranja"

// Sem separador (concatenação direta)
const texto3 = frutas.join("");
console.log(texto3); // "maçãbananalaranja"
        

✂️ O método split() — transformando string em array

O método split() é essencial para processar textos que chegam de formulários, APIs ou arquivos CSV . O separador define onde a string será dividida .

const texto = "JavaScript,Python,Java,Ruby";

// Dividindo por vírgula
const linguagens = texto.split(",");
console.log(linguagens); // ["JavaScript", "Python", "Java", "Ruby"]

// Dividindo por espaço
const frase = "Olá mundo JavaScript";
const palavras = frase.split(" ");
console.log(palavras); // ["Olá", "mundo", "JavaScript"]

// Dividindo em caracteres
const letras = "ABC";
const arrayLetras = letras.split("");
console.log(arrayLetras); // ["A", "B", "C"]
        

🔑 O papel do separador em join() e split()

O separador é o elemento mais importante nesses métodos . Ele define como o array será unido e onde a string será cortada .

const dados = ["nome", "idade", "cidade"];

// join com diferentes separadores
console.log(dados.join(", ")); // "nome, idade, cidade"
console.log(dados.join(" | ")); // "nome | idade | cidade"
console.log(dados.join(";")); // "nome;idade;cidade"

const csv = "nome,idade,cidade";

// split com diferentes separadores
console.log(csv.split(",")); // ["nome", "idade", "cidade"]
console.log(csv.split(";")); // ["nome,idade,cidade"]
        

📚 Exemplos práticos

1. Formatando lista de tags

const tags = ["JavaScript", "React", "Node.js"];

// Para exibição
const tagsTexto = tags.join(", ");
console.log("Tags: " + tagsTexto); // "Tags: JavaScript, React, Node.js"

// Para salvar no banco
const tagsSalvas = tags.join(";");
console.log(tagsSalvas); // "JavaScript;React;Node.js"
        

2. Processando dados de formulário

// Dados recebidos de um formulário (string)
const dadosForm = "João,28,São Paulo";

// Convertendo para array
const dadosArray = dadosForm.split(",");
console.log(dadosArray); // ["João", "28", "São Paulo"]

// Acessando cada dado
const [nome, idade, cidade] = dadosArray;
console.log(`Nome: ${nome}, Idade: ${idade}, Cidade: ${cidade}`);
        

⏱️ Capítulos do vídeo

• 00:00 — Join e split em JavaScript: o conceito dos dois métodos
• 00:15 — Join() em JavaScript: convertendo array de nomes em string
• 00:25 — Split() em JavaScript: transformando string em array
• 00:45 — Definindo o separador: a vírgula quebrando a string
• 00:54 — Resultado no console: string final vs array gerado
• 01:08 — Encerramento e convite para se inscrever

🎯 Conclusão

join() e split() são dois métodos complementares que permitem a conversão entre arrays e strings . Eles são essenciais para manipular dados em diferentes formatos e aparecem em diversas situações no dia a dia de um programador .

Neste artigo, você aprendeu:

• ✅ O que o método join() faz com um array
• ✅ O que o método split() faz com uma string
• ✅ Como definir o separador usado em cada um deles
• ✅ Como o join() transforma uma lista em texto formatado
• ✅ Como o split() transforma um texto em array com índices
• ✅ Onde join() e split() costumam ser usados na prática

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre Join e Split em JavaScript

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo