JavaScript Katana

Guia de Formatação de Datas em JavaScript: Do Básico às Melhores Práticas

Processamento de Dados (Strings, Números, Datas, Arrays, Objetos)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introdução

Ao trabalhar com JavaScript, você frequentemente encontrará situações que exigem o tratamento de datas. Por exemplo, exibir a data atual em um site ou gerenciar cronogramas de eventos. Embora a formatação de datas em JavaScript possa parecer simples à primeira vista, muitos iniciantes a acham confusa na prática.

Neste artigo, explicaremos claramente a formatação de datas em JavaScript, desde o básico até técnicas mais avançadas. Ao ler este guia, você adquirirá o seguinte conhecimento:

  • Operações básicas com datas usando o objeto JavaScript Date
  • Métodos de formatação de datas usando APIs nativas como toLocaleDateString() e Intl.DateTimeFormat
  • Uma introdução a bibliotecas úteis que ajudam a simplificar a formatação de datas

Este artigo foi criado para ajudar iniciantes a começar pelos fundamentos, ao mesmo tempo em que oferece aos usuários intermediários técnicas práticas e dicas de uso de bibliotecas. Dessa forma, você poderá adquirir habilidades úteis no desenvolvimento do mundo real.

Na próxima seção, começaremos revisando os fundamentos do objeto JavaScript Date. Entender esses conceitos básicos permitirá que você obtenha uma visão mais profunda de como a formatação de datas funciona.

2. Fundamentos | Manipulação Básica de Datas em JavaScript

JavaScript fornece o objeto Date para lidar com datas e horários. Ao usar esse objeto, você pode obter a data e hora atuais, especificar uma data específica e realizar operações flexíveis, como adicionar ou subtrair tempo.

2.1 Criando Objetos Date

1. Obtendo a Data e Hora Atuais

const today = new Date();
console.log(today); // Example output: Sun Dec 29 2024 14:30:00 GMT+0900 (JST)

2. Especificando uma Data Específica

const specificDate = new Date(2024, 11, 29); // Year, month (0-based), day
console.log(specificDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

3. Criando uma Data a partir de um Timestamp

const timestampDate = new Date(1703827200000); // Timestamp
console.log(timestampDate); // Example output: Sun Dec 29 2024 00:00:00 GMT+0900 (JST)

2.2 Recuperando Componentes da Data

1. Obtendo Ano, Mês e Dia

const today = new Date();
console.log(today.getFullYear()); // Get year: 2024
console.log(today.getMonth() + 1); // Get month (0-based): 12
console.log(today.getDate()); // Get day: 29

2.3 Editando e Manipulando Datas

1. Adicionando Dias a uma Data

today.setDate(today.getDate() + 1);
console.log(today); // Displays the next day's date

2. Alterando para uma Data Específica

today.setFullYear(2025); // Change year to 2025
today.setMonth(0); // Change month to January
today.setDate(1); // Change day to the 1st
console.log(today); // Example output: Wed Jan 1 2025 14:30:00 GMT+0900 (JST)

2.4 Fusos Horários e UTC

1. Recuperando Valores de Data em UTC

console.log(today.getUTCFullYear()); // Get UTC year
console.log(today.getUTCMonth() + 1); // Get UTC month
console.log(today.getUTCDate()); // Get UTC day

2. Obtendo uma String de Data no formato ISO 8601

console.log(today.toISOString()); // Get ISO 8601 formatted string

Resumo

Nesta seção, explicamos os fundamentos da manipulação de datas usando o objeto JavaScript Date.

3. Métodos de Formatação de Data [Basic]

Ao trabalhar com datas em JavaScript, personalizar o formato de exibição é extremamente importante. Nesta seção, explicaremos os métodos básicos de formatação de datas.

3.1 Concatenção Simples de Strings

1. Exibindo Datas no Formato AAAA-MM-DD

const today = new Date();
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example output: 2024-12-29

3.2 Formatação com toLocaleDateString()

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // Example output: 2024/12/29

3.3 Formato ISO 8601 e toISOString()

console.log(date.toISOString());
// Example output: 2024-12-29T05:30:00.000Z

Resumo

Nesta seção, cobrimos os conceitos básicos de formatação de datas em JavaScript.

4. Formatação Avançada de Datas [Practical]

Nesta seção, apresentaremos técnicas de formatação de datas mais avançadas e práticas.

4.1 Formatação Personalizada com Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
});
console.log(formatter.format(date)); // Example output: 2024/12/29

4.2 Manipulação de Fusos Horários

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short'
});
console.log(formatter.format(utcDate));
// Example output: 12/29/2024, EST

Resumo

Nesta seção, introduzimos técnicas avançadas de formatação de datas adequadas para aplicações do mundo real.

5. Bibliotecas Externas Úteis para Formatação de Datas

JavaScript oferece muitos recursos nativos para manipulação de datas, mas o uso de bibliotecas externas pode melhorar significativamente a eficiência e a legibilidade.

5.1 Usando Moment.js (Descontinuado)

const moment = require('moment');
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

5.2 Por que date-fns é Recomendado e Exemplo de Uso

import { format } from 'date-fns';
const today = new Date();
const formattedDate = format(today, 'yyyy-MM-dd HH:mm:ss');
console.log(formattedDate); // Example output: 2024-12-29 14:30:00

Resumo

Nesta seção, apresentamos os benefícios das bibliotecas externas e como usá‑las efetivamente.

6. Erros Comuns e Soluções [FAQ]

Ao trabalhar com datas em JavaScript, tanto iniciantes quanto desenvolvedores intermediários frequentemente encontram erros e problemas semelhantes. Nesta seção, explicamos problemas comuns, suas causas e soluções práticas em formato de FAQ.

Q1. Por que o mês desloca em um?

Exemplo de Problema

const date = new Date(2024, 12, 29);
console.log(date); // Output: 2025-01-29

Causa

Em JavaScript, os índices de mês começam em 0, não em 1.

Solução

Ao especificar um mês, subtraia 1 do valor do mês desejado.

const date = new Date(2024, 11, 29); // Correct way to specify December
console.log(date); // Output: 2024-12-29

Q2. Por que os números não são preenchidos com zero?

Exemplo de Problema

const today = new Date();
const month = today.getMonth() + 1; // 12
const day = today.getDate();       // 9
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-9

Solução

Use slice() ou padStart() para aplicar preenchimento com zero.

const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
console.log(`${today.getFullYear()}-${month}-${day}`);
// Output: 2024-12-09

Resumo

Nesta seção, explicamos erros comuns e considerações importantes relacionadas ao manuseio de datas em JavaScript, usando um formato de FAQ.

7. Notas Importantes e Boas Práticas

O manuseio de datas em JavaScript é poderoso, mas mal‑entendidos de suas especificações ou uso inadequado podem facilmente gerar erros e bugs. Nesta seção, apresentamos notas importantes e boas práticas para uma manipulação de datas segura e eficiente.

7.1 Índices de Mês e Preenchimento com Zero

const date = new Date(2024, 11, 29); // December 29
console.log(date.getMonth() + 1); // Output: 12

7.2 Gerenciamento de Fusos Horários

Usando UTC

const utcDate = new Date(Date.UTC(2024, 11, 29, 12, 0, 0));
console.log(utcDate.toISOString());
// Output: 2024-12-29T12:00:00.000Z

7.3 Melhorando a Legibilidade e a Manutenibilidade

Criando uma Função de Formatação de Data

function formatDate(date) {
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}
console.log(formatDate(new Date()));
// Output: 2024-12-29

Resumo

Nesta seção, explicamos notas importantes e boas práticas para lidar com datas em JavaScript.

8. Conclusão

O tratamento de datas em JavaScript é um recurso frequentemente necessário no desenvolvimento web. Neste artigo, explicamos tudo passo a passo, desde conceitos básicos até técnicas avançadas, permitindo que os leitores adquiram conhecimento que pode ser aplicado em projetos reais.

Revisão dos Principais Aprendizados

  1. Operações Básicas com Data
  • Explicadas as operações fundamentais e considerações importantes ao usar o objeto Date.
  1. Fundamentos e Técnicas Avançadas de Formatação
  • Introduzida a formatação personalizada, suporte à internacionalização e manipulação de fusos horários.
  1. Uso de Bibliotecas Externas
  • Comparadas as funcionalidades e o uso de bibliotecas como date-fns e Day.js .
  1. Erros Comuns e Soluções
  • Organizados casos típicos de erro e suas soluções em formato de FAQ.

Próximos Passos

  1. Experimente o código de exemplo em seu próprio ambiente.
  2. Introduza bibliotecas e faça comparações.
  3. Desafie-se com aplicações práticas em sistemas reais.

Considerações Finais

O tratamento de datas em JavaScript pode se tornar complexo ao considerar especificações detalhadas e internacionalização. Use este artigo como referência para refinar ainda mais suas habilidades práticas.

広告