Obtenha o nome do mês em JavaScript

1. Usando a função toLocaleString em JavaScript
2. Usando o objeto Intl.DateTimeFormat em JavaScript
3. Usando o código personalizado para obter o nome do mês a partir de uma determinada data em JavaScript

Em JavaScript, temos um método getMonth() do objeto de data. Ele retorna o índice de um mês começando em 0. Mas a maioria dos aplicativos em cenários do mundo real exige este mês um nome em ordem alfabética para facilitar a leitura do usuário final. Pode ser difícil escrever código para representar o nome do mês para o índice do mês determinado. Vejamos algumas maneiras de obter o nome de um mês em JavaScript.

Usando a função toLocaleString em JavaScript

Podemos usar a função toLocaleString do javascript para obter o nome do mês de um objeto de data. Ele oferece opções para retornar os nomes dos meses em um determinado idioma suportado pela função toLocaleString.

Sintaxe da função toLocaleString

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

Parâmetros:

A função geralmente é usada sem nenhum parâmetro para obter a string de data. toLocaleString aceita dois parâmetros opcionais, o primeiro sendo a chave do idioma (por exemplo, en-US para inglês, ar-EG para árabe etc.) e o segundo é um conjunto de configurações passadas como options. As options são um objeto.

Tipo de devolução:

toLocaleString retorna um valor de string que representa a data no formato MM/DD/YYYYY, hh:mm:ss a. a para AM / PM.

Podemos usar a função para obter as formas longas e curtas dos nomes dos meses. Os mais longos exibem os nomes completos dos meses, enquanto os mais curtos listam apenas os três primeiros caracteres do nome do mês na saída. O uso é o seguinte.

const dateObj = new Date('1-1-2021');
const dateString = dateObj.toLocaleString();
const enDateString = dateObj.toLocaleString('en-US');
const monthNameLong = dateObj.toLocaleString('en-US', {month: 'long'});
const monthNameShort = dateObj.toLocaleString('en-US', {month: 'short'});
console.log(dateString);
console.log(enDateString);
console.log(monthNameLong);
console.log(monthNameShort);

Produção:

1/1/2021, 12:00:00 AM
1/1/2021, 12:00:00 AM
January
Jan

Obtemos nomes de meses mais longos com o {mês: 'longo'} passado como a opção. Para nomes de meses mais curtos, precisamos definir a configuração do mês como curto como em {mês:" curto "}.

Observação

• toLocaleString é compatível com todos os navegadores, incluindo o navegador Internet Explorer.
• Comparar a saída da string de data com uma data armazenada como string em uma variável pode não fornecer resultados consistentes entre os navegadores. Por exemplo, o código a seguir pode ser executado de maneira diferente no Firefox e no Internet Explorer e em versões anteriores dos navegadores MS Edge.

('1/5/2021, 6:00:00 PM' ===
 new Date('2021-01-05T12:30:00Z').toLocaleString('en-US')) ?
    true :
    false;

Saída no Chrome:

true

Saída no Internet Explorer:

false

Isso acontece porque o Internet Explorer e as versões mais antigas da borda inserem caracteres de controle no início e no final da string de data. Você pode tentar verificar o comprimento da saída da string por new Date("2021-01-05T12:30:00Z").toLocaleString("en-US") no Chrome e no Internet Explorer para observar a diferença. O IE diz que o comprimento é 32, enquanto o cromo diz 20. E também, o caractere na posição zero nos consoles do IE como "", enquanto no cromo, ele dá "1".

Usando o objeto Intl.DateTimeFormat em JavaScript

Intl.DateTimeFormat retorna um objeto DateTimeFormat. Ele tem uma função format que pega a data alvo como entrada e a formata com base nas options que definimos. É semelhante à função toLocaleString. A diferença é que toLocaleString é aplicado em um objeto com o tipo de dados como uma data. Enquanto em Intl.DateTimeFormat, passamos a data como um argumento para a função format. Os nomes dos parâmetros diferem para vários cenários de formato de data (consulte documentos MDN para obter mais detalhes). Intl.DateTimeFormat é compatível com todos os navegadores. Podemos obter os nomes mais longos e mais curtos para os meses usando Intl.DateTimeFormat conforme descrito no código a seguir.

new Intl.DateTimeFormat('en-US', {month: 'short'})
    .format(new Date('1-1-2021')) new Intl
    .DateTimeFormat('en-US', {month: 'long'})
    .format(new Date('1-1-2021'))

Produção:

Jan
January

Observação

• O construtor Intl.DateTimeFormat é criado para formatar datas. Intl.DateTimeFormat tem muito mais flexibilidade com a formatação dos objetos data. Podemos usá-lo para obter a string de data em um idioma local. Ele ainda oferece suporte a uma opção para fornecer um idioma de fallback em seu objeto options.
• É compatível com todos os navegadores da web, incluindo as versões anteriores do Internet Explorer.

Usando o código personalizado para obter o nome do mês a partir de uma determinada data em JavaScript

Se não quisermos usar os dois métodos JavaScript embutidos acima, podemos escrever um código personalizado para obter o nome do mês para uma data correspondente. Podemos escrever o código de várias maneiras. Podemos usar duas matrizes: uma contendo os nomes dos meses longos e a outra com os nomes dos meses mais curtos. Mas a seguir está o código conciso e eficiente que usa uma única matriz de nomes de meses para retornar o nome completo e o nome abreviado. Vejamos o código a seguir.

const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
  'September', 'October', 'November', 'December'
];

getLongMonthName =
    function(date) {
  return monthNames[date.getMonth()];
}

getShortMonthName =
    function(date) {
  return monthNames[date.getMonth()].substring(0, 3);
}

    console.log(getLongMonthName(new Date('1-1-2021')));
console.log(getShortMonthName(new Date('1-1-2021')));
console.log(getLongMonthName(new Date('11-5-2021')));
console.log(getShortMonthName(new Date('11-5-2021')));
console.log(getLongMonthName(new Date('12-8-2021')));
console.log(getShortMonthName(new Date('12-8-2021')));

Produção:

January
Jan
November
Nov
December
Dec

Usamos duas funções no trecho de código acima: uma para obter o nome completo e outra para os mais curtos.

• Codificamos a função getLongMonthName() que recebe um objeto de data como parâmetro e retorna o nome completo do mês correspondente. Ele usa a função embutida em javascript, getMonth(). A função getMonth() do objeto de data retorna o índice do mês. Usamos esse índice para obter o nome do mês do array monthNames que contém o nome completo dos meses.
• Temos a função getShortMonthName que possui uma etapa adicional para encurtar o nome do mês. Ele usa a mesma lógica que getLongMonthName. Truncamos o resultado final para três caracteres usando a função substring() do javascript. Portanto, obtemos o nome do mês abreviado para a data passada como parâmetro.
• Podemos precisar modificar o array monthNames para suportar mais de um idioma para permitir a localização e internacionalização do código. Podemos usar diferentes matrizes de string para armazenar nomes de meses de vários idiomas. E nem sempre é verdade que os nomes mais curtos dos meses são apenas os três primeiros caracteres. Cada idioma tem sua representação para nomes de meses mais curtos. Portanto, podemos precisar usar duas matrizes para essas linguagens: uma contendo os nomes dos meses mais longos e a outra contendo os nomes dos meses mais curtos. A lógica em getLongMonthName() ainda pode ser usada para obter o nome do mês correspondente ao valor da data passado como um parâmetro.