JavaScript: O que é Intl?
Tags: javascript, programming, node, codenewbie
Published: 2023-02-02 11:28:28

O Intl é uma API de internacionalização do próprio JavaScript aqui vou falar um pouco mais sobre ela.

## Como usar?

Basicamente você cria uma nova instância do Intl com o tipo de formatador que você deseja utilizar, passando a localidade como parâmetro e suas configurações e simplesmente sai usando sendo feliz.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/xT5LMHxhOfscxPfIfm/giphy.gif">

Agora vamos dar uma olhada em algumas opções dessa API.


### Collator

Segundo o MDN "O objeto collator permite a comparação de cadeia sensível à linguagem.", porém eu achei um pouco confuso, pesquisando um pouco mais encontrei algo que possa ajudar melhor "O objeto intl.collator permite que você compare string em relação á nacionalidade e internacionalização". Ou seja, nós podemos usar o `Intl.Collator`, para comparar strings especiais de localidades diferentes.

Achei um exemplo que deixa isso bem mais claro, vamos lá. No alfabeto alemão a letra ä vem depois do a, porém no alfabeto sueco ela vem no final do alfabeto, depois da letra z

```javascript
console.log(['b', 'a', 'z', 'ä'].sort(new Intl.Collator('de').compare));
console.log(['b', 'a', 'z', 'ä'].sort(new Intl.Collator('sv').compare));
```
e o resultado então é: 

```javascript
['a', 'ä', 'b', 'z']
['a', 'b', 'z', 'ä']
```

Por fim a string que o `Intl.Collator` recebe como paramêtro é uma tag para a abreviação de alguns idiomas.

- ar — Arabic
- bg — Bulgarian
- ca — Catalan
- zh-Hans — Chinese, Han (Simplified variant)
- cs — Czech
- da — Danish
- de — German
- el — Modern Greek (1453 and later)
- en — English
- es — Spanish
- fi — Finnish
- fr — French
- he — Hebrew
- hu — Hungarian
- is — Icelandic
- it — Italian
- ja — Japanese
- ko — Korean
- nl — Dutch
- no — Norwegian
- pl — Polish
- pt — Portuguese
- rm — Romansh
- ro — Romanian
- ru — Russian
- hr — Croatian
- sk — Slovak
- sq — Albanian
- sv — Swedish
- th — Thai
- tr — Turkish
- ur — Urdu
- id — Indonesian
- uk — Ukrainian
- be — Belarusian
- sl — Slovenian
- et — Estonian
- lv — Latvian
- lt — Lithuanian
- tg — Tajik
- fa — Persian
- vi — Vietnamese
- hy — Armenian
- az — Azerbaijani
- eu — Basque
- hsb — Upper Sorbian
- mk — Macedonian
- tn — Tswana
- xh — Xhosa
- zu — Zulu
- af — Afrikaans
- ka — Georgian
- fo — Faroese
- hi — Hindi
- mt — Maltese
- se — Northern Sami
- ga — Irish
- ms — Malay (macrolanguage)
- kk — Kazakh
- ky — Kirghiz
- sw — Swahili (macrolanguage)
- tk — Turkmen
- uz — Uzbek
- tt — Tatar
- bn — Bengali
- pa — Panjabi
- gu — Gujarati
- or — Oriya
- ta — Tamil
- te — Telugu
- kn — Kannada
- ml — Malayalam
- as — Assamese
- mr — Marathi
- sa — Sanskrit
- mn — Mongolian
- bo — Tibetan
- cy — Welsh
- km — Central Khmer
- lo — Lao
- gl — Galician
- kok — Konkani (macrolanguage)
- syr — Syriac
- si — Sinhala
- iu — Inuktitut
- am — Amharic
- tzm — Central Atlas Tamazight
- ne — Nepali
- fy — Western Frisian
- ps — Pushto
- fil — Filipino
- dv — Dhivehi
- ha — Hausa
- yo — Yoruba
- quz — Cusco Quechua
- nso — Pedi
- ba — Bashkir
- lb — Luxembourgish
- kl — Kalaallisut
- ig — Igbo
- ii — Sichuan Yi
- arn — Mapudungun
- moh — Mohawk
- br — Breton
- ug — Uighur
- mi — Maori
- oc — Occitan (post 1500)
- co — Corsican
- gsw — Swiss German
- sah — Yakut
- qut — Guatemala
- rw — Kinyarwanda
- wo — Wolof
- prs — Dari
- gd — Scottish Gaelic

