JavaScript-də beynəlmiləlləşməyə başlamaq

Vladislav Klapinin Unsplash üzərindəki şəkli

Tətbiqlərimizi fərqli dillər və ölkələr üçün özelleştirerek daha yaxşı bir istifadəçi təcrübəsi təqdim edirik. İstifadəçilər üçün tarixlər, valyutalar və nömrələr üçün tanış qeydlərdən istifadə etmək daha asandır.

Beynəlxalqlaşma (i18n) tətbiqinizdə müxtəlif dillər və ölkələr üçün dəstək əlavə etməyi əhatə edir. 18 rəqəmi ilk "i" ilə son "n" arasındakı hərflərin sayını göstərir.

Beynəlmiləlləşmənin nümunələri Unicode dəstəyi, istifadəçi interfeysini fərqli əlifbalar üçün uyğunlaşdırmaq və ya İngilis dili olmayan strings üçün sıraları sıralamaqdır.

JavaScript, Internationalization API spesifikasiyasını tətbiq edir və daxili Intl obyektini təyin edir.

Bunu bu qədər faydalı edən şey, brauzerlərarası uyğunluğu və Node.js dəstəyidir:

https://caniuse.com/#search=intl

Gəlin başlayaq!

Intl obyekti bir neçə konstruktora giriş təmin edir, məsələn:

  • Intl.DateTimeFormat - tarixə və saata dilə bağlı formatlaşdırma.
  • Intl.NumberFormat - dildən asılı say formatlanması.
  • Beynəlxalq PluralRules - Çoxlu həssas biçimlendirme və çoxluq Dil Qaydaları.
  • Intl.Collator - dildən asılı sətir müqayisəsi.

Bu obyektlərdən hər hansı birini yaratmaq sadə bir nümunəyə tabedir:

const formatter = yeni Intl.ctor (yerli, seçimlər);

Məsələn, yerli "de-AT": Alman dilində Avstriyada istifadə edildiyi kimi:

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

Sonra verilən bir Date obyekti ilə format () metodunu çağırırıq:

const date = yeni tarix ("2018-11-25"); const format = dateFormatterAT.format (tarix); // 25 Noyabr 2018

Yalnız dil və ölkə kodlarını ehtiva edir. Tezliklə daha əhatəli nümunələr görəcəyik. Ölkə parametrlərinə dair daha çox nümunəni burada tapa bilərsiniz.

Yer dili olaraq istifadə etdiyimiz istifadəçi üçün seçilən dil olan navigator.language-dən istifadə edə bilərik:

Bir format metodunu birbaşa çağırmaq əvəzinə, burada bir funksiya olaraq təyin edə bilərik. Bu əladır, çünki xüsusi bir format funksiyası yaratdıqdan sonra dəfələrlə istifadə edə bilərik.

Yalnız bir neçə kod satırı və lokallaşdırılmış bir tarixiniz var!

Sonra daha dərinə dalacağıq və yerli yerlər haqqında daha çox məlumat əldə edəcəyik. Buna hələ hazır deyilsinizsə və aşağıdakı şəkildəki bu kimi sərin nümayişləri görmək istəyirsinizsə, aşağıdakı nümunələr bölməsinə keçin!

Daha dərinə dalın

Yaxşı, bunun necə işləməsi barədə bir fikir əldə etmək üçün kifayətdir, amma həqiqi istifadə halları çox daha mürəkkəb ola bilər. Nə istəsək:

  • Tariximizi Yapon və ya Fars təqvimində göstərin
  • Tarix və nömrə üçün Tay və ya Ərəb-Hindistan rəqəmlərindən istifadə edin
  • Sadələşdirilmiş Çin dilindən istifadə edin
  • Yuxarıdakı hər hansı bir birləşmə combination

Yerli yer nədir?

Bu API ilə işləmək üçün yerli yerlər haqqında daha çox məlumat əldə etməliyik. Əvvəlcə bir tərif verək.

Yerli dil bir sıra istifadəçi üstünlükləri ilə əlaqəli bir identifikatordur, məsələn:

  • Tarixlər və vaxtlar
  • Nömrələr və valyutalar
  • zaman dilimləri, dillər və ölkələr üçün tərcümə olunmuş adlar
  • Ölçü vahidləri
  • Sıralama

Yerli dil hərflərə həssas deyil. Bu sadəcə bir konvensiya.

Yerli yer BCP 47 dil identifikatorunu ehtiva edən bir sətir olmalıdır və bütün hissələri tire ilə ayrılır.

Növbəti nümunəyə baxaq:

Yenə də yalnız dörd sətir kod var. Aşağıdakı diaqrama baxaq və yerimizin hər hissəsini nəzərdən keçirək:

Bu şəkildə yalnız ilk hissənin - dil kodunun tələb olunduğunu görə bilərsiniz. Çətin ki, belə bir bölgəyə ehtiyacınız olacaq. Bununla birlikdə, bu, mümkün olan bütün yerli hissələrə baxmağın və bir yerin nə olduğunu bilmək üçün yaxşı bir nümunədir.

Yerli dilimiz bütün mümkün hissələri ehtiva edir:

  • zh (dil kodu) - Çin dili
  • Hans (skript kodu) - sadələşdirilmiş hərflərlə yazılmışdır
  • CN (Ölkə Kodu) - Çində istifadə olunduğu kimi.
  • Bauddha (variant) - Buddist hibrid Sanskrit ləhcəsindən istifadə
  • u-nu-hanidec (uzadma) - Han onluq nömrələri ilə

Ssenarilər, variantlar və uzantıların digər nümunələrini aşağıda tapa bilərsiniz.

Ssenari kodları

Bunlar dilin hansı ssenaridə yazıldığını göstərmək üçün dil yazıları ilə istifadə olunur. Misal üçün:

Variant kodları

Variantlar dil ləhcəsini təmsil edir.

Əlavələr

Tərkibində müxtəlif təqvimlər və ədədi sistemlər var.

Təqvimlərdə "u-ca-" prefiksi var, mümkün dəyərlər (hamısı daxil deyil):

Rəqəmsal sistemlərdə "u-nu" prefiksi var, mümkün dəyərlər (hamısı daxil deyil):

Iana təşkilatı bu siyahının yenilənməsindən məsuldur.

Yerli danışıqlar

Yerli yerlər haqqında öyrənməyimiz lazım olan son şey onları necə həll etməkdir. Bu nümunəni əvvəllər də görmüşük:

const formatter = yeni Intl.ctor (yerli, seçimlər);

Yerli dəlillər bir yerli və ya bir sıra yerli ərazini müəyyənləşdirir. Ətraf mühit (brauzer və ya Node.js) onları mövcud yerlərlə müqayisə edir və ən yaxşısını seçir.

İki uyğun alqoritm var:

  • axtarış - daha spesifikdən aza qədər yoxlamalar: zh-Hans-SG mövcud deyilsə, zh-Hans alın, yoxsa - zh, əks halda - standart bir yer.
  • Best Fit (standart) - Təkmilləşdirilmiş alqoritm. "Es-GT" - Qvatemala üçün İspan dili istənilirsə, tapılmırsa, "es-MX" - Meksikadakı "es" olaraq geri dönüş əvəzinə İspan dili seçilir.

Bir sıra lokal yerləşdirsək, ilk oyun qalib gəlir.

Yəni kifayət qədər nəzəriyyə - indi tətbiq etməyin vaxtıdır!

Nümunələr

Nümunələr üçün kodu GitHub-da tapa bilərsiniz.

Tarix / saat formatlanması

Yerli INTL API üçün böyük bir şey deyil. Seçimlər arqumentindən istifadə edərək nəticəni istədiyiniz şəkildə dəyişə bilərsiniz.

Tarix obyektinə nisbətən bu çox böyük bir yeniləmədir!

Moment.js-dən fərqli olaraq tarixin il və ay kimi hər hansı bir hissəsini dəyişdirə bilməzsiniz. Bunun əvəzinə, düzgün yerli istifadə etməlisiniz. Bu bir məhdudiyyət kimi görünə bilər, ancaq istifadəçilərimizə daha çox tanış olur.

Sayı formatlaması

Verilərlə necə davranacağınızı bilirsinizsə, rəqəmlərlə necə davranacağınızı biləcəksiniz. Fərq yalnız seçimlərin siyahısıdır:

Valyuta formatlaması

Valyutalar üçün Intl.NumberFormat qurucusundan istifadə edirik, lakin fərqli bir seçim siyahısı təklif edirik:

Qeyd edək ki, biz burada pul çevirmirik. Sadəcə, müvafiq valyuta qaydalarından istifadə edərək 172630 nömrəsini formatlaşdırırıq. Budur valyuta kodlarının siyahısı.

Çox qaydaları formatlaşdırmaq

Müəyyən bir saya əsaslanan müəyyən bir yerli üçün hansı forma aiddir:

Sıra nömrələrini formatlamaq çox rahat ola bilər:

Sırala

Alman və ya İsveç dilində ä kimi əlavə hərflərdən ibarət sətirləri sıralamaq əl ilə etmək istədiyiniz deyil, çünki sifariş dildən asılıdır. Neyse Intl Collator var. Yenə də yalnız tələb olunan bir lokumu göstərməliyik:

Nəticə

Beynəlmiləlləşmə böyük və mürəkkəb bir mövzudur. Ancaq bir yerli nə olduğunu və necə yaradılacağını bilirsinizsə, qalanlarını istifadə etmək çox asandır.

Bu belədir!

Hər hansı bir sualınız və ya təklifiniz varsa, aşağıdakı şərhlərdə mənə məlumat verin və ya Twitter-də qeyd edin.

Bu faydalı olubsa, dəstəyinizi göstərmək üçün aşağıdakı düyməsini bir neçə dəfə vurun! ⬇⬇ ⬇⬇

Yazdığım daha çox məqalə:

oxuduğunuz üçün təşəkkür edirik