Sådan kommer du i gang med internationalisering i JavaScript

Ved at tilpasse vores apps til forskellige sprog og lande giver vi en bedre brugeroplevelse. Det er enklere for brugerne at håndtere kendte notationer for datoer, valutaer og tal.

Internationalisering (i18n) indebærer tilføjelse af support til forskellige sprog og lande i din app.Tallet 18 står for antallet af bogstaver mellem det første 'i' og det sidste 'n' .

Eksempler på internationalisering kan være Unicode-understøttelse, tilpasning af brugergrænsefladen til forskellige alfabeter eller matrixsortering af ikke-engelske strenge.

JavaScript implementerer internationaliserings-API-specifikation og definerer det indbyggede Intl-objekt.

Og hvad der gør det så nyttigt er, at det har god kompatibilitet på tværs af browsere og Node.js-support:

Lad os komme igang!

Det Intlobjekt giver adgang til flere konstruktører, som:

  • Intl.DateTimeFormat - sprogfølsom dato og klokkeslætformatering.
  • Intl.NumberFormat - sprogfølsom nummerformatering .
  • Intl.PluralRules - flertalsfølsom formatering og regler for flersprog .
  • Intl.Collator - sammenligning af sprogfølsom streng.

Oprettelse af et af disse objekter følger et simpelt mønster:

const formatter = new Intl.ctor(locales, options);

F.eks. " De-AT" -sprog: tysk sprog, som det bruges i Østrig:

const dateFormatterAT = new Intl.DateTimeFormat("de-AT");

Derefter kalder vi format () -metoden med et angivet datoobjekt :

const date = new Date("2018-11-25");const format = dateFormatterAT.format(date); // "25.11.2018"

Den indeholder kun sprog- og landekoder. Snart vil vi se mere omfattende eksempler. Her kan du finde flere lokale eksempler.

Vi kan bruge navigator.language - det foretrukne sprog for brugeren, som vi bruger som landestandard:

Her i stedet for at kalde en formatmetode direkte, kan vi tildele den som en funktion. Det er fantastisk, fordi når vi først har oprettet en specialformatfunktion, kan vi bruge den flere gange.

Bare et par linjer kode, og du har en lokal dato!

Så næste gang vil vi dykke dybere og lære mere om lokaliteter. Hvis du ikke er klar til det og kun vil se seje demoer som denne på billedet nedenfor - gå til eksemplerne nedenfor!

Dykker dybere

Nå, dette er nok til at få en idé om, hvordan det fungerer, men de virkelige brugssager kan blive langt mere komplicerede. Hvad hvis vi ville:

  • vis vores dato ved hjælp af den japanske eller persiske kalender
  • Brug thailandske eller arabiske-cifre til både datoer og tal
  • brug forenklet kinesisk
  • Enhver kombination af ovenstående?

Hvad er lokalitet?

For at arbejde med denne API skal vi lære mere om lokaliteter. Lad os først og fremmest give en definition.

En lokalitet er en identifikator, der henviser til et sæt brugerindstillinger, såsom:

  • datoer og tidspunkter
  • tal og valutaer
  • oversatte navne til tidszoner, sprog og lande
  • måleenheder
  • sorteringsrækkefølge (sortering)

En lokalitet er ikke mellem store og små bogstaver Det er kun en konvention .

Lokaliteten skal være en streng, der indeholder et BCP 47-sprogmærke, og alle dele er adskilt af bindestreger.

Lad os se på det næste eksempel:

Igen, kun fire linjer kode? Lad os se på diagrammet nedenfor og undersøge hver del af vores landestandard:

Fra dette billede kan du se, at kun den første del - sprogkode - er påkrævet. Det er usandsynligt, at du har brug for et sted som dette. Men dette er et godt eksempel på at kigge på enhver mulig lokal del og få en idé om, hvad en lokalitet er.

Vores lokale indeholder alle mulige dele:

  • zh (sprogkode) - kinesisk sprog
  • Hans (scriptkode) - skrevet med forenklede tegn
  • CN (landekode) - som brugt i Kina.
  • bauddha (variant) - ved hjælp af en buddhistisk hybrid sanskrit dialekt
  • u-nu-hanidec (udvidelse) - ved hjælp af Han-decimaltal

