JavaScript: Strings em JavaScript

Última atualização: 2026-10-13

Strings são um dos tipos de dados mais usados em JavaScript. Nove em cada dez linhas de código que você escreve envolvem strings — exibir texto, construir mensagens, processar entrada do usuário — nada disso funciona sem elas.

Métodos de string：toLowerCase() toUpperCase() startsWith() includes() replaceAll endsWith() indexOf() replace() slice() split() trim()

1. Criando Strings

JavaScript oferece três maneiras de criar strings: aspas simples, aspas duplas e crases.

<script>
let a = 'olá';        // Aspas simples
let b = "mundo";      // Aspas duplas
let c = `olá`;        // Crases
</script>

Aspas simples e aspas duplas são funcionalmente idênticas — escolha a que preferir. Crases, no entanto, são diferentes: suportam template literals, que são muito mais poderosas. Mais sobre isso abaixo.

Esta é uma armadilha que muitos desenvolvedores encontram: uma vez que uma string é criada, seu conteúdo não pode ser alterado. Todo método que você chama retorna uma nova string sem modificar a original.

<script>
let str = 'olá';
str[0] = 'O';       // Falha silenciosamente — str ainda é 'olá'
str.toUpperCase();   // Retorna 'OLÁ', mas str em si não é alterada
let upper = str.toUpperCase(); // Correto — capture o valor de retorno em uma variável
</script>

Lembre-se: métodos de string nunca modificam a original. Você deve atribuir o valor de retorno a uma nova variável.

3. Métodos Comuns

JavaScript tem muitos métodos de string, mas estes são os que você usará diariamente:

▶ Exemplo: Métodos Comuns de String

Note que slice(início, fim) extrai do início até mas não incluindo o fim. Isso é consistente com a maioria das linguagens — você vai se acostumar.

4. Template Literals

Strings criadas com crases (`) são chamadas de template literals. Elas têm dois recursos incríveis:

1. Suporte a múltiplas linhas — sem precisar de \n; basta pressionar Enter
2. Interpolação — incorpore variáveis ou expressões com ${variável}

<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Template Literals</title></head>
<body>
<div id="output"></div>
<script>
let nome = 'Alice';
let idade = 20;

// Jeito antigo: concatenação, fácil de esquecer um sinal de mais
let msg1 = 'Meu nome é ' + nome + ', eu tenho ' + idade + ' anos.';

// Jeito novo: template literals, muito mais limpo
let msg2 = `Meu nome é ${nome}, eu tenho ${idade} anos.`;

document.getElementById('output').innerHTML =
  '<strong>Concatenação:</strong>' + msg1 + '<br>' +
  '<strong>Template literal:</strong>' + msg2;
</script>
</body>
</html>

▶ Exemplo: Template Literals vs Concatenação

5. Caracteres de Escape

Alguns caracteres têm significado especial dentro de strings. Para exibi-los literalmente, use uma barra invertida \ para escapar:

▶ Exemplo: Caracteres de Escape

6. Concatenação de String vs Template Literals

Ambas as abordagens funcionam para casos simples, mas a concatenação rapidamente se torna dolorosa à medida que o número de variáveis cresce:

<script>
// Concatenação: fácil de esquecer ou duplicar sinais de mais
let html = '<div class="' + cls + '">' + titulo + '</div>';

// Template literal: claro à primeira vista
let html = `<div class="${cls}">${titulo}</div>`;
</script>

▶ Exemplo: Gerando Conteúdo HTML

Usar template literals dentro de loops para gerar HTML é extremamente comum no desenvolvimento real e muito mais agradável que concatenação.

Métodos de string：toLowerCase() toUpperCase() startsWith() includes() replaceAll endsWith() indexOf() replace() slice() split() trim()

❓ Perguntas Frequentes

📖 Resumo

• Strings podem ser criadas com aspas simples, aspas duplas ou crases — prefira crases
• Strings são imutáveis; todos os métodos retornam novas strings sem modificar a original
• slice(início, fim) inclui o início mas exclui o fim; indexOf retorna -1 se não encontrado
• Template literals usam ${} para interpolação e suportam expressões e chamadas de método
• Caracteres de escape começam com \ — \n para nova linha, \\ para uma barra invertida literal
• trim() é especialmente útil para processar entrada do usuário — não esqueça de usá-lo

📝 Exercícios

1. Escreva um programa que recebe uma frase como entrada e exibe a contagem de palavras (dica: use split por espaços, depois length).
2. Escreva um programa que transforma a string " Olá Mundo " em "olá mundo" totalmente em minúsculas e sem espaços, usando trim e toLowerCase.
3. Use um template literal para gerar um trecho HTML de auto-apresentação contendo seu nome, idade e hobbies (usando variáveis), e exiba na página.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós