de Alex Permyakov

Cum să începeți cu internaționalizarea în JavaScript

Cum sa incepeti cu internationalizarea in JavaScript
Fotografie de Vladislav Klapin pe Unsplash

Prin adaptarea aplicațiilor noastre pentru diferite limbi și țări, oferim o experiență de utilizare mai bună. Este mai simplu pentru utilizatori să se ocupe de notații cunoscute pentru date, monede și numere.

Internaționalizare (i18n) implică adăugarea de asistență pentru diferite limbi și țări în aplicația dvs. Numărul 18 reprezintă numărul de litere dintre primul „i” și ultimul „n”.

Exemple de internaționalizare ar putea fi suportul Unicode, personalizarea interfeței cu utilizatorul pentru diferite alfabete sau sortarea în matrice a șirurilor non-englezești.

Implementează JavaScript API de internaționalizare caietul de sarcini și definește încorporatul Intl obiect.

Și ceea ce îl face atât de util este că are o compatibilitate excelentă între browser și Suport Node.js:

1612051087 566 Cum sa incepeti cu internationalizarea in JavaScript
https://caniuse.com/#search=intl

Să începem!

Intl obiect oferă acces la mai mulți constructori, cum ar fi:

  • Intl.DateTimeFormat – formatarea datei și orei sensibile la limbă.
  • Intl.NumberFormat – formatarea numărului sensibil la limbă.
  • Reguli plurale internaționale – formatare sensibilă la plural și reguli de limbaj plural.
  • Colector internațional – compararea șirului sensibil la limbă.

Crearea oricăruia dintre aceste obiecte urmează un model simplu:

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

De exemplu, „de-AT ” locale: limba germană așa cum este folosită în Austria:

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

Apoi numim format() metoda cu un furnizat Data obiect:

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

Conține numai coduri de limbă și țară. În curând, vom vedea exemple mai cuprinzătoare. Aici puteți găsi mai multe exemple de localizare.

Putem folosi navigator.language – limba preferată pentru utilizator, pe care o folosim ca localizare:

1612051088 191 Cum sa incepeti cu internationalizarea in JavaScript

Aici, în loc să chemați un format direct, o putem atribui ca funcție. Este minunat, deoarece odată ce am creat o funcție de format specializată, o putem folosi de mai multe ori.

Doar câteva linii de cod și aveți o dată localizată!

Deci, în continuare, vom merge mai adânc și vom afla mai multe despre localuri. Dacă nu sunteți pregătit pentru asta și doriți doar să vedeți demonstrații geniale ca aceasta în imaginea de mai jos – accesați secțiunea de exemple de mai jos!

1612051088 87 Cum sa incepeti cu internationalizarea in JavaScript

Scufundându-se mai adânc

Ei bine, acest lucru este suficient pentru a vă face o idee despre cum funcționează, dar cazurile reale de utilizare ar putea deveni mult mai complicate. Ce se întâmplă dacă am vrea:

  • afișează data noastră folosind calendarul japonez sau persan
  • folosiți cifre thailandeze sau arabe-indicate atât pentru date, cât și pentru numere
  • folosiți chineza simplificată
  • Orice combinație a celor de mai sus?

Ce este Locale?

Pentru a lucra cu acest API, trebuie să aflăm mai multe despre localizări. În primul rând, să dăm o definiție.

O localizare este un identificator care se referă la un set de preferințe ale utilizatorului, cum ar fi:

  • date și ore
  • numere și valute
  • nume traduse pentru fusuri orare, limbi și țări
  • unitati de masura
  • sort-order (colaționare)

O localizare nu este sensibilă la majuscule și minuscule Este doar un convenţie.

Locația trebuie să fie un șir care să conțină un Etichetă de limbă BCP 47, și toate părțile sunt separate prin cratime.

Să aruncăm o privire la următorul exemplu:

1612051088 264 Cum sa incepeti cu internationalizarea in JavaScript

Din nou, doar patru linii de cod? Să aruncăm o privire la diagrama de mai jos și să examinăm fiecare parte a localizării noastre:

1612051088 801 Cum sa incepeti cu internationalizarea in JavaScript

Din această imagine, puteți vedea că este necesară doar prima parte – codul limbii. Este puțin probabil să aveți nevoie de o locație de genul acesta. Dar, acesta este un bun exemplu de a arunca o privire asupra fiecărei părți locale posibile și de a vă face o idee despre ce este o localizare.

Locația noastră conține toate părțile posibile:

  • zh (codul limbii) – limba chineză
  • Hans (cod script) – scris cu caractere simplificate
  • CN (cod de țară) – așa cum este utilizat în China.
  • bauddha (varianta) – folosind un dialect sanscrit hibrid budist
  • u-nu-hanidec (extensie) – folosind numere zecimale Han

Mai jos puteți găsi mai multe exemple pentru scripturi, variante și extensii.

Coduri script

