Trabalhando com Texto em JavaScript

Imagine que você está criando um aplicativo de mensagens, um site de notícias ou até mesmo um simples formulário de cadastro. O que todos esses projetos têm em comum? A necessidade de trabalhar com texto! Em programação, chamamos esses textos de strings, e elas são um dos tipos de dados mais importantes e utilizados no JavaScript.

Nesta aula, você aprenderá não apenas como usar strings, mas por que elas funcionam de uma determinada maneira, quais são os diferentes métodos de criá-las e manipulá-las, e quando usar cada abordagem. Vamos transformar você de alguém que simplesmente escreve texto no código para alguém que domina a arte de manipular informações textuais com elegância e eficiência.

O que são Strings?

Conceito Fundamental

String é uma sequência de caracteres usada para representar texto. Pense em uma string como um colar de contas, onde cada conta é um caractere (letra, número, símbolo ou espaço). Assim como um colar tem contas em uma ordem específica, uma string tem caracteres em uma ordem específica.

let saudacao = "Olá, mundo!";
let nome = "Maria";
let numero = "123"; // Atenção: isso é texto, não número!

Por que strings são importantes?

Strings são a ponte entre humanos e computadores para comunicação textual. Praticamente tudo que você vê em uma tela — mensagens, nomes, descrições, artigos — é representado por strings. Dominar strings é essencial para:

Interagir com usuários: capturar e exibir informações
Processar dados: validar emails, formatar nomes, buscar palavras
Comunicar com sistemas: enviar e receber mensagens de servidores
Criar experiências: construir interfaces dinâmicas e personalizadas

Criando Strings: Três Formas Diferentes

JavaScript oferece três maneiras de criar strings, cada uma com suas características e usos específicos. Compreender quando usar cada uma é fundamental.

Aspas Simples (`'`)

let mensagem = 'Olá, pessoal!';
let cidade = 'São Paulo';

Quando usar: Para strings simples e diretas, especialmente quando o texto contém aspas duplas naturalmente.

let frase = 'Ele disse: "Bom dia!"'; // Aspas duplas dentro funcionam

Aspas Duplas (`"`)

let mensagem = "Olá, pessoal!";
let cidade = "São Paulo";

Quando usar: Funciona exatamente como aspas simples. A escolha entre aspas simples e duplas é geralmente uma questão de preferência pessoal ou padrão do projeto.

let frase = "É um dia maravilhoso!"; // Apóstrofo funciona naturalmente

