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.
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
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 é:
['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
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:
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
const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(regionNamesInEnglish.of('US'));
// United States
dateTimeField
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
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.
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 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:
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:
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 🙃
Referências
Top comments (3)
Obrigado !
Muito bom post, explicação simples e direta, recurso extremamente útil. Obrigado!
Obrigado <3