Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Frontend SELF PT /Date. Formatação de datas e números

Date. Formatação de datas e números

Frontend SELF PT
Nível 37 , Lição 1
Disponível

2.1 Objeto Date

Trabalhar com datas e números é uma parte importante do desenvolvimento de aplicativos web. JavaScript fornece objetos e métodos embutidos para manipular datas e números. Nesta palestra, vamos dar uma olhada no objeto Date, seus métodos e formas de formatar datas e números.

O objeto Date no JavaScript representa uma data e hora. Ele possui muitos métodos para trabalhar com datas, incluindo obter a data e a hora atuais, definir data e hora, além de formatação.

Criando um objeto Date

Importante!
Se você criar um objeto Date() sem parâmetros, ele conterá a data e hora atuais — o momento de sua criação.

Você pode criar um objeto Date de várias maneiras.

1. Data e hora atuais:

JavaScript 
    
      const now = new Date();

      console.log(now); // Exibe a data e hora atuais

2. Definindo uma data e hora específica:

JavaScript 
    
      const specificDate = new Date('2024-07-07T10:00:00');

      console.log(specificDate); // Exibe a data 7 de julho de 2024

3. Definindo data e hora usando valores numéricos:

JavaScript 
    
      const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

      console.log(anotherDate); // Exibe a data 7 de julho de 2024

2.2 Métodos do objeto Date()

Obtendo componentes de data:

  • getFullYear(): obter o ano (quatro dígitos)
  • getMonth(): obter o mês (de 0 a 11)
  • getDate(): obter o dia do mês (de 1 a 31)
  • getHours(): obter as horas (de 0 a 23)
  • getMinutes(): obter os minutos (de 0 a 59)
  • getSeconds(): obter os segundos (de 0 a 59)

Exemplo:

JavaScript 
    
      const now = new Date();

      console.log(now.getFullYear()); // Ano atual
      console.log(now.getMonth()); // Mês atual (-1)
      console.log(now.getDate()); // Dia atual
      console.log(now.getHours()); // Hora atual
      console.log(now.getMinutes()); // Minuto atual
      console.log(now.getSeconds()); // Segundo atual

Configurando componentes de data:

  • setFullYear(year): definir o ano
  • setMonth(month): definir o mês
  • setDate(day): definir o dia do mês
  • setHours(hours): definir as horas
  • setMinutes(minutes): definir os minutos
  • setSeconds(seconds): definir os segundos

Exemplo:

JavaScript 
    
      const date = new Date();

      date.setFullYear(2025);
      date.setMonth(0); // Janeiro
      date.setDate(15);
      date.setHours(12);
      date.setMinutes(30);
      date.setSeconds(45);

      console.log(date.toString());

2.3 Formatação de datas

O JavaScript fornece métodos para formatar datas em uma string. O método mais popular é toLocaleDateString() para formatar a data dependendo do locale.

Exemplo de utilização do toLocaleDateString():

JavaScript 
    
      const now = new Date();

      console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
      console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
      console.log(now.toLocaleDateString('ru-RU')); // "07.07.2024" (DD.MM.YYYY)

Método toLocaleTimeString()

O método toLocaleTimeString() retorna a hora em formato de string localizado:

JavaScript 
    
const now = new Date();

console.log(now.toLocaleTimeString('en-CA')); 
console.log(now.toLocaleTimeString('en-GB'));

Método toLocaleString()

O método toLocaleString() retorna a data e a hora em formato de string localizado:

JavaScript 
    
      const now = new Date();

      console.log(now.toLocaleString('en-CA')); 
      console.log(now.toLocaleString('en-GB'));

Método toISOString()

O método toISOString() retorna a data e a hora no formato ISO 8601:

JavaScript 
    
      const now = new Date();

      console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"

2.4 Formatação de números

Método toLocaleString()

O método toLocaleString() permite formatar números de acordo com as configurações locais:

JavaScript 
    
      const number = 1234567.89;

      console.log(number.toLocaleString()); // "1,234,567.89" no formato dos EUA ou "1 234 567,89" no formato local
      console.log(number.toLocaleString('de-DE')); // "1.234.567,89" no formato da Alemanha

Formatação de números com Intl.NumberFormat

O construtor Intl.NumberFormat oferece ainda mais flexibilidade para formatar números:

JavaScript 
    
      const number = 1234567.89;

      const usFormatter = new Intl.NumberFormat('en-US');
      console.log(usFormatter.format(number)); // "1,234,567.89"

      const deFormatter = new Intl.NumberFormat('de-DE');
      console.log(deFormatter.format(number)); // "1.234.567,89"

      const customFormatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      });

      console.log(customFormatter.format(number)); // "$1,234,567.89"
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION