Como checar se uma string está vazia em JavaScript

Neste artigo você vai aprender a como checar se uma string está vazia em JavaScript, utilizando um método muito simples da linguagem

Resposta rápida: em JavaScript existem três formas de checar se uma string está vazia

1. str === "" compara com a string vazia e só dá true quando a variável é exatamente uma string sem nada dentro

2. !str usa o fato de que a string vazia é um valor falsy, então pega o vazio mas também pega null, undefined, 0, NaN e false

3. str.trim() === "" pega também a string que só tem espaço em branco, que é o caso clássico de formulário

var teste = ""; console.log(teste === ""); // true console.log(!teste); // true console.log(" ".trim() === ""); // true

Use === "" quando o tipo já é garantido, use !str quando qualquer ausência de valor conta como vazio e use trim() quando o dado vem digitado por gente

Só não chame .trim() direto em algo que pode ser null ou undefined, porque isso estoura erro: cheque a presença antes com if (str && str.trim() === "")

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender a como identificar uma string que está sem valor!

A forma mais simples é verificar se o dado está presente com uma instrução NOT

Veja um exemplo prático:

var teste = "com valor";
var teste2 = "";
console.log(!teste); // false
console.log(!teste2); // true

Esta instrução com NOT verifica se o valor está presente em uma determinada variável

Podemos desta maneira verificar diversos outros tipos de valores, que representam vazios, como:

• NaN
• null
• undefined
• 0
• false

Assim cobriremos outras possibilidades que podem representar a ausência de um valor em uma variável do nosso sistema, não somente strings

Outra possibilidade é checar se o valor está vazio diretamente

Veja o exemplo:

var teste = "com valor";
var teste2 = "";
if(teste === "") {
    console.log("Está vazio");
}
if(teste2 === "") {
    console.log("Está vazio");
}

Desta forma está mais explícita a checagem por valores vazios e vai resolver o nosso problema da mesma forma, identificando strings sem valor determinado

Neste código, apenas o segundo if é ativado, pois a variável teste2 não possui valor

Conclusão

Neste artigo vimos como checar se uma string está vazia em JavaScript

Utilizamos o operador NOT, que valida se um valor está presente em uma determinada variável, assim resolvendo o nosso problema

Também vimos uma outra abordagem mais implícita, onde checamos diretamente se o valor é nulo ou não

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

A lista completa de valores falsy em JavaScript:

A lista da MDN não para nesses cinco, se liga nela inteira:

false

0

-0

0n (o zero do BigInt)

"" (a string vazia)

null

undefined

NaN

document.all (o único objeto falsy da linguagem, herança dos tempos de detecção de navegador)

Todo o resto é truthy

Por isso o !valor é ótimo pra pegar "ausência de dado" no geral, mas se o teu problema é ESPECIFICAMENTE string vazia, a comparação direta é mais honesta 🙂

E se a string só tiver espaços em branco?

Aqui mora o bug clássico do formulário

O usuário aperta a barra de espaço três vezes e manda

Pra tua checagem, " " não é string vazia, é string com conteúdo, e passa direto

var teste = " "; console.log(teste === ""); // false console.log(!teste); // false

A solução é limpar as pontas antes de comparar, com o trim()

var teste = " "; console.log(teste.trim() === ""); // true

O trim() remove os espaços em branco das duas pontas e devolve uma NOVA string, sem alterar a original

Ou seja: se tu precisa do valor limpo depois, guarda o retorno numa variável, porque a variável antiga continua com os espaços lá

var teste = " com valor "; var limpo = teste.trim(); console.log(limpo); // "com valor" console.log(teste); // " com valor "

Tome cuidado! Chamar .trim() em null ou undefined estoura erro na hora

Então, se o dado vem de fora (API, input, banco), cheque a presença primeiro e só depois faça o trim

if (teste && teste.trim() === "") { console.log("Só tem espaço em branco aqui"); }

E dá pra usar polyfill? Não precisa: o trim() faz parte do padrão desde o ECMAScript 5 e a MDN classifica ele como recurso bem estabelecido, disponível nos navegadores desde julho de 2015

E quando eu quero limpar só um lado?

A linguagem tem os dois irmãos do trim(), que entraram no padrão no ECMAScript 2019:

‘ abc ‘.trimStart() devolve ‘abc ‘

‘ abc ‘.trimEnd() devolve ‘ abc’

O suporte nas engines é antigo: Chrome desde a versão 66, Firefox desde a 61, Safari desde a 12 e Node.js desde a versão 8

E aquele trimLeft() e trimRight() que tu vê em código velho?

São só apelidos legados, que constam no Anexo B da especificação como aliases de trimStart e trimEnd

Em código novo, usa trimStart e trimEnd e segue o baile

Vazio não é a mesma coisa que null ou undefined:

Esse é o detalhe que derruba muito código em produção

Uma string vazia é um valor, ela existe

Já null e undefined são a ausência do valor

E isso muda o comportamento do operador de coalescência nula (o ??), padronizado no ECMAScript 2020 junto com o encadeamento opcional (?.)

O ?? retorna o operando da direita SÓ quando o da esquerda é null ou undefined

var nome = ""; console.log(nome ?? "Visitante"); // "" (a string vazia passa!)

var nome2 = null; console.log(nome2 ?? "Visitante"); // "Visitante"

Ou seja: string vazia e 0 NÃO disparam o fallback do ??

Se o que tu quer é "qualquer coisa vazia vira o padrão", aí o caminho é o ||, que cai no falsy inteiro

console.log("" || "Visitante"); // "Visitante"

Dois operadores parecidos, comportamentos bem diferentes, escolhe pelo que tu considera vazio no teu sistema

Qual abordagem usar em cada caso:

Quero saber se é EXATAMENTE uma string sem nada dentro? Usa str === ""

Quero pegar qualquer ausência de valor (vazio, null, undefined, 0, NaN, false)? Usa !str

O campo pode vir com espaço em branco do usuário? Usa str.trim() === ""

O dado pode chegar como null ou undefined e eu ainda quero limpar as pontas? Cheque a presença antes: if (str && str.trim() === "")

Quero um valor padrão só quando for null ou undefined? Usa ?? (a string vazia passa)

Quero um valor padrão pra qualquer coisa vazia? Usa ||

Não existe uma "melhor", existe a que combina com o que o teu sistema considera vazio

Perguntas frequentes sobre string vazia em JavaScript (usar o conteúdo do bloco ‘faq’ desta proposta, cada pergunta como H3)

Eu gravei esse conteúdo em vídeo antes de escrever aqui, com a estrutura básica de HTML mais um arquivo JS separado, rodando num servidor local pra abrir a página no navegador

Criei duas variáveis: uma com texto e outra vazia

Aí testei os dois caminhos com o console aberto: primeiro a comparação com "", que só ativou o if da variável vazia, e depois o operador NOT na frente das duas, que inverteu o resultado exatamente como a lógica de falsy manda

O que ficou claro na prática é uma coisa: no console tu não enxerga a diferença entre a string vazia e a string com três espaços, as duas parecem idênticas ali na tela

É por isso que o bug de formulário passa batido, e é por isso que eu virei chato com trim()

O vídeo com esse teste está incorporado no começo do post, se tu preferir ver a tela rodando