Nesta aula, você aprenderá a trabalhar com strings em JavaScript, desde a criação até métodos avançados de manipulação. As strings são sequências de caracteres usadas para representar texto, e são fundamentais em qualquer aplicação. Vamos explorar as diferentes formas de criar strings, como usar template literals para interpolação, os métodos mais comuns para manipulação, a imutabilidade das strings e noções básicas de Unicode para lidar com caracteres especiais.

Ao final, você será capaz de criar, modificar e analisar strings de forma eficiente, compreendendo as particularidades da linguagem. Vamos começar!

Criação e aspas

Em JavaScript, strings podem ser criadas usando aspas simples (' '), aspas duplas (" ") ou crases (` `). Todas são equivalentes, mas é importante manter consistência. Aspas simples e duplas funcionam de forma idêntica, enquanto as crases permitem template literals, que veremos a seguir.

Ao criar uma string, você pode incluir caracteres escapados com a barra invertida (\), como \n para nova linha ou \t para tabulação. Exemplo:

let nome = 'João';
let frase = "Ele disse: \"Olá!\"";
console.log(nome); // João
console.log(frase); // Ele disse: "Olá!"

É recomendado escolher um estilo e mantê-lo em todo o projeto. Muitos guias de estilo preferem aspas simples para strings, a menos que a string contenha aspas simples, caso em que se usa aspas duplas ou crases.

Template literals

Template literals (ou template strings) são strings delimitadas por crases (` `) que permitem interpolação de expressões usando ${expressão} e podem abranger múltiplas linhas. Isso torna a concatenação mais legível e poderosa.

Exemplo de interpolação:

let nome = 'Maria';
let idade = 30;
let mensagem = `Olá, ${nome}! Você tem ${idade} anos.`;
console.log(mensagem); // Olá, Maria! Você tem 30 anos.

Template literals também preservam quebras de linha:

let texto = `Linha 1
Linha 2`;
console.log(texto);
// Linha 1
// Linha 2

Além disso, você pode usar tagged templates para processar o template com uma função, mas isso é um tópico mais avançado.

Métodos essenciais

JavaScript oferece diversos métodos para manipular strings. Aqui estão os mais importantes:

  • length: retorna o número de caracteres (não é um método, mas uma propriedade).
  • toUpperCase() e toLowerCase(): convertem para maiúsculas/minúsculas.
  • indexOf(): retorna o índice da primeira ocorrência de uma substring, ou -1 se não encontrada.
  • slice(start, end): extrai uma parte da string do índice start até end (não incluindo end).
  • replace(): substitui parte da string (apenas a primeira ocorrência, a menos que use regex global).
  • split(): divide a string em um array com base em um separador.
  • trim(): remove espaços em branco das extremidades.

Exemplos:

let str = '  JavaScript é incrível!  ';
console.log(str.length); // 26
console.log(str.toUpperCase()); //   JAVASCRIPT É INCRÍVEL!  
console.log(str.indexOf('Script')); // 4
console.log(str.slice(2, 12)); // JavaScript
console.log(str.replace('incrível', 'fantástico')); //   JavaScript é fantástico!  
console.log(str.trim()); // JavaScript é incrível!
console.log('a,b,c'.split(',')); // ['a', 'b', 'c']

Muitos métodos retornam uma nova string, pois strings são imutáveis (próximo tópico).

Imutabilidade

Strings em JavaScript são imutáveis, ou seja, não podem ser alteradas após a criação. Qualquer operação que pareça modificar a string na verdade retorna uma nova string, deixando a original intacta.

Exemplo:

let str = 'Olá';
str.toUpperCase(); // retorna 'OLÁ', mas str continua 'Olá'
console.log(str); // 'Olá'

// Para "modificar", precisamos reatribuir:
str = str.toUpperCase();
console.log(str); // 'OLÁ'

Isso tem implicações de desempenho em loops que manipulam muitas strings, mas para a maioria dos casos é transparente. É importante lembrar que métodos como replace() ou slice() sempre retornam novas strings.

Unicode básico

JavaScript usa a codificação UTF-16 para strings. Isso significa que caracteres comuns (como letras latinas) ocupam 1 unidade de código (16 bits), enquanto caracteres especiais (emoji, caracteres de scripts raros) podem ocupar 2 unidades (surrogate pairs).

Propriedades como length contam unidades de código, não caracteres visíveis. Por exemplo:

let emoji = '😀';
console.log(emoji.length); // 2 (pois é um surrogate pair)
console.log(emoji); // 😀

Para iterar por caracteres reais, use o operador spread ou Array.from():

let chars = [...emoji];
console.log(chars.length); // 1
console.log(chars); // ['😀']

Além disso, métodos como charCodeAt() e codePointAt() ajudam a trabalhar com códigos Unicode. codePointAt() lida corretamente com surrogate pairs.

Exemplo:

let str = 'A';
console.log(str.charCodeAt(0)); // 65 (código ASCII)
console.log(str.codePointAt(0)); // 65

let emoji = '😀';
console.log(emoji.charCodeAt(0)); // 55357 (parte alta do surrogate)
console.log(emoji.codePointAt(0)); // 128512 (código completo)

Entender Unicode é essencial para internacionalização e para evitar bugs com caracteres especiais.

Boas práticas

Ao trabalhar com strings, prefira template literals para concatenação e strings multilinha. Use métodos como includes() e startsWith() para buscas mais semânticas. Sempre considere a imutabilidade para evitar efeitos colaterais.

Referências

Exercícios

  1. Crie uma função que receba um nome e retorne uma saudação usando template literals: "Olá, [nome]!"

    ✓ Resposta:
    function saudacao(nome) {
  return `Olá, ${nome}!`;
}
console.log(saudacao('Ana')); // Olá, Ana!

  2. Dada a string "Aprendendo JavaScript", use slice() para extrair a palavra "JavaScript".

    ✓ Resposta:
    let str = 'Aprendendo JavaScript';
let palavra = str.slice(11); // a partir do índice 11
console.log(palavra); // JavaScript
// Ou: str.slice(11, 21) para ser explícito

  3. Escreva uma função que receba uma string e retorne a mesma string com todas as letras maiúsculas, mas apenas se a string tiver mais de 5 caracteres. Caso contrário, retorne a string original.

    ✓ Resposta:
    function transformar(str) {
  if (str.length > 5) {
    return str.toUpperCase();
  }
  return str;
}
console.log(transformar('Olá')); // Olá
console.log(transformar('JavaScript')); // JAVASCRIPT

  4. Explique com um exemplo o conceito de imutabilidade de strings em JavaScript.

    ✓ Resposta:

    Imutabilidade significa que uma string não pode ser alterada depois de criada. Qualquer método que parece modificar a string retorna uma nova string. Exemplo:

    let str = 'abc';
str.toUpperCase(); // retorna 'ABC', mas str ainda é 'abc'
console.log(str); // 'abc'
// Para "mudar", precisamos reatribuir:
str = str.toUpperCase(); // agora str é 'ABC'

  5. Usando split() e join(), escreva uma função que receba uma frase e retorne a frase com as palavras invertidas (ex: "Olá mundo" -> "mundo Olá").

    ✓ Resposta:
    function inverterPalavras(frase) {
  return frase.split(' ').reverse().join(' ');
}
console.log(inverterPalavras('Olá mundo')); // mundo Olá
console.log(inverterPalavras('JavaScript é legal')); // legal é JavaScript