7.2.1 - Variáveis
🔗 Juntando tudo! Concatenação de Variáveis 💬➕
🔗 Juntando tudo! Concatenação de Variáveis 💬➕
Quando a gente quer unir informações em uma única frase, mensagem ou valor, usamos algo chamado concatenação. É como montar uma frase com blocos de LEGO, juntando variáveis, textos e números!
🧱 O que é concatenação?
Concatenar significa unir valores, normalmente textos (strings), formando uma nova frase ou resultado. Em JavaScript, existem duas formas principais de fazer isso:
🧵 1. Concatenando com o operador +
+Essa é a forma mais clássica e simples:
let nome = "Lara";
let idade = 20;
let mensagem = "Olá, meu nome é " + nome + " e tenho " + idade + " anos.";
console.log(mensagem);
// Olá, meu nome é Lara e tenho 20 anos.💡 Repare que usamos aspas para os textos fixos e + para juntar com as variáveis.
🧠 Cuidado: tudo vira texto!
Quando você concatena uma string com um número, o número vira string também:
let resultado = "10" + 5;
console.log(resultado); // "105" e não 15!✨ 2. Template Literals (crase ` `)
` `)Desde o ES6, existe uma forma muito mais moderna e legível de concatenar:
let nome = "Carlos";
let cidade = "Salvador";
let mensagem = `Olá, meu nome é ${nome} e moro em ${cidade}.`;
console.log(mensagem);
// Olá, meu nome é Carlos e moro em Salvador.✅ Mais fácil de escrever ✅ Mais fácil de ler ✅ Funciona até com quebras de linha!
🧪 Exemplo com quebra de linha:
let nome = "Júlia";
let hobby = "desenhar";
let bio = `Oi! Eu sou ${nome}.
Adoro ${hobby} nas horas vagas.`;
console.log(bio);
// Oi! Eu sou Júlia.
// Adoro desenhar nas horas vagas.📌 Dica bônus: concatenação de arrays
Sim, você também pode juntar arrays!
let a = [1, 2];
let b = [3, 4];
let juntos = a.concat(b); // [1, 2, 3, 4]Ou, mais modernamente:
let juntos = [...a, ...b]; // Spread operator!🎯 Recapitulando
+junta strings (e converte número em texto se misturar!)Template literals (com crase `) deixam tudo mais bonito ✨
Também dá pra juntar arrays!
Prontinho! Agora você já pode montar frases dinâmicas no seu código como um(a) verdadeiro(a) desenvolvedor(a) 💬👩💻👨💻
Last updated