Acestea sunt utilizate cu etichete de limbă pentru a indica în ce script este scrisă o limbă. De exemplu:

1612051088 265 Cum sa incepeti cu internationalizarea in JavaScript

Coduri variante

Variantele reprezintă un dialect lingvistic.

1612051089 373 Cum sa incepeti cu internationalizarea in JavaScript

Extensii

Include diferite calendare și sisteme numerice.

Calendare au prefix „u-ca-”, valori posibile (nu toate incluse):

1612051089 930 Cum sa incepeti cu internationalizarea in JavaScript

Sisteme numerice au prefix „u-nu”, valori posibile (nu toate incluse):

1612051089 597 Cum sa incepeti cu internationalizarea in JavaScript

Organizația Iana este responsabilă de păstrare această listă la zi.

Negocierea locală

Ultimul lucru pe care trebuie să-l învățăm despre localizări este modul în care sunt rezolvate. Am văzut acest exemplu înainte:

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

locales argumentul specifică o singură localizare sau o serie de localizări. Mediul (browserul sau Node.js) îl compară cu localizările pe care le are disponibile și îl alege pe cel mai bun.

Există doi algoritmi de potrivire:

  • privește în sus – verifică de la mai specific la mai puțin: dacă zh-Hans-SG nu este disponibil, primiți zh-Hans, dacă nu – zh, altcevao locație implicită.
  • cel mai potrivit (implicit) – Algoritm îmbunătățit. Dacă se solicită „es-GT” – spaniolă pentru Guatemala, dar nu se găsește, atunci în loc să ofere o rezervă ca „es”, va fi ales „es-MX” – spaniolă în Mexic.

Dacă oferim o serie de locale, atunci câștigă primul meci.

Deci, suficientă teorie – acum este momentul să exersăm!

Exemple

Codul pentru exemple poate fi găsit pe GitHub.

Formatarea datei / orei

1612051089 609 Cum sa incepeti cu internationalizarea in JavaScript

Locale nu sunt singurul lucru care este minunat în API Intl. Puteți modifica rezultatul într-un mod dorit folosind un options argument.

1612051090 381 Cum sa incepeti cu internationalizarea in JavaScript

Aceasta este o actualizare masivă în comparație cu Data obiect!

Spre deosebire de moment.js tu nu poate schimba manual orice parte a datei, cum ar fi anul și luna. În schimb, trebuie să utilizați locația corectă. Acest lucru poate suna ca un prescripţie, dar îl face mai familiar pentru utilizatorii noștri.

Formatarea numerelor

Știind cum să te descurci cu datele, știi să te descurci cu numerele. Singura diferență este lista de opțiuni:

1612051090 540 Cum sa incepeti cu internationalizarea in JavaScript

Formatarea monedei

Pentru monedele pe care le folosim Intl.NumberFormat constructor, dar furnizați o listă diferită de opțiuni:

1612051090 7 Cum sa incepeti cu internationalizarea in JavaScript

Rețineți, nu convertim bani aici. Tot ce facem este să formatați numărul 172630 folosind potrivit reguli valutare. Aici puteți găsi lista de coduri valutare.

Formatarea regulilor plurale

Acest lucru vă spune ce formular se aplică pe baza unui număr dat pentru o anumită localizare:

1612051090 330 Cum sa incepeti cu internationalizarea in JavaScript

Poate fi foarte util pentru formatarea numerelor ordinale:

1612051091 302 Cum sa incepeti cu internationalizarea in JavaScript

Sortarea șirurilor

Sortarea șirurilor care conțin litere suplimentare precum A în germană sau suedeză nu este ceea ce doriți să faceți manual, doar din cauza comenzii depinde de limbă. Din fericire pentru noi, avem Intl.Collator. Și din nou, tot ceea ce trebuie să facem este să oferim o locație obligatorie:

1612051091 727 Cum sa incepeti cu internationalizarea in JavaScript

Concluzie

Internaționalizarea este un subiect extraordinar și complex. Dar dacă știți ce este o localizare și cum să o construiți, restul este foarte ușor de utilizat.

Asta este!

Dacă aveți întrebări sau feedback, anunțați-mă în comentariile de mai jos sau trimiteți-mi un mesaj Stare de nervozitate.

Dacă acest lucru a fost util, faceți clic pe clap? butonul de mai jos de câteva ori pentru a vă arăta sprijinul! ⬇⬇ ??

Iată mai multe articole pe care le-am scris:

Cum să vă simplificați baza de cod cu map (), reduce () și filter () în JavaScript
Când citiți despre Array.reduce și cât de cool este, primul și uneori singurul exemplu pe care îl găsiți este suma de …medium.freecodecamp.orgPregătirea pentru producție Configurarea API-urilor REST Node.js utilizând TypeScript, PostgreSQL și Redis.
Acum o lună mi s-a dat sarcina de a construi un API de căutare simplu. Tot ce trebuia să facă este să ia câteva date de la terți …medium.com

Mulțumesc că ai citit ❤️