Obtendo os meses formatados com vanila JS
Tags: javascript, programming, portugues
Published: 2023-12-01 12:34:46

_**Nota:** apenas traduzi o texto abaixo e postei aqui._

Com vanilla JS, você pode usar `getMonth()` para recuperar o mês de qualquer Date object.

```javascript
var date = new Date();
var month = date.getMonth();
```

Porém, ele retorna um integer para o mês, começando em 0. Isso significa que janeiro é 0 em vez de 1 e dezembro é 11 em vez de 12.

Hoje, eu queria mostrar um truque para recuperar o nome de um mês formatado (como Janeiro ou Jan).

## Criando uma helper function

Vamos criar uma pequena helper function, getMonths(), para nos ajudar.

Aceitaremos dois argumentos. O primeiro será o ID do mês, começando com 1 para janeiro. O segundo será um booleano opcional, short. Se for true, usaremos nomes curtos para os nossos meses, como Jan em vez de Janeiro.

```javascript
var getMonths = function (month, short) {
    // Faça alguma coisa...
};
```


## Obtendo um array com os nomes do mês

Primeiro, vamos obter uma lista dos meses.

Criaremos uma variável format. Se short for definido e true, usaremos um formato de mês curto. Caso contrário, usaremos um longo.

```javascript
var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
};
```


A seguir, criaremos um array de 12 entries e usaremos o método `Array.map()` para criar um novo array com os nomes dos nossos meses.

Dentro do callback de Array.map(), acessaremos um Date() object, que foi instanciado inicialmente com um ano aleatório e um mês aleatório, e depois, a cada iteração, modificaremos seu mês com nosso ID do mês. Em seguida, chamaremos o método toLocalString() para retornar o nome do mês. Especificaremos que queremos o mês em nosso formato.

```javascript
var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
    var date = new Date(2000, 1);
    var monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (mon) {
        date.setMonth(mon);
        return date.toLocaleString({}, { month: format });
    });
};
```

Neste ponto, teremos agora um array monthNames, contendo nomes longos (`["Janeiro", "Fevereiro", ...]`) ou nomes curtos (`["Jan", "Fev"]`).

Como usamos o método toLocalString(), eles serão traduzidos em convenções locais de nomes de meses.

### Obtendo um mês

Em seguida, precisamos obter nossos meses.

Vamos fornecer uma maneira de recuperar todos os meses como um array. Se nenhum `month` argument for fornecido, retornaremos o `monthNames` array inteiro.

```javascript
var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
    var date = new Date(2000, 1);
    var monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (mon) {
        date.setMonth(mon);
        return date.toLocaleString({}, { month: format });
    });
    // Retorna o nome do mês (ou todos eles)
    return monthNames;
};
```

Se um mês for passado, subtrairemos 1 dele (de modo que 1, janeiro, seja mapeado para 0 no array e assim por diante). Então, pegaremos esse item do getMonths array e o retornaremos.

```javascript
var getMonths = function (month, short) {
    // Cria os nomes dos meses
    var format = short ? 'short' : 'long';
    var date = new Date(2000, 1);
    var monthNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(function (mon) {
        date.setMonth(mon);
        return date.toLocaleString({}, { month: format });
    });
    // Retorna o nome do mês (ou todos eles)
    if (month) {
        return monthNames[(month - 1)];
    }
    return monthNames;
};
```

## Compatibilidade de navegadores

A feature limitante para esta helper function é o método `toLocaleString()`.

Isso funcionará em todos os navegadores modernos e no IE11 e superior.

### Fonte
Newsletter de [Go Make Things](https://gomakethings.com/articles/)