Cadeias de texto
Você já sabe que um valor pode ser uma string. Esta sessão fica no texto: escrever entre aspas, contar caracteres, juntar pedaços, colocar aspas dentro e mostrar uma mensagem na página. Ferramentas como slice e toUpperCase vêm na próxima sessão.
Como funcionam as cadeias de texto em JavaScript?
Uma cadeia é texto que o motor trata como um único valor. Escreva com aspas simples, duplas ou backticks (`). "Olá" e 'Olá' são cadeias; 42 sem aspas é número. A propriedade length diz quantos caracteres há (espaços contam). Junte com +, ou monte uma linha com template literal e ${…}. Uma barra invertida (\) permite a mesma aspas por dentro. Para o usuário ver, use textContent.
Caixa de ferramentas de cadeias
📊 Ferramentas de texto que o iniciante usa primeiro
| Ideia | Exemplo | Resultado / nota |
|---|---|---|
| Aspas duplas | let s = "Hi"; |
Tipo string |
| Aspas simples | let s = 'Hi'; |
Mesmo tipo string |
length |
"Hi".length |
2 (caracteres) |
Juntar com + |
"Hi" + "!" |
"Hi!" |
| Escape | "Say \"hi\"" |
Aspas no mesmo estilo |
| Template | ` Hi, ${name} ` |
Insere o valor de name |
Escreva texto entre aspas
Escolha um estilo e feche igual. "" é uma cadeia vazia válida.
let greeting = "Hello";
let city = 'Tehran';
console.log(greeting);
console.log(city);
console.log(typeof greeting);
Conte caracteres com length
length é propriedade, não função — escreva .length, não .length(). Espaços contam.
let word = "JavaScript";
console.log(word.length);
console.log("Hi there".length);
Junte cadeias com +
O operador + cola texto. Se um lado for cadeia, o outro vira texto com frequência — por isso "Score: " + 10 vira "Score: 10". Lembre disso ao misturar números e texto.
let first = "Ada";
let last = "Lovelace";
let full = first + " " + last;
console.log(full);
console.log("Score: " + 10);
Coloque aspas dentro da cadeia
Duas opções fáceis: mude o estilo de aspas ou escape com barra invertida.
let a = "She said \"hello\"";
let b = 'It\'s ready';
console.log(a);
console.log(b);
Template literals (backticks)
Com backticks você escreve uma cadeia e insere valores com ${…} — útil para mensagens com palavras e variáveis.
let name = "Sam";
let line = `Hello, ${name}!`;
console.log(line);
Mostre uma cadeia na página
Monte a mensagem e atribua com textContent para o parágrafo mostrar texto simples.
<!DOCTYPE html>
<html>
<head>
<title>Strings — greeting on page</title>
</head>
<body>
<p id="out">…</p>
<script>
let user = "guest";
let msg = `Welcome, ${user}!`;
document.getElementById("out").textContent = msg;
</script>
</body>
</html>
O parágrafo mostra a saudação. Mude só user, atualize e confira a nova linha.
Experimente você
- Crie um
letcom aspas duplas e outro com simples; registre ambos etypeof. - Registre
.lengthde"JavaScript"e de uma frase curta com espaço. - Junte nome e sobrenome com
+e um espaço; registre o resultado. - Escreva uma cadeia com apóstrofo ou aspas duplas (escape ou troca de estilo).
- Monte
`Hello, ${name}!`com umlet namee registre. - No demo HTML mude só
user, atualize e leia a nova saudação.
Erros comuns
- Escrever
let s = Hello;sem aspas — o motor procura uma variávelHello - Abrir com
"e fechar com'(ou o contrário) - Chamar
length()como se fosse função — use.length - Esperar que
"5" + 5seja sempre soma numérica — com cadeia,+costuma concatenar - Pular cedo para muitos métodos de cadeia (eles vêm depois)
Resumo
- Cadeias são texto em
'…',"…"ou`…` lengthconta caracteres; é uma propriedade- Junte com
+, ou use template literals com${…} - Escape aspas do mesmo estilo com
\, ou mude o estilo - Em seguida: métodos de cadeia — como
slice,replacee maiúsculas/minúsculas
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo