Texto está em tudo
Um nome de usuário, a mensagem de boas-vindas do seu app, uma URL, o texto de um botão... quase tudo que o usuário lê é texto. Em programação, a gente chama esse texto de string, e você vai lidar com elas o tempo todo. Vamos começar pelo básico.
O que é uma string?
Uma string (cadeia) é texto: uma sequência de caracteres. É escrita entre aspas. O JavaScript aceita três formas:
const a = "aspas duplas";
const b = 'aspas simples';
const c = `crases (backticks)`;
As três criam o mesmo tipo de valor. As aspas duplas e simples são equivalentes; use umas ou outras conforme convier (por exemplo, aspas simples se o texto contém aspas duplas).
Concatenar com +
A forma clássica de unir textos é o operador +:
const nome = "Ana";
const saudacao = "Olá, " + nome + "!";
console.log(saudacao); // "Olá, Ana!"
Funciona, mas com muitas variáveis vira um quebra-cabeça de aspas e sinais de
+, fácil de errar: você esquece um espaço, falta um +... e lá vai depurar.
Template literals: seu novo melhor amigo
Aqui chega o momento realmente útil. Usando backticks (`) você escreve
o texto de uma vez e encaixa valores com ${...}, bem no lugar onde eles vão:
const nome = "Ana";
const idade = 25;
const frase = `${nome} tem ${idade} anos`;
console.log(frase); // "Ana tem 25 anos"
Dentro de ${ } você pode colocar qualquer expressão, não só variáveis:
const preco = 10;
console.log(`Total com imposto: ${preco * 1.21} €`);
Além disso, os template literals respeitam as quebras de linha tal como você
as escreve, sem caracteres estranhos no meio. Leia em voz alta: ${nome} tem ${idade} anos se entende quase como uma frase normal. Por isso são a forma
recomendada hoje em dia para construir texto: depois que você testa, não volta
mais pro +.
Exemplos
Concatenação vs template literal
const nome = "Ana";
const idade = 25;
console.log("Antigo: " + nome + " (" + idade + ")");
console.log(`Moderno: ${nome} (${idade})`);Expressões dentro do template
const a = 4;
const b = 6;
console.log(`${a} + ${b} = ${a + b}`);