Nedenfor kan du finde flere eksempler på scripts, varianter og udvidelser.

Scriptkoder

Disse bruges sammen med sprogmærker til at angive, hvilket script et sprog er skrevet i. For eksempel:

Variantkoder

Varianter repræsenterer en sprogdialekt.

Udvidelser

Det inkluderer forskellige kalendere og numeriske systemer.

Kalendere har "u-ca-" præfikset, mulige værdier (ikke alle inkluderet):

Numeriske systemer har “u-nu” præfikset, mulige værdier (ikke alle inkluderet):

Iana-organisationen er ansvarlig for at holde denne liste opdateret.

Lokal forhandling

Den sidste ting, vi skal lære om lokaliteter, er, hvordan de løses. Vi så dette eksempel før:

const formatter = new Intl.ctor(locales, options);

Det localesargument specificerer en enkelt lokalitet eller en gruppering af lokaliteter. Miljøet (browser eller Node.js) sammenligner det med de lokaliteter, det har til rådighed, og vælger det bedste.

Der er to matchende algoritmer:

  • opslag - kontrollerer fra mere specifik til mindre: Hvis zh-Hans-SG ikke er tilgængelig, skal du få zh-Hans , hvis ikke - zh, ellers - et standardland.
  • bedste pasform (standard) - Forbedret algoritme. Hvis "es-GT" - spansk til Guatemala anmodes om, men ikke findes, vælges "es-MX" - spansk i Mexico i stedet for at give et tilbagefald som "es".

Hvis vi leverer en række lokaliteter, vinder den første kamp.

Så nok teori - nu er det tid til at øve!

Eksempler

Koden til eksemplerne findes på GitHub.

Formatering af dato / tid

Lokaliteter er ikke det eneste, der er fantastisk ved Intl API. Du kan ændre resultatet på en ønskelig måde ved hjælp af et optionsargument.

Dette er en massiv opdatering sammenlignet med Date- objektet!

I modsætning til moment.js kan du ikke bytte nogen del af datoen manuelt som år og måned. Du skal bruge det rette sted i stedet. Dette kan lyde som en begrænsning , men det gør det mere kendt for vores brugere.

Nummerformatering

At vide, hvordan man skal håndtere datoer, ved du, hvordan man skal håndtere tal. Den eneste forskel er listen over muligheder:

Valutaformatering

For de valutaer bruger vi Intl.NumberFormatkonstruktør, men giver en anden liste med muligheder:

Bemærk, vi konverterer ikke penge her. Alt hvad vi gør er at formatere nummeret 172630 ved hjælp af passende valutaregler. Her kan du finde listen over valutakoder.

Formatering af flertalsregler

Dette fortæller dig, hvilken form der er baseret på et givet nummer for en bestemt lokalitet:

Det kan være meget praktisk til formatering af ordinære tal:

Sortering af strenge

Sortering af strenge, der indeholder ekstra bogstaver som ä på tysk eller svensk, er ikke hvad du vil gøre manuelt, bare på grund af rækkefølgen afhænger af sproget. Heldigvis for os har vi det . Og igen er alt, hvad vi skal gøre, at give et påkrævet sted:Intl.Collator

Konklusion

Internationalisering er et stort og komplekst emne. Men hvis du ved, hvad en lokalitet er, og hvordan du konstruerer den, er resten super let at bruge.

Det er det!

Hvis du har spørgsmål eller feedback, så lad mig det vide i kommentarerne nedenfor eller ping mig på Twitter.

Hvis dette var nyttigt, skal du klikke på klappen? knappen nedenunder et par gange for at vise din støtte! ??

Her er flere artikler, jeg har skrevet:

Sådan forenkles din codebase med map (), reducerer () og filter () i JavaScript

Når du læser om Array.reduce, og hvor sej det er, er det første og undertiden det eneste eksempel, du finder, summen af ​​... medium.freecodecamp.org Produktionsklar Node.js REST API'er Opsætning ved hjælp af TypeScript, PostgreSQL og Redis.

For en måned siden fik jeg en opgave at opbygge en simpel søgning-API. Alt, hvad det skulle gøre, er at hente nogle data fra tredjepart ... medium.com

Tak for læsningen ❤️