Template Literals (Crases `)

let nome = "Carlos";
let idade = 25;
let mensagem = `Meu nome é ${nome} e tenho ${idade} anos.`;
console.log(mensagem); // "Meu nome é Carlos e tenho 25 anos."

Quando usar: Template literals são a forma moderna e mais poderosa. Use quando precisar:

Inserir variáveis no texto (interpolação)
Criar textos com múltiplas linhas
Realizar cálculos dentro do texto

Template Literals: O Poder da Interpolação

Interpolação de Variáveis

Interpolação significa inserir valores de variáveis diretamente dentro de uma string. É como ter espaços em branco em uma frase que são preenchidos automaticamente.

let produto = "Notebook";
let preco = 3500;
let mensagem = `O ${produto} custa R$ ${preco}`;
console.log(mensagem); // "O Notebook custa R$ 3500"

Por que isso é melhor que concatenação?

// Forma antiga (concatenação)
let mensagem1 = "O " + produto + " custa R$ " + preco;

// Forma moderna (interpolação)
let mensagem2 = `O ${produto} custa R$ ${preco}`;

A interpolação é mais legível, menos propensa a erros e mais fácil de manter.

Expressões JavaScript dentro de Strings

Dentro de ${} você pode colocar qualquer expressão JavaScript válida:

let produto = "Mouse";
let preco = 50;
let quantidade = 3;

let total = `Total: R$ ${preco * quantidade}`;
console.log(total); // "Total: R$ 150"

let desconto = `Preço com desconto: R$ ${preco - (preco * 0.1)}`;
console.log(desconto); // "Preço com desconto: R$ 45"

Strings Multilinhas

Template literals permitem criar textos com várias linhas naturalmente:

let email = `
Olá, ${nome}!

Bem-vindo ao nosso sistema.
Estamos felizes em tê-lo conosco.

Atenciosamente,
Equipe de Suporte
`;

Importante: Aspas simples e duplas não suportam múltiplas linhas naturalmente!

// Isso causará ERRO:
let errado = "Primeira linha
Segunda linha";

// Forma correta com aspas (usando \n):
let correto = "Primeira linha\nSegunda linha";

Caracteres Especiais: Sequências de Escape

Às vezes precisamos incluir caracteres especiais em strings. Para isso, usamos a barra invertida (\) seguida de um código. Chamamos isso de "sequência de escape".

Principais Sequências de Escape

// Nova linha
let texto1 = "Primeira linha\nSegunda linha";
console.log(texto1);
/* Saída:
Primeira linha
Segunda linha
*/

// Tabulação
let texto2 = "Nome:\tJoão";
console.log(texto2); // "Nome:    João"

// Aspas dentro de aspas
let texto3 = "Ela disse: \"Olá!\"";
console.log(texto3); // 'Ela disse: "Olá!"'

let texto4 = 'It\'s a beautiful day';
console.log(texto4); // "It's a beautiful day"

// Barra invertida
let caminho = "C:\\Users\\Documents";
console.log(caminho); // "C:\Users\Documents"

Tabela de Sequências de Escape

| Sequência | Significado | Exemplo | |-----------|-------------|---------| | \n | Nova linha | "Linha 1\nLinha 2" | | \t | Tabulação (tab) | "Nome\tIdade" | | \" | Aspas duplas | "Disse: \"Oi\"" | | \' | Aspas simples | 'It\'s ok' | | \\ | Barra invertida | "C:\\pasta" |

Conceito importante: Sequências de escape são necessárias porque alguns caracteres têm significados especiais em strings e precisamos "escapar" desse significado especial para usá-los literalmente.

Concatenação: Juntando Strings

Concatenação é o ato de juntar duas ou mais strings para formar uma nova string. É como colar palavras uma após a outra.

Usando o Operador `+`

let nome = "Ana";
let sobrenome = "Silva";
let nomeCompleto = nome + " " + sobrenome;
console.log(nomeCompleto); // "Ana Silva"

Concatenando com Variáveis de Diferentes Tipos

JavaScript automaticamente converte outros tipos para string durante a concatenação:

let texto = "Capítulo ";
let numero = 5;
let resultado = texto + numero;
console.log(resultado); // "Capítulo 5"

Um Comportamento Importante: `+` vs `-`

Este é um conceito crucial para entender como JavaScript trabalha:

console.log("5" + 1);  // "51" (concatenação)
console.log("5" - 1);  // 4 (subtração numérica)

Por quê? O operador + tem um significado especial com strings (concatenação), mas o operador - não. Quando JavaScript vê -, ele tenta converter tudo para números.

console.log("10" + 5);     // "105" (string)
console.log("10" - 5);     // 5 (número)
console.log("10" * 2);     // 20 (número)
console.log("10" / 2);     // 5 (número)

Implicação prática: Tenha cuidado ao trabalhar com valores de formulários HTML, pois eles sempre vêm como strings!

Propriedades e Métodos Essenciais

Strings em JavaScript são objetos especiais que vêm com diversas ferramentas integradas. Vamos explorar as mais importantes.

Propriedade `length` - Comprimento da String

A propriedade length retorna quantos caracteres existem na string:

let palavra = "JavaScript";
console.log(palavra.length); // 10

let frase = "Olá, mundo!";
console.log(frase.length); // 11 (espaços e pontuação contam!)

let vazia = "";
console.log(vazia.length); // 0

Por que é útil?

Validar tamanho de senhas
Limitar caracteres em formulários
Contar palavras em textos

Acessando Caracteres Individuais

Strings funcionam como arrays de caracteres. Cada caractere tem uma posição (índice) começando do zero:

let nome = "Maria";
//         01234  (posições/índices)

console.log(nome[0]); // "M"
console.log(nome[1]); // "a"
console.log(nome[4]); // "a"

Acessando o último caractere:

let palavra = "Programação";
let ultimo = palavra[palavra.length - 1];
console.log(ultimo); // "o"

Por que length - 1? Porque os índices começam em 0, então o último caractere está na posição (tamanho - 1).

Método `includes()` - Verificar se Contém Texto

Verifica se uma string contém outra string dentro dela:

let frase = "Eu adoro programar em JavaScript";

console.log(frase.includes("JavaScript")); // true
console.log(frase.includes("Python"));      // false
console.log(frase.includes("programar"));   // true

Caso prático: Sistema de busca

let produto = "Notebook Dell Inspiron 15";
let termoBusca = "dell";

if (produto.toLowerCase().includes(termoBusca.toLowerCase())) {
    console.log("Produto encontrado!");
}

Métodos `startsWith()` e `endsWith()`

Verificam se uma string começa ou termina com determinado texto:

let arquivo = "relatorio.pdf";

console.log(arquivo.startsWith("relatorio")); // true
console.log(arquivo.endsWith(".pdf"));        // true
console.log(arquivo.endsWith(".doc"));        // false

Caso prático: Validação de tipos de arquivo

let nomeArquivo = "imagem.jpg";

if (nomeArquivo.endsWith(".jpg") || nomeArquivo.endsWith(".png")) {
    console.log("Arquivo de imagem válido!");
} else {
    console.log("Tipo de arquivo não suportado.");
}

Método `indexOf()` - Encontrar Posição

Retorna a posição (índice) da primeira ocorrência de um texto dentro de uma string. Se não encontrar, retorna -1:

let frase = "JavaScript é incrível, JavaScript é poderoso";

console.log(frase.indexOf("JavaScript"));    // 0 (primeira ocorrência)
console.log(frase.indexOf("Python"));        // -1 (não encontrado)
console.log(frase.indexOf("é"));             // 11

Buscar a partir de uma posição:

let texto = "JavaScript é incrível, JavaScript é poderoso";
console.log(texto.indexOf("JavaScript", 15)); // 23 (segunda ocorrência)

Método `slice()` - Extrair Parte da String

Extrai uma parte da string criando uma nova string:

let palavra = "Programação";
//            0123456789...

console.log(palavra.slice(0, 8));  // "Programa"
console.log(palavra.slice(8));      // "ção"
console.log(palavra.slice(-4));     // "ação" (conta de trás pra frente)

Sintaxe: slice(início, fim) - extrai do início até fim (não incluindo o fim)

Caso prático: Pegar primeiras palavras

let texto = "JavaScript é uma linguagem incrível";
let primeiraParte = texto.slice(0, 10);
console.log(primeiraParte + "..."); // "JavaScript..."

Métodos `toLowerCase()` e `toUpperCase()`

Convertem toda a string para minúsculas ou maiúsculas:

let nome = "JavaScript";

console.log(nome.toLowerCase()); // "javascript"
console.log(nome.toUpperCase()); // "JAVASCRIPT"

Por que é importante? Para comparações sem diferenciar maiúsculas/minúsculas:

let senha = "SenhaSecreta123";
let confirmacao = "senhasecreta123";

if (senha.toLowerCase() === confirmacao.toLowerCase()) {
    console.log("Senhas coincidem!");
}

Métodos `replace()` e `replaceAll()`

Substituem partes de uma string por outro texto:

let frase = "Eu gosto de café";
let novaFrase = frase.replace("café", "chá");
console.log(novaFrase); // "Eu gosto de chá"

Diferença entre replace() e replaceAll():

let texto = "Java é bom, Java é útil";

// replace() substitui apenas a primeira ocorrência
console.log(texto.replace("Java", "JavaScript"));
// "JavaScript é bom, Java é útil"

// replaceAll() substitui todas as ocorrências
console.log(texto.replaceAll("Java", "JavaScript"));
// "JavaScript é bom, JavaScript é útil"

Conceito Fundamental: Imutabilidade de Strings

Um conceito crucial que você precisa entender:

Strings são IMUTÁVEIS

Isso significa que uma vez criada, uma string não pode ser modificada. Todos os métodos que "modificam" uma string na verdade criam e retornam uma NOVA string.

let original = "JavaScript";
let modificada = original.toUpperCase();

console.log(original);   // "JavaScript" (permanece inalterada!)
console.log(modificada); // "JAVASCRIPT" (nova string)

Por que isso importa?

let nome = "maria";
nome.toUpperCase(); // Isso NÃO modifica nome!
console.log(nome); // Ainda é "maria"

// Forma correta:
nome = nome.toUpperCase();
console.log(nome); // Agora é "MARIA"

Ou usando outra variável:

let nomeOriginal = "maria";
let nomeMaiusculo = nomeOriginal.toUpperCase();
console.log(nomeOriginal);  // "maria"
console.log(nomeMaiusculo); // "MARIA"

Conversão Entre Tipos

String para Número

let textoNumero = "42";
let numero = Number(textoNumero);

console.log(typeof textoNumero); // "string"
console.log(typeof numero);      // "number"

// Agora pode fazer operações matemáticas
console.log(numero + 8); // 50

Cuidado com valores inválidos:

let invalido = Number("abc");
console.log(invalido); // NaN (Not a Number)

Número para String

let numero = 123;
let texto = String(numero);

console.log(typeof numero); // "number"
console.log(typeof texto);  // "string"

// Ou usando toString()
let texto2 = numero.toString();

Exemplos Práticos

Exemplo 1: Formatação de Nome

// Problema: Usuário digitou nome todo em maiúsculas
let nomeUsuario = "JOÃO DA SILVA";

// Solução: Primeira letra maiúscula, resto minúscula
let nomeMinusculo = nomeUsuario.toLowerCase();
let primeiraLetra = nomeMinusculo[0].toUpperCase();
let restoDoNome = nomeMinusculo.slice(1);
let nomeFormatado = primeiraLetra + restoDoNome;

console.log(nomeFormatado); // "João da silva"

Exemplo 2: Validação Simples de Email

let email = "usuario@email.com";

// Verificar se contém @ e .
let temArroba = email.includes("@");
let temPonto = email.includes(".");
let posicaoArroba = email.indexOf("@");
let posicaoPonto = email.lastIndexOf(".");

// Email válido se:
// - Tem @ e .
// - @ vem antes do .
// - Tem pelo menos 1 caractere antes do @
let emailValido = temArroba && 
                  temPonto && 
                  posicaoArroba > 0 && 
                  posicaoPonto > posicaoArroba;

if (emailValido) {
    console.log("Email parece válido!");
} else {
    console.log("Email inválido!");
}

Exemplo 3: Extrair Extensão de Arquivo

let nomeArquivo = "documento.pdf";

// Encontrar a posição do último ponto
let posicaoUltimoPonto = nomeArquivo.lastIndexOf(".");

// Extrair a extensão
let extensao = nomeArquivo.slice(posicaoUltimoPonto + 1);

console.log(`Extensão: ${extensao}`); // "Extensão: pdf"

// Verificar tipo de arquivo
if (extensao === "pdf" || extensao === "doc") {
    console.log("Documento de texto");
} else if (extensao === "jpg" || extensao === "png") {
    console.log("Arquivo de imagem");
}

Exemplo 4: Criando uma Saudação Personalizada

let nome = "Maria";
let hora = 14; // 14:00 (2 da tarde)

let periodo;
if (hora < 12) {
    periodo = "Bom dia";
} else if (hora < 18) {
    periodo = "Boa tarde";
} else {
    periodo = "Boa noite";
}

let saudacao = `${periodo}, ${nome}! Bem-vinda ao sistema.`;
console.log(saudacao); // "Boa tarde, Maria! Bem-vinda ao sistema."

Boas Práticas ao Trabalhar com Strings

1. Escolha Consistente de Aspas

// Escolha um estilo e mantenha em todo o projeto
let opcao1 = 'Usando aspas simples';
let opcao2 = "Usando aspas duplas";

// Use template literals quando precisar de interpolação
let nome = "João";
let mensagem = `Olá, ${nome}!`; // Melhor que "Olá, " + nome + "!"

2. Use Template Literals para Clareza

// ❌ Evite concatenação complexa
let msg1 = "O " + produto + " custa R$ " + preco + " e está em " + status;

// ✅ Prefira template literals
let msg2 = `O ${produto} custa R$ ${preco} e está em ${status}`;

3. Lembre-se da Imutabilidade

// ❌ Errado: modificação não é salva
let texto = "javascript";
texto.toUpperCase();
console.log(texto); // Ainda é "javascript"

// ✅ Correto: salvar o resultado
let texto = "javascript";
texto = texto.toUpperCase();
console.log(texto); // "JAVASCRIPT"

4. Use Métodos Apropriados para Cada Tarefa

// Para verificar se contém
if (texto.includes("palavra")) { }

// Para verificar início/fim
if (arquivo.endsWith(".pdf")) { }

// Para extrair partes
let parte = texto.slice(0, 10);

// Para substituir
let novo = texto.replace("antigo", "novo");

Próximos passos

Na próxima aula você aprenderá sobre Estruturas de Repetição (loops):

Como automatizar tarefas repetitivas
Loop for tradicional
Loops while e do...while
Controle de fluxo com break e continue
Quando usar cada tipo de loop

Prepare-se para multiplicar o poder dos seus programas! 💪

Lembre-se: programação é prática! Experimente cada conceito, teste os exemplos, crie variações e explore possibilidades