← Voltar ao blog

Manipulação de Strings em JavaScript: Técnicas Avançadas

•12 minutos de leitura

Strings são um dos tipos de dados mais fundamentais em JavaScript. Seja você um desenvolvedor iniciante ou experiente, dominar manipulação de strings é essencial para escrever código eficiente e elegante. Neste guia, vamos além do básico e exploramos técnicas avançadas que todo desenvolvedor JavaScript deveria conhecer.

Strings São Imutáveis em JavaScript

Um conceito fundamental que muitos desenvolvedores não percebem: strings em JavaScript são imutáveis. Isso significa que uma vez criada, uma string nunca pode ser modificada. Quando você "altera" uma string, na verdade está criando uma nova string.

let str = "Hello";

str[0] = "J"; // Isso não funciona!

console.log(str); // Ainda é "Hello"

// A forma correta:

str = "J" + str.slice(1); // "Jello"

Essa imutabilidade tem implicações importantes para performance. Operações que parecem simples, como concatenação em loops, podem ser custosas se feitas incorretamente.

Métodos Essenciais de String

JavaScript oferece dezenas de métodos para trabalhar com strings. Vamos explorar os mais importantes:

1. Template Literals (Crase)

Introduzidos no ES6, template literals revolucionaram como trabalhamos com strings. Use crases (`) ao invés de aspas:

const nome = "Maria";

const idade = 25;

// Forma antiga (ruim):

const msg1 = "Olá, " + nome + "! Você tem " + idade + " anos.";

// Forma moderna (boa):

const msg2 = `Olá, ${nome}! Você tem ${idade} anos.`;

// Suporta múltiplas linhas:

const html = `

<div>

<h1>${titulo}</h1>

</div>

`;

2. Busca e Verificação

const texto = "JavaScript é incrível";

// Verifica se contém:

texto.includes("Java"); // true

texto.startsWith("Java"); // true

texto.endsWith("vel"); // true

// Encontra posição:

texto.indexOf("Script"); // 4

texto.lastIndexOf("i"); // 19

3. Extração e Corte

const str = "Hello World";

// slice(início, fim) - aceita negativos

str.slice(0, 5); // "Hello"

str.slice(-5); // "World"

// substring(início, fim) - não aceita negativos

str.substring(6, 11); // "World"

// substr(início, comprimento) - DEPRECATED

// Evite usar substr!

4. Transformação

const texto = " JavaScript ";

texto.toUpperCase(); // " JAVASCRIPT "

texto.toLowerCase(); // " javascript "

texto.trim(); // "JavaScript"

texto.trimStart(); // "JavaScript "

texto.trimEnd(); // " JavaScript"

// Substituição:

texto.replace("Java", "Type"); // " TypeScript "

texto.replaceAll(" ", "_"); // "_JavaScript_"

Técnicas Avançadas

Inversão de String

Uma das operações mais comuns em entrevistas técnicas. Existem várias formas de inverter uma string:

const str = "Hello";

// Método 1: Array reverse (mais comum)

const reversed1 = str.split('').reverse().join('');

// Método 2: Loop tradicional

let reversed2 = '';

for (let i = str.length - 1; i >= 0; i--) {

reversed2 += str[i];

}

// Método 3: Spread operator e reverse

const reversed3 = [...str].reverse().join('');

Use nossa ferramenta de inversão de strings para testar diferentes textos instantaneamente!

Verificação de Palíndromo

Um palíndromo é uma palavra que se lê igual de trás para frente (como "arara" ou "reviver").

function isPalindromo(str) {

// Remove espaços e converte para minúsculas

const limpo = str.toLowerCase().replace(/\s/g, '');

const invertido = limpo.split('').reverse().join('');

return limpo === invertido;

}

isPalindromo("arara"); // true

isPalindromo("Socorram me subi no onibus em Marrocos"); // true

Capitalização Inteligente

// Primeira letra maiúscula

function capitalize(str) {

return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();

}

// Cada palavra com primeira letra maiúscula

function titleCase(str) {

return str.split(' ')

.map(word => capitalize(word))

.join(' ');

}

titleCase("olá mundo JavaScript"); // "Olá Mundo Javascript"

Remoção de Caracteres Duplicados

function removerDuplicados(str) {

// Usando Set para remover duplicatas

return [...new Set(str)].join('');

}

removerDuplicados("programming"); // "progamin"

Performance: Concatenação de Strings

Concatenar strings em loops pode ser muito ineficiente. Veja as alternativas:

❌ Evite (Muito Lento):

let resultado = '';

for (let i = 0; i < 10000; i++) {

resultado += 'texto'; // Cria nova string a cada iteração!

}

✓ Use (Rápido):

const partes = [];

for (let i = 0; i < 10000; i++) {

partes.push('texto');

}

const resultado = partes.join(''); // Junta tudo de uma vez

Regex: Poder Avançado

Expressões regulares permitem manipulações complexas de strings. Alguns padrões úteis:

const texto = "Meu email é teste@exemplo.com";

// Extrair email:

const email = texto.match(/[\w.-]+@[\w.-]+\.\w+/);

// Remover números:

const semNumeros = "abc123def456".replace(/\d+/g, '');

// Validar formato:

const isEmail = /^[\w.-]+@[\w.-]+\.\w+$/.test(email);

Métodos Modernos (ES2021+)

JavaScript continua evoluindo. Alguns métodos mais recentes que você deveria conhecer:

// replaceAll (ES2021) - substitui todas as ocorrências

"banana".replaceAll("a", "o"); // "bonono"

// at() - acesso por índice (aceita negativos)

"hello".at(-1); // "o"

// padStart / padEnd - preenchimento

"5".padStart(3, "0"); // "005"

"5".padEnd(3, "0"); // "500"

Casos de Uso Práticos

1. Formatação de CPF

function formatarCPF(cpf) {

const numeros = cpf.replace(/\D/g, '');

return numeros.replace(/(\d{3})(\ d{3})(\ d{3})(\ d{2})/,

'$1.$2.$3-$4');

}

formatarCPF("12345678900"); // "123.456.789-00"

2. Slug para URLs

function criarSlug(texto) {

return texto

.toLowerCase()

.normalize('NFD').replace(/[\u0300-\u036f]/g, '')

.replace(/[^\w\s-]/g, '')

.replace(/\s+/g, '-');

}

criarSlug("Olá Mundo! 2024"); // "ola-mundo-2024"

3. Truncar Texto

function truncar(texto, maxLength) {

if (texto.length <= maxLength) return texto;

return texto.slice(0, maxLength - 3) + '...';

}

truncar("Este é um texto muito longo", 15); // "Este é um te..."

Conclusão

Manipulação de strings é uma habilidade fundamental que você usará constantemente como desenvolvedor JavaScript. Das operações básicas aos padrões avançados com regex, dominar essas técnicas tornará seu código mais limpo, eficiente e profissional.

Lembre-se das principais lições:

  • Strings são imutáveis - cada operação cria uma nova string
  • Use template literals para concatenação e strings multilinha
  • Evite concatenação em loops - use arrays e join()
  • Conheça os métodos modernos (replaceAll, at, etc.)
  • Regex é poderoso mas pode ser complexo - use com cuidado
  • Teste e pratique regularmente com diferentes casos de uso

Continue praticando e explorando! Use nossas ferramentas gratuitas para testar manipulações de strings em tempo real e desenvolver sua intuição sobre como essas operações funcionam.

Built with v0