JavaScript Intl API: Internacionalizavimo geriausios praktikos pasaulinei auditorijai

Šiuolaikiniame tarpusavyje susijusiame pasaulyje yra labai svarbu kurti žiniatinklio programas, pritaikytas pasaulinei auditorijai. JavaScript Intl API suteikia galingus įrankius internacionalizavimui (i18n), leidžiančius formatuoti datas, skaičius, valiutas ir kitus elementus pagal skirtingų lokalių konvencijas. Šiame straipsnyje nagrinėjamos geriausios praktikos, kaip efektyviai naudoti Intl API kuriant išties pasaulines programas.

Internacionalizavimo (i18n) ir lokalizavimo (l10n) supratimas

Prieš gilinantis į Intl API specifiką, svarbu suprasti skirtumą tarp internacionalizavimo (i18n) ir lokalizavimo (l10n). I18n yra programų projektavimo ir kūrimo procesas taip, kad jas būtų galima lengvai pritaikyti skirtingoms kalboms ir regionams, nereikalaujant inžinerinių pakeitimų. Tuo tarpu L10n yra internacionalizuotos programos pritaikymo konkrečiai lokalei procesas, verčiant tekstą ir pritaikant kitus lokalei būdingus elementus.

Intl API sutelkia dėmesį į i18n aspektą, suteikdama mechanizmus lokalei jautriems duomenims tvarkyti, o lokalizavimas paprastai apima vertimų ir lokalei būdingų konfigūracijų teikimą.

Pagrindiniai Intl API komponentai

Intl API susideda iš kelių pagrindinių objektų, kurių kiekvienas yra atsakingas už konkrečius internacionalizavimo aspektus:

• Intl.Collator: Lokalės specifikai jautriam eilučių palyginimui.
• Intl.DateTimeFormat: Datų ir laikų formatavimui.
• Intl.NumberFormat: Skaičių, įskaitant valiutas ir procentus, formatavimui.
• Intl.PluralRules: Daugiskaitos taisyklių tvarkymui skirtingose kalbose.
• Intl.ListFormat: Lokalės specifikai jautriam sąrašų formatavimui.
• Intl.RelativeTimeFormat: Santykinio laiko formatavimui (pvz., „vakar“, „po 2 valandų“).

Geriausios Intl API naudojimo praktikos

Norėdami efektyviai naudoti Intl API ir užtikrinti teigiamą vartotojo patirtį savo pasaulinei auditorijai, atsižvelkite į šias geriausias praktikas:

1. Nurodykite teisingą lokalę

Internacionalizavimo pagrindas yra teisingos lokalės nurodymas. Lokalė identifikuoja kalbą, regioną ir bet kokius specifinius variantus, kurie bus naudojami formatavimui. Vartotojo pageidaujamą lokalę galite gauti iš navigator.language savybės arba Accept-Language HTTP antraštės.

Kuriant Intl objektus, lokalę galite nurodyti kaip eilutę arba eilučių masyvą. Jei pateiksite masyvą, API bandys rasti geriausiai atitinkančią lokalę iš galimų parinkčių.

Pavyzdys:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Jei vartotojo pageidaujama lokalė nėra prieinama, galite pateikti atsarginę lokalę. Pavyzdžiui, galite naudoti 'en-US' kaip numatytąją, jei vartotojo naršyklė praneša apie nepalaikomą lokalę.

2. Naudokite Intl.DateTimeFormat datų ir laikų formatavimui

Teisingas datų ir laikų formatavimas yra labai svarbus siekiant suteikti lokalizuotą patirtį. Intl.DateTimeFormat objektas leidžia formatuoti datas ir laikus pagal konkrečios lokalės konvencijas.

Galite pritaikyti formatavimą nurodydami įvairias parinktis, tokias kaip metų, mėnesio, dienos, valandos, minutės ir sekundės formatas. Taip pat galite nurodyti laiko juostą, kad datos ir laikai būtų rodomi teisingai vartotojams skirtingose pasaulio dalyse.

Pavyzdys:

const locale = 'de-DE'; // vokiečių (Vokietija)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Išvestis: pvz., "22. Mai 2024, 14:30"
console.log(formattedDate);

Šis pavyzdys formatuoja dabartinę datą ir laiką pagal vokiečių (Vokietija) lokalę, įskaitant metus, mėnesį, dieną, valandą ir minutę. Taip pat nurodoma 'Europe/Berlin' laiko juosta.

Nepamirškite atsižvelgti į skirtingus datų ir laikų formatus, naudojamus visame pasaulyje. Pavyzdžiui, JAV naudoja MM/DD/YYYY, o daugelis kitų šalių naudoja DD/MM/YYYY.

3. Naudokite Intl.NumberFormat skaičių, valiutų ir procentų formatavimui

Intl.NumberFormat objektas suteikia lankstų būdą formatuoti skaičius, valiutas ir procentus pagal lokalei būdingas konvencijas. Galite pritaikyti formatavimą nurodydami parinktis, tokias kaip valiuta, stilius (dešimtainis, valiutos ar procentų), minimalus ir maksimalus trupmeninių skaitmenų skaičius ir kt.

Pavyzdys (valiutos formatavimas):

const locale = 'ja-JP'; // japonų (Japonija)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Išvestis: pvz., "￥12,346"
console.log(formattedAmount);

Šis pavyzdys formatuoja skaičių 12345.67 kaip Japonijos jenas (JPY). Atkreipkite dėmesį, kaip valiutos simbolis (￥) ir grupavimo skyriklis (,) yra automatiškai pritaikomi pagal japonų lokalę.

Pavyzdys (procentų formatavimas):

const locale = 'ar-EG'; // arabų (Egiptas)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Išvestis: pvz., "٧٥٫٠٠٪"
console.log(formattedPercentage);

Šis pavyzdys formatuoja skaičių 0.75 kaip procentą arabų (Egiptas) kalba. Išvestyje yra arabiškas procento ženklas (٪) ir du skaitmenys po kablelio.

Svarbūs aspektai valiutų formatavimui:

• Valiutų kodai: Naudokite teisingus ISO 4217 valiutų kodus (pvz., USD, EUR, JPY).
• Simbolio vieta: Atkreipkite dėmesį, kad valiutos simbolio padėtis skiriasi priklausomai nuo lokalės (pvz., prieš arba po sumos).
• Dešimtainių ir tūkstančių skyrikliai: Supraskite skirtingas dešimtainių skyriklių (pvz., taškas ar kablelis) ir tūkstančių skyriklių (pvz., kablelis ar taškas) konvencijas.

4. Teisingai tvarkykite daugiskaitą su Intl.PluralRules

Daugiskaitos taisyklės labai skiriasi įvairiose kalbose. Pavyzdžiui, anglų kalba turi paprastas taisykles su vienaskaitos ir daugiskaitos formomis, o kitos kalbos turi sudėtingesnes taisykles, priklausančias nuo skaičiaus vertės. Intl.PluralRules objektas padeda nustatyti teisingą daugiskaitos formą tam tikram skaičiui ir lokalei.

Pavyzdys:

const locale = 'ru-RU'; // rusų (Rusija)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (vienaskaita)
    case 'few': return 'товара'; // tovara (keli)
    case 'many': return 'товаров'; // tovarov (daug)
    default: return 'товаров'; // Numatytasis - daug
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Išvestis: "5 товаров"

Šis pavyzdys parodo, kaip naudoti Intl.PluralRules, kad gautumėte teisingą žodžio „товар“ (prekė) daugiskaitos formą rusų kalba. Rusų kalba turi skirtingas daugiskaitos formas, priklausomai nuo to, ar skaičius baigiasi 1, 2-4, ar 5-9.

5. Formatuokite sąrašus su Intl.ListFormat

Pateikiant elementų sąrašus, formatavimas gali skirtis priklausomai nuo lokalės. Intl.ListFormat objektas leidžia formatuoti sąrašus pagal lokalei būdingas konvencijas, įskaitant skirtingų jungtukų (pvz., „ir“, „arba“) ir sąrašo skyriklių (pvz., kablelių, kabliataškių) naudojimą.

Pavyzdys:

const locale = 'es-ES'; // ispanų (Ispanija)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Išvestis: "manzanas, naranjas y plátanos"
console.log(formattedList);

Šis pavyzdys formatuoja vaisių sąrašą ispanų (Ispanija) kalba, naudodamas jungtuką „y“ (ir) paskutiniams dviem elementams sujungti.

6. Formatuokite santykinį laiką su Intl.RelativeTimeFormat

Santykinio laiko rodymas (pvz., „vakar“, „po 2 valandų“) yra patogus būdas pateikti laiko informaciją. Intl.RelativeTimeFormat objektas leidžia formatuoti santykinį laiką pagal lokalei būdingas konvencijas.

Pavyzdys:

const locale = 'fr-CA'; // prancūzų (Kanada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Išvestis: "hier"
console.log(rtf.format(2, 'day')); // Išvestis: "dans 2 jours"

Šis pavyzdys formatuoja santykinį laiką prancūzų (Kanada) kalba. Išvestyje rodoma „hier“ (vakar) ir „dans 2 jours“ (po 2 dienų).

Parinktis `numeric` kontroliuoja, kaip rodomi skaičiai. `'auto'` rodo santykinius žodžius, kai jie yra prieinami (kaip „vakar“), o kitu atveju – skaičius. `'always'` visada rodo skaičius.

7. Rikiuokite eilutes su Intl.Collator

Eilučių palyginimas yra jautrus lokalei. Eilučių rūšiavimo būdas skiriasi priklausomai nuo kalbos. Pavyzdžiui, vokiečių kalboje simbolis „ä“ paprastai rūšiuojamas kaip „a“, o švedų kalboje jis rūšiuojamas po „z“. Intl.Collator objektas leidžia palyginti eilutes pagal konkrečios lokalės taisykles.

Pavyzdys:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Išvestis: ["äpfel", "aprikosen", "bananen", "birnen"]

Šis pavyzdys rūšiuoja vokiškų žodžių masyvą naudojant Intl.Collator. Atkreipkite dėmesį, kad „äpfel“ yra surūšiuotas prieš „aprikosen“, nors „ä“ abėcėlėje yra vėliau.

8. Tvarkykite kraštutinius atvejus ir trūkstamus duomenis

Ne visos lokalės yra palaikomos kiekvienoje naršyklėje ar aplinkoje. Būtina tvarkyti kraštutinius atvejus, kai lokalė nėra prieinama arba kai trūksta duomenų. Apsvarstykite šias strategijas:

• Pateikite atsargines lokales: Nurodykite numatytąją lokalę, kuri bus naudojama, kai vartotojo pageidaujama lokalė nėra palaikoma.
• Sklandus funkcionalumo sumažinimas: Jei konkrečios formatavimo parinktys nėra palaikomos tam tikrai lokalei, pateikite protingą atsarginį variantą. Pavyzdžiui, galite rodyti datą mažiau detaliu formatu.
• Naudokite try-catch blokus: Apgaubkite Intl API iškvietimus try-catch blokais, kad galėtumėte sklandžiai tvarkyti galimas klaidas.

9. Kruopščiai testuokite su skirtingomis lokalėmis

Kruopštus testavimas yra būtinas norint užtikrinti, kad jūsų internacionalizuota programa veiktų teisingai visoms palaikomoms lokalėms. Išbandykite savo programą su įvairiomis lokalėmis, įskaitant kalbas, kurios naudoja skirtingus simbolių rinkinius, datų ir laiko formatus, skaičių formatus ir daugiskaitos taisykles.

Apsvarstykite galimybę naudoti automatizuotus testavimo įrankius, kad patikrintumėte, ar jūsų programa veikia kaip tikėtasi skirtingose lokalėse.

10. Apsvarstykite poveikį našumui

Nors Intl API paprastai yra efektyvi, Intl objektų kūrimas gali būti santykinai brangus. Siekdami optimizuoti našumą, apsvarstykite šiuos dalykus:

• Kešuokite Intl objektus: Sukurkite Intl objektus vieną kartą ir pakartotinai juos naudokite, kai tik įmanoma, užuot kūrę naujus objektus kiekvienai formatavimo operacijai.
• Atidėtas lokalės duomenų įkėlimas: Įkelkite lokalės duomenis tik tada, kai jų reikia, užuot įkėlę visus lokalės duomenis iš anksto.

Už Intl API ribų: Kiti internacionalizavimo aspektai

Nors Intl API suteikia galingus įrankius duomenų formatavimui, internacionalizavimas apima daugiau nei tik formatavimą. Apsvarstykite šiuos papildomus aspektus:

• Teksto kryptis (RTL/LTR): Palaikykite iš dešinės į kairę (RTL) rašomas kalbas, tokias kaip arabų ir hebrajų, naudodami CSS, kad pritaikytumėte savo programos išdėstymą.
• Simbolių kodavimas: Naudokite UTF-8 kodavimą, kad užtikrintumėte, jog jūsų programa gali tvarkyti platų simbolių spektrą.
• Vertimų valdymas: Naudokite vertimų valdymo sistemą, kad supaprastintumėte savo programos teksto vertimo procesą.
• Kultūriškai jautrus dizainas: Kurdami savo programą, atsižvelkite į kultūrinius skirtumus. Pavyzdžiui, spalvų simbolika gali skirtis įvairiose kultūrose.

Išvada

JavaScript Intl API yra neįkainojamas įrankis kuriant žiniatinklio programas, pritaikytas pasaulinei auditorijai. Laikydamiesi šiame straipsnyje pateiktų geriausių praktikų, galite sukurti programas, kurios yra ne tik funkcionalios, bet ir kultūriškai jautrios bei patogios vartotojams visame pasaulyje. Pasinaudokite Intl API galia ir atverkite savo programos potencialą pasaulinėje arenoje. Įvaldę Intl API, sukursite labiau įtraukią ir prieinamą patirtį visiems savo vartotojams, nepriklausomai nuo jų buvimo vietos ar kalbos.