Guia Rápido: trim(), trimStart(), trimEnd() em JavaScript

Os métodos trim(), trimStart() e trimEnd() removem espaços em branco de uma string que é uma tarefa muito comum em formulários, entradas de dados e exibições formatadas.

Por que funções trim() são úteis?

Muitas vezes, ao receber dados de um usuário, há espaços acidentais no início ou no fim. Esses espaços podem causar falhas em validações ou consultas.

Essas pequenas funções servem para tratarmos esses casos de forma semântica, aumentando a legibilidade do código, bem como a segurança de que o sistema fará o que é esperado.

Sintaxe: `string.trim()`

str.trim()        // remove espaços no início e no fim
str.trimStart()   // remove espaços no início
str.trimEnd()     // remove espaços no fim

str.trim()        // remove espaços no início e no fim
str.trimStart()   // remove espaços no início
str.trimEnd()     // remove espaços no fim

Exemplo básico

const valor = "   frontend   ";
console.log(valor.trim());       // "frontend"
console.log(valor.trimStart());  // "frontend   "
console.log(valor.trimEnd());    // "   frontend"

const valor = "   frontend   ";
console.log(valor.trim());       // "frontend"
console.log(valor.trimStart());  // "frontend   "
console.log(valor.trimEnd());    // "   frontend"

Exemplo prático

Suponha que você está validando o campo de e-mail de um formulário:

const email = "   luigi@frontend.com   ";
if (email.trim() === "") {
  console.log("Campo obrigatório.");
} else {
  console.log(`Email válido: ${email.trim()}`);
}

const email = "   luigi@frontend.com   ";
if (email.trim() === "") {
  console.log("Campo obrigatório.");
} else {
  console.log(`Email válido: ${email.trim()}`);
}

Saída:

Email válido: luigi@frontend.com

Email válido: luigi@frontend.com

Alternativas

Além desses métodos, é possível usar expressões regulares como:

valor.replace(/^\s+|\s+$/g, '');

valor.replace(/^\s+|\s+$/g, '');

Confesso que dou preferência para os métodos nativos, pois o código fica mais legível e confiável, facilitando a manutenção do mesmo.

Conclusão

Métodos de limpeza como trim são essenciais no tratamento de dados, são simples, rápidos e compatíveis com praticamente todos os ambientes JavaScript.

Referências:

• MDN Web Docs — trim
• MDN Web Docs — trimStart
• MDN Web Docs — trimEnd

Posts relacionados:

padStart() no JavaScript: Formatando strings com elegância Como usar String.prototype.padEnd() no JavaScript Memoização no React: Guia breve (useMemo, useCallback, React.memo e além) Como Funciona o Server-Side Rendering no Remix.run (e por que ele é diferente)