*Lista retirada do artigo [Comparing Non-English Strings with JavaScript Collators
](https://levelup.gitconnected.com/comparing-non-english-strings-with-javascript-collators-dcce6845c878)*

### DateTimeFormat

O nome desse método já diz tudo. Bom ele basicamente serve para formatar uma data de acordo com a localização. Ele tem várias opções que você pode usar para configurar a data do jeito que precisar. 

> Confesso que fiquei surpreso com as possibilidades

Abaixo alguns exemplos:

```javascript
console.log(new Intl.DateTimeFormat(['pt-BR'], {
    dateStyle: 'full',
    //opções...
}).format(new Date()));
// domingo, 29 de janeiro de 2023
console.log(new Intl.DateTimeFormat(['pt-BR'], {
    dateStyle: 'long',
}).format(new Date()));
// 29 de janeiro de 2023
console.log(new Intl.DateTimeFormat(['pt-BR'], {
    dayPeriod: "long"
}).format(new Date()));
// da tarde
console.log(new Intl.DateTimeFormat(['en-US'], {
    dateStyle: 'full'
}).format(new Date()));
// Sunday, January 29, 2023
```

### DisplayNames
O `Intl.DisplayNames` faz traduções consistentes de region, script, dateTimeField, language e currency. Abaixo alguns exemplos e como cada um funciona:

**region**
```javascript
const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(regionNamesInEnglish.of('US'));
// United States
```

**dateTimeField**
```javascript
const dateTimeFieldInPortuguese = new Intl.DisplayNames(['pt-BR'], { type: 'dateTimeField' });
console.log(dateTimeFieldInPortuguese.of('month'));
// mês
```

**language**
Nesse caso deve usar o código da linguagem. [Aqui você encontra mais detalhes sobre](https://unicode.org/reports/tr35/#Unicode_language_identifier)

```javascript
const langueInPortuguese = new Intl.DisplayNames(['pt-BR'], { type: 'language' });
console.log(langueInPortuguese.of('fr'));
// francês
```

**currency**
Aqui você passa como parâmetro o currency code da moeda desejada.

```javascript
const currencyInPortuguese = new Intl.DisplayNames(['pt-BR'], { type: 'currency' });
console.log(currencyInPortuguese.of('EUR'));
// Euro
```

Como são muitos detalhes não vou conseguir abordar todos aqui, mas caso tenha curiosidade [neste link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of) tem mais alguns detalhes sobre o uso do `Intl.DisplayNames`.

### NumberFormat

O nome da função `Intl.NumberFormat` é bem auto explicativo também, ele formata números moedas e afins. Abaixo eu deixei alguns exemplos de uso:

```javascript
const number = 1273162.12

const formatterBR = new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL'
});
console.log(formatterBR.format(number))
// R$ 1.273.162,12

const formatterJP = new Intl.NumberFormat('ja-JP', {
    style: 'currency',
    currency: 'JPY'
})

console.log(formatterJP.format(number))
// ￥1,273,162
```


### RelativeTimeFormat

O objetivo do `Intl.RelativeTimeFormat`é formatar uma passagem de tempo e trazer para a linguagem passada por parâmetro. Como no exemplo abaixo:

```javascript
const formatterBR = new Intl.RelativeTimeFormat('pt-BR', {
    style: 'narrow'
});

const formatterEN = new Intl.RelativeTimeFormat('en', {
    style: 'narrow'
});

console.log(formatterBR.format(1, 'day'))  // em 1 dia
console.log(formatterBR.format(-1, 'day')) // há 1 dia
console.log(formatterEN.format(1, 'day')) // in 1 day
console.log(formatterEN.format(-1, 'day')) // 1 day ago
```

### Ponto importante

A api do `Intl` tem mais alguns métodos que não abordei aqui. Resolvi apenas trazer os que achei mais interessantes e úteis, todas as opções abordadas tem várias opções de configuração, a ideia é apenas te dar um overview e trazer para o conhecimento de vocês a existência dessa API e evitar criar funções na mão, igual alguém aqui fez...

**Muito obrigado por ler 🙃**

[Minhas redes sociais](https://bento.me/cmsdev)

<img src="https://media.giphy.com/media/xULW8v7LtZrgcaGvC0/giphy.gif" />

_Referências_

[JavaScript Interview Question #50: How does Intl.Collator work in JS
 by Coderslang: Become a Software Engineer](https://dev.to/coderslang/javascript-interview-question-50-how-does-intl-collator-work-in-js-3ff8)

[Comparing Non-English Strings with JavaScript Collators
](https://levelup.gitconnected.com/comparing-non-english-strings-with-javascript-collators-dcce6845c878)

[MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator)