EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Strings em JavaScript

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.

Criando Strings

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

HTML 
<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.

💡 Em projetos de equipe, mantenha um estilo de aspas (simples ou duplas) em toda a base de código para consistência.

Strings São Imutáveis

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.

HTML 
<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.

Métodos Comuns

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

Método Propósito Exemplo
length Obter comprimento 'abc'.length → 3
indexOf() Encontrar posição de substring 'olá'.indexOf('lá') → 1
slice() Extrair substring 'olá'.slice(1,3) → 'lá'
replace() Substituir conteúdo 'gato'.replace('g','p') → 'pato'
toUpperCase() Converter para maiúsculas 'oi'.toUpperCase() → 'OI'
toLowerCase() Converter para minúsculas 'OI'.toLowerCase() → 'oi'
trim() Remover espaços extras ' oi '.trim() → 'oi'
split() Dividir em array por delimitador 'a,b'.split(',') → ['a','b']
includes() Verificar se substring existe 'olá'.includes('lá') → true
startsWith() Verificar se string começa com 'olá'.startsWith('ol') → true
endsWith() Verificar se string termina com 'olá'.endsWith('lá') → true

Exemplo: Métodos Comuns de String

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>Métodos Comuns de String</h2>
  <p id="output"></p>
  <script>
    let str = '  Olá, JavaScript!  ';
    let result = '';
    result += 'Original: "' + str + '"<br>';
    result += 'length: ' + str.length + '<br>';
    result += 'trim: "' + str.trim() + '"<br>';
    result += 'indexOf("Java"): ' + str.indexOf('Java') + '<br>';
    result += 'slice(2,7): "' + str.slice(2, 7) + '"<br>';
    result += 'includes("Script"): ' + str.includes('Script') + '<br>';
    result += 'startsWith("  O"): ' + str.startsWith('  O') + '<br>';
    result += 'toUpperCase: ' + str.toUpperCase() + '<br>';
    result += 'replace("JavaScript","Mundo"): ' + str.replace('JavaScript', 'Mundo') + '<br>';
    document.getElementById('output').innerHTML = result;
  </script>
</body>
</html>
▶ Experimente

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.

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}
HTML 
<!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

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>Comparação de Template Literal</h2>
  <p id="output"></p>
  <script>
    let nome = 'Bob';
    let cidade = 'São Paulo';
    let hobby = 'pintura';

    let old = 'Meu nome é ' + nome + ', moro em ' + cidade + ', e gosto de ' + hobby + '.';
    let modern = `Meu nome é ${nome}, moro em ${cidade}, e gosto de ${hobby}.`;

    let html = '<strong>Concatenação:</strong>' + old + '<br><br>';
    html += '<strong>Template literal:</strong>' + modern + '<br><br>';

    let a = 5, b = 3;
    html += `<strong>Expressões também funcionam:</strong>${a} + ${b} = ${a + b}<br>`;
    html += `<strong>Chamadas de método também:</strong>${nome.toUpperCase()}`;

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
▶ Experimente
💡 Quando você tem muitas variáveis, template literals são dez vezes mais legíveis que concatenação. Não hesite — prefira crases no seu código diário.

Caracteres de Escape

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

Caractere de Escape Significado
\n Nova linha
\t Tabulação
\\ A própria barra invertida
\" Aspa dupla
\' Aspa simples

Exemplo: Caracteres de Escape

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>Demonstração de Caracteres de Escape</h2>
  <p id="output"></p>
  <script>
    let s1 = 'Primeira linha\nSegunda linha';
    let s2 = 'Nome\tIdade\tCidade';
    let s3 = 'Caminho: C:\\Users\\Admin';
    let s4 = 'Ele disse: "Olá!"';
    let s5 = 'É um bom dia';

    let html = '';
    html += '<strong>\\n nova linha:</strong><pre>' + s1 + '</pre>';
    html += '<strong>\\t tabulação:</strong><pre>' + s2 + '</pre>';
    html += '<strong>\\\\ barra invertida:</strong>' + s3 + '<br>';
    html += '<strong>\\" aspa dupla:</strong>' + s4 + '<br>';
    html += "<strong>\\' aspa simples:</strong>" + s5 + '<br>';

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
▶ Experimente
⚠️ A própria barra invertida deve ser escapada. Ao escrever caminhos do Windows como C:\Users, você precisa de C:\\Users — esquecer de escapar é uma fonte comum de bugs.

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:

HTML 
<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

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<body>
  <h2>Gerando Conteúdo com Template Literals</h2>
  <div id="output"></div>
  <script>
    let products = [
      { name: 'Notebook', price: 4999 },
      { name: 'Mouse', price: 79 },
      { name: 'Teclado', price: 199 }
    ];

    let html = '<ul>';
    for (let p of products) {
      html += `<li>${p.name} - R$${p.price.toFixed(2)}</li>`;
    }
    html += '</ul>';

    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>
▶ Experimente

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

📖 Resumo

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

❓ Perguntas Frequentes

P：Qual a diferença entre indexOf e includes? R：indexOf retorna a posição inicial da substring (ou -1 se não encontrada), enquanto includes retorna um booleano. Se você só se importa se uma substring existe, includes é mais intuitivo; se precisa da posição exata, use indexOf.

P：Por que replace só substitui a primeira ocorrência? R：replace só substitui a primeira ocorrência por padrão. Para substituir todas, use replaceAll, ou use uma expressão regular com a flag g: str.replace(/abc/g, 'xyz').

P：Qual devo usar — aspas simples ou aspas duplas? R：São funcionalmente idênticas. Apenas seja consistente dentro da sua equipe. A maioria dos projetos usa aspas simples por padrão e muda para aspas duplas quando a string em si contém aspas simples.

📝 Atividades

  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.
100%