Como formatar data em JavaScript: guia de desempenho

Formatação de data em JavaScript: não é apenas "concatenar strings"

A pergunta "How do I format a date in JavaScript?" é uma das mais populares no Stack Overflow. E não é à toa. Todo desenvolvedor já enfrentou pelo menos uma vez a situação de precisar exibir uma data não no formato padrão "Fri Feb 14 2025 12:00:00 GMT+0300", mas de forma bonita: "14 de fevereiro de 2025" ou "2025-02-14". Parece simples, não? Mas há muitas armadilhas e problemas de desempenho aqui.

Neste artigo, vamos analisar todas as formas de formatar datas em JavaScript: desde as mais simples até as de alto desempenho. Você aprenderá como evitar erros típicos e tornar seu código não apenas bonito, mas também rápido. Vamos lá!

Por que o Date nativo é tão inconveniente?

O objeto Date nativo em JavaScript é, para dizer o mínimo, uma "bagagem do passado". Ele não fornece um método format() embutido, como em Python ou PHP. Em vez disso, você precisa montar a data manualmente usando getters:

const date = new Date();\nconst day = String(date.getDate()).padStart(2, '0');\nconst month = String(date.getMonth() + 1).padStart(2, '0');\nconst year = date.getFullYear();\nconsole.log(`${year}-${month}-${day}`); // "2025-02-14"

Isso funciona, mas parece complicado. E se você precisar localizar a data (por exemplo, para português), o código cresce para tamanhos indecentes. É por isso que os desenvolvedores buscam alternativas.

Método toLocaleDateString: simples e rápido

A maneira mais simples de formatar uma data em JavaScript é usar o método toLocaleDateString(). Ele aceita uma localidade e um objeto com opções:

const date = new Date();\nconst options = { year: 'numeric', month: 'long', day: 'numeric' };\nconsole.log(date.toLocaleDateString('pt-BR', options)); // "14 de fevereiro de 2025"

Este método se adapta automaticamente à localidade. Quer "February 14, 2025"? Basta mudar a localidade para 'en-US'.

Vantagens:

\n
• Simplicidade de uso.
\n
• Localização embutida.
\n
• Código legível como linguagem natural.
\n

Desvantagens:

\n
• Desempenho: cada chamada a toLocaleDateString() cria um novo objeto formatador. Em um loop de 1000 elementos, isso pode ser perceptível.
\n
• Controle limitado sobre o formato (não é possível, por exemplo, exibir "14.02.2025" sem o ano).
\n

Intl.DateTimeFormat: poderoso e eficiente

Para um controle mais refinado e otimização, use Intl.DateTimeFormat. Este é um objeto que pode ser criado uma vez e reutilizado várias vezes:

const formatter = new Intl.DateTimeFormat('pt-BR', {\n  year: 'numeric',\n  month: '2-digit',\n  day: '2-digit'\n});\n\nconst date1 = new Date();\nconst date2 = new Date('2024-12-25');\nconsole.log(formatter.format(date1)); // "14.02.2025"\nconsole.log(formatter.format(date2)); // "25.12.2024"

Por que é mais rápido? Porque o objeto formatador é criado uma vez, e não a cada chamada. Em testes de desempenho, Intl.DateTimeFormat é de 5 a 10 vezes mais rápido que toLocaleDateString() em loops.

Além disso, Intl.DateTimeFormat suporta opções adicionais, como weekday, hour, minute, second e até timeZone:

const formatter = new Intl.DateTimeFormat('en-US', {\n  weekday: 'long',\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit'\n});\nconsole.log(formatter.format(new Date())); // "Friday, Feb 14, 2025, 12:00 PM"

Pergunta difícil: e se você precisar exibir a data no formato "2025-02-14" sem localização? Intl.DateTimeFormat não consegue exibir horas, minutos e segundos separadamente, mas para datas simples isso é