Cara Melaksanakan Pengantarabangsaan (I18N) dalam JavaScript

mata utama

Pengantarabangsaan (I18N) adalah proses mewujudkan atau menukar produk dan perkhidmatan supaya mereka dapat menyesuaikan diri dengan bahasa dan budaya tempatan. Penyetempatan (L10N) adalah proses menyesuaikan perisian antarabangsa untuk rantau atau bahasa tertentu.
Globalize adalah perpustakaan JavaScript yang dibangunkan oleh ahli -ahli pasukan jQuery untuk pengantarabangsaan dan penyetempatan. Ia menggunakan data rasmi Unicode CLDR JSON, menyokong semua pelayar utama, dan menyediakan fungsi seperti pemformatan digital dan parsing, tarikh dan pemformatan masa dan parsing, pemformatan masa relatif, pemformatan mata wang, pemformatan mesej, sokongan jamak dan sokongan unit, dan lain -lain.
JavaScript menyediakan sokongan asli untuk pengantarabangsaan melalui API pengantarabangsaan (juga dikenali sebagai ECMA-402). Walau bagaimanapun, Globalisasi tidak menggunakannya kerana sokongan yang rendah dan tidak konsisten di kalangan pelayar.
Globalisasi boleh dipasang melalui NPM, yang menyediakan modul untuk setiap fungsinya, yang membolehkan pemaju hanya menggunakan modul yang mereka perlukan. Ia memisahkan kod dan kandungan dengan tidak menganjurkan atau membenamkan sebarang data locale di perpustakaan.
Menggunakan global, pemaju boleh memformat tarikh, nombor, dan nilai mata wang, nombor parse, dan tarikh format relatif. Dokumentasi untuk perpustakaan ini memberikan maklumat terperinci tentang cara menggunakan ciri -ciri ini dan lain -lain.

Artikel ini dikaji semula oleh Julian Motz, Panayiotis Velisarakos, Vildan Softic dan Tim Severien. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Katakan anda adalah pemaju dan bekerja pada produk panas seterusnya. Pelanggan anda suka produk anda dan ia telah menerima penilaian yang sangat tinggi di semua rangkaian sosial. Lebih baik lagi, Ketua Pegawai Eksekutif baru saja menerima $ 10,000,000 dalam pembiayaan untuk berkembang ke pasaran baru. Tetapi sebelum anda pergi global, anda mesti mengemas kini produk anda untuk menyokong bahasa, mata wang, format tarikh dan banyak lagi. Apa pendapat anda? Anda dan pasukan anda akan bertanggungjawab untuk mencapai matlamat ini. Dari sudut pandang teknikal, perisian anda mesti diubahsuai dan kemudian dilokalkan.

Pengantarabangsaan (juga dikenali sebagai

i18n

) adalah proses membuat atau menukar produk dan perkhidmatan supaya mereka dapat dengan mudah menyesuaikan diri dengan bahasa dan budaya setempat tertentu. Penyetempatan (juga dikenali sebagai l10n ) adalah proses menyesuaikan perisian antarabangsa untuk rantau atau bahasa tertentu. Dalam erti kata lain, pengantarabangsaan adalah proses membolehkan perisian anda untuk menyokong pelbagai budaya (format mata wang, format tarikh, dll.), Walaupun penyetempatan adalah proses melaksanakan satu atau lebih budaya.

Kedua -dua proses ini sering digunakan oleh syarikat -syarikat yang berminat di negara -negara yang berbeza, tetapi mereka juga boleh membantu pemaju individu yang bekerja di laman web mereka sendiri. Sebagai contoh, anda mungkin tahu, saya bahasa Itali dan saya memiliki laman web. Laman web saya kini dalam bahasa Inggeris, tetapi saya boleh membuat keputusan untuk mengantarabsankannya dan kemudian melokalisasikannya ke Itali. Ini sangat bermanfaat bagi mereka yang berasal dari Itali dan tidak dikenali dengan bahasa Inggeris.

Dalam artikel ini, saya akan memperkenalkan anda kepada Globalisasi, perpustakaan JavaScript yang dibangunkan oleh beberapa ahli pasukan JQuery untuk pengantarabangsaan dan penyetempatan. Semua coretan kod yang ditunjukkan dalam artikel ini boleh didapati di repositori GitHub kami.

Pemaju percaya bahawa i18n adalah mengenai terjemahan ke dalam bahasa bukan bahasa Inggeris. I18N hanya perlu melanjutkan permohonan semasa ke beberapa negara atau pasaran. Saya telah cuba menjelaskan bahawa i18n adalah tentang "bercakap". Setiap aplikasi perlu "bercakap" dengan penggunanya pada satu ketika. Untuk bercakap dengan pengguna, aplikasi itu mungkin memerlukan sokongan jamak, variasi jantina, pemformatan tarikh, pemformatan digital, dan pemformatan mata wang. Malah dalam bahasa Inggeris, ia boleh menjadi sukar untuk melakukan pekerjaan dengan betul.

Apa yang dimaksudkan dengan global?

Globalize adalah

perpustakaan JavaScript untuk pengantarabangsaan dan penyetempatan yang menggunakan data rasmi Unicode CLDR JSON. Perpustakaan ini adalah sumber terbuka dan dibangunkan oleh Rafael Xavier de Souza dan beberapa ahli pasukan JQuery.

Globalisasi Repositori Data Konsortium Unicode Unicode Unicode (CLDR), repositori standard terbesar dan paling komprehensif data locale yang ada. Jadi tidak seperti perpustakaan yang membenamkan data locale, jika anda menggunakan globalisasi, anda boleh dengan mudah sentiasa menggunakan data CLDR terkini.

Perpustakaan ini sesuai untuk penyemak imbas dan modul Node.js. Globalisasi 1.0 menyokong semua pelayar utama, termasuk IE9, Chrome, Firefox, Safari 5.1, dan Opera 12.1.

Fungsi utama perpustakaan ini termasuk:

pemformatan digital dan parsing
tarikh dan pemformatan masa dan parsing
pemformatan masa relatif
Format Mata Wang
Format mesej
Sokongan Plural
Sokongan unit

Apa yang paling saya sukai tentang global adalah bahawa ia menyediakan modul untuk setiap ciri -cirinya. Pemaju mungkin tidak memerlukan seluruh perpustakaan, jadi dia boleh memilih modul yang dia perlukan. Satu lagi ciri menarik ialah tidak seperti perpustakaan lain, ia menyimpan kod yang terpisah dari kandungan dengan tidak menganjurkan atau membenamkan sebarang data locale di perpustakaan.

Tetapi globalisasi bukan satu -satunya pilihan. Jika anda berminat dengan alternatif lain, Rafael mempunyai halaman khusus. Alternatif yang paling ketara ialah I18Next.

Globalisasi dan JavaScript Internationalisasi Api

Ini mungkin mengejutkan sesetengah daripada anda, tetapi JavaScript memberikan sokongan asli untuk pengantarabangsaan melalui API pengantarabangsaan (juga dikenali sebagai ECMA-402). Objek INTL adalah objek yang tersedia pada objek tetingkap yang bertindak sebagai ruang nama untuk API antarabangsa. API ini kini menyediakan kaedah untuk memformat nombor dan tarikh, serta membandingkan rentetan dalam bahasa tertentu.

Sekarang anda tahu kewujudan API antarabangsa, anda mungkin berfikir global menggunakannya di belakang tabir. Pendekatan ini pasti akan meningkatkan prestasi tarikh dan pemformatan nombor. Walau bagaimanapun, kerana sokongan yang rendah dan sangat tidak konsisten di kalangan pelayar, perpustakaan tidak menggunakannya.

Saya mahu anda mengalami API antarabangsa sebelum kami terus membincangkan global.

Tarikh format

Contoh pertama yang akan saya tunjukkan menggunakan API Antarabangsa untuk memformat tarikh di pelbagai tempat: ia, AS, dan GB.

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

Dalam contoh ini, saya menggunakan tempat yang ditentukan ("it-it", "en-us", dan "en-gb") untuk membuat formatter tarikh baru menggunakan pembina DateTimeFormat. Kemudian, saya panggil kaedah format untuk memformat objek tarikh.

Kod di atas juga boleh digunakan sebagai JSBIN.

Nombor Format

Seperti yang dinyatakan sebelum ini, API juga membolehkan anda memformat nombor. Berikut adalah contoh menggunakan Pembina NumberFormat:

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

Dengan melihat output coretan kod kedua ini (yang juga boleh digunakan sebagai JSBIN), anda dapat melihat bahawa di Itali, kami mempunyai format yang berbeza untuk nombor daripada di Amerika Syarikat dan United Kingdom.

Seperti yang disebutkan sebelumnya, sokongan untuk API ini adalah rendah, tetapi jika anda mahu menggunakannya, anda boleh menggunakan polyfill ini dalam permohonan anda.

Sekarang saya telah memberi anda pemahaman yang lebih baik tentang bagaimana pengantarabangsaan dan lokalisasi berfungsi, mari kita bincangkan global.

Pemasangan dan Gunakan Globalisasi

Globalisasi boleh dipasang dengan mudah melalui NPM:

npm install globalize cldr-data --save

Perintah ini juga memasang data CLDR, yang diperlukan untuk memuatkan data locale yang akan digunakan globalisasi (contohnya, dalam format bahasa untuk nombor atau tarikh). Selepas memasang dua pakej ini, kami boleh menggunakan perpustakaan.

Nota: Contoh berikut menganggap bahawa nod digunakan. Jika anda berminat untuk menggunakan global dalam penyemak imbas anda, saya cadangkan anda memulakan dengan contoh di laman utama projek. Contoh webpack menjadikannya sangat mudah untuk bangun dan berjalan dengan cepat.

Seterusnya, saya akan menggunakan global untuk menulis semula dua coretan kod yang disenaraikan di bahagian sebelumnya.

Tarikh format

Contoh pertama boleh dilaksanakan seperti berikut:

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

Walaupun mudah, kod di atas membolehkan saya menutup beberapa topik. Apabila saya mula -mula menggunakan globalisasi, saya mendapati agak pelik bahawa beberapa kod bahasa yang digunakan untuk data CLDR hanya menggunakan dua huruf. Untuk mengekalkan konsistensi, saya mahu semua tempatan memerlukan versi penuh standard ISO 3166 (mis., "It-it-" dan "en-us") daripada versi pendek (mis., "Ia" dan "en"). Walaupun nampaknya munasabah untuk mengandaikan bahawa bahasa Itali adalah bahasa Itali (Itali berasal dari Itali selepas semua), ini mengelirukan untuk bahasa Inggeris. "en" bermaksud Bahasa Inggeris Amerika, bukan Inggeris Inggeris. Jika anda ingin memastikan anda tidak membuat kesilapan yang sama seperti saya, saya cadangkan anda menyemak jadual ini.

Konsep lain yang bernilai menggariskan adalah kaedah enteries (pernyataan ketiga kod). Ini akan memuatkan semua fail yang mengandungi maklumat tambahan untuk data negara atau tempatan. Sebagai contoh, kod negara telefon (39 di Itali), penduduk, beberapa singkatan yang terkenal, bagaimana mengeja mata wang negara-negara lain, dll.

Titik terakhir yang saya ingin perkenalkan adalah pernyataan keempat, di mana saya memanggil kaedah keseluruhannya. Ini membolehkan pemuatan data locale untuk negara yang diperlukan (Itali, Amerika Syarikat, dan United Kingdom dalam contoh di atas).

Nombor Format

Untuk nombor pemformatan, Globalize menyediakan kaedah formatNumber. Tandatangan kaedah ini ialah

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

Di mana nilai adalah nombor yang akan diformat, pilihan adalah objek untuk nilai pulangan kaedah tersuai. Beberapa contoh pilihan yang anda boleh tentukan termasuk:

• pusingan: mentakrifkan cara untuk bulat nombor. Nilainya boleh menjadi yang berikut: Ceil, Floor, Round, atau Truncate
• usegrouping: nilai boolean yang menunjukkan sama ada pemisah kumpulan harus digunakan
• MinimumIntegerdigits: Integer bukan negatif yang menunjukkan bilangan minimum digit integer untuk digunakan.

Senarai lengkap pilihan yang tersedia boleh didapati dalam dokumentasi.

Sekarang kita telah mempelajari lebih lanjut mengenai kaedah formatnumber, mari kita lihat bagaimana ia sebenarnya berlaku.

npm install globalize cldr-data --save

Format nilai mata wang

Perpustakaan menyediakan kaedah mata wang untuk membantu anda memformat nilai mata wang. Kaedah ini menyokong banyak pilihan, yang membolehkan anda menentukan sama ada anda mahu mengelilingi nombor, sama ada anda mahu menggunakan simbol mata wang (seperti "$") atau kodnya (seperti "USD"), dan sebagainya.

Contoh Menggunakan Mata Wang Mata Wang () ditunjukkan di bawah:

// 包含 Globalize 库
var Globalize = require('globalize');

// 包含 CLDR 数据
var cldrData = require('cldr-data');

// 加载补充数据
Globalize.load(cldrData.entireSupplemental());

// 加载指定语言环境的数据
Globalize.load(cldrData.entireMainFor('it', 'en', 'en-GB'));

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(Globalize('it').formatDate(date));

// "6/30/2016"
console.log(Globalize('en').formatDate(date));

// "30/06/2016"
console.log(Globalize('en-GB').formatDate(date));

menganalisis nombor

Penyelesaian nombor juga boleh menjadi tugas yang perlu anda lakukan, seperti ketika memproses input pengguna. Contoh berikut menunjukkan cara melakukan ini:

formatNumber(value[, options])

Format Tarikh Relatif

Satu lagi ciri yang sangat umum dalam aplikasi web moden adalah untuk memaparkan masa dan tarikh dalam istilah relatif. Sebagai contoh, anda akan sering menemui label seperti "semalam" dan "minggu lepas" dan bukannya menunjukkan tarikh penuh hari itu. Dengan global, tugas ini dapat dicapai dengan mudah dengan kaedah relativetimeFormatter. Berikut adalah contoh penggunaan:

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

Globalize menyediakan banyak kaedah lain yang saya tidak dilindungi dalam artikel ini. Walau bagaimanapun, topik yang dibentangkan di sini harus memberi anda maklumat yang cukup untuk membantu anda memulakan. Di samping itu, dokumentasi untuk perpustakaan ini sangat terperinci.

Kesimpulan

Dalam artikel ini, saya membincangkan apa pengantarabangsaan dan penyetempatan dan mengapa mereka sangat penting untuk memperluaskan pasaran untuk produk. Saya secara ringkas memperkenalkan API antarabangsa dengan menyebut beberapa ciri yang disokong, dan kemudian, saya menunjukkan beberapa contoh penggunaannya.

Di bahagian kedua artikel ini, saya memperkenalkan anda kepada Globalisasi, sebuah perpustakaan JavaScript yang dibangunkan oleh pasukan JQuery untuk pengantarabangsaan dan penyetempatan. Perpustakaan ini sangat kuat dan dilengkapi dengan semua kaedah yang mungkin anda perlukan untuk mengantarabangsakan projek anda, seperti: cara untuk menghuraikan nombor, tarikh format, dan format nilai mata wang. Jika anda fikir perpustakaan menjimatkan masa anda, jangan ragu untuk memberi kembali dengan menyumbang kepada projek.

sekali lagi mengingatkan anda bahawa semua coretan kod yang ditunjukkan dalam artikel ini boleh didapati di repositori GitHub kami.

FAQ (FAQ) mengenai Pengantarabangsaan dalam JavaScript (I18N)

Apakah kepentingan pengantarabangsaan (I18N) dalam JavaScript?

Pengantarabangsaan, sering disingkat sebagai I18N, merupakan aspek penting dalam pembangunan web, terutama ketika membuat aplikasi untuk penonton global. Ia melibatkan penyediaan laman web atau aplikasi anda untuk menyokong pelbagai bahasa dan perbezaan serantau. Ini amat penting dalam JavaScript, bahasa yang digunakan secara meluas dalam pembangunan web. Dengan melaksanakan I18N dalam JavaScript, pemaju boleh membuat aplikasi yang memenuhi kumpulan pengguna yang berbeza, dengan itu meningkatkan pengalaman dan akses pengguna. Ia juga membantu melokalkan aplikasi, yang dapat meningkatkan liputan dan kebolehgunaan aplikasi dengan ketara.

Bagaimana I18N berfungsi dalam JavaScript?

i18n dalam JavaScript berfungsi dengan membenarkan pemaju untuk melampaui rentetan atau mesej khusus locale dari kod aplikasi. Rentetan ini kemudian disimpan dalam fail berasingan, sering dirujuk sebagai pakej sumber. Setiap pakej sumber sepadan dengan lokasi tertentu. Apabila aplikasi berjalan, ia mengiktiraf lokasi pengguna dan memuatkan pakej sumber yang sepadan. Dengan cara ini, aplikasi boleh memaparkan mesej dan kandungan dalam bahasa pilihan pengguna.

Apakah beberapa perpustakaan popular untuk melaksanakan i18n dalam JavaScript?

Terdapat beberapa perpustakaan yang tersedia untuk melaksanakan I18N dalam JavaScript. Beberapa perpustakaan yang paling popular termasuk i18Next, i18n-JS, dan global. Perpustakaan ini menyediakan pelbagai ciri untuk memudahkan pengantarabangsaan, seperti pengesanan bahasa, pluralisasi, pemformatan berangka dan tarikh, dan banyak lagi. Mereka juga menyokong pelbagai kerangka seperti React, Sudut, dan Vue.js, menjadikan mereka alat yang serba boleh untuk pembangunan web.

Bagaimana menggunakan perpustakaan I18N-JS dalam projek JavaScript saya?

Untuk menggunakan perpustakaan I18N-JS dalam projek JavaScript anda, anda perlu memasangnya menggunakan NPM atau Benang. Setelah dipasang, anda boleh mengimportnya ke dalam projek anda dan mula menggunakan ciri -cirinya. Perpustakaan ini menyediakan fungsi untuk menterjemahkan rentetan, nombor pemformatan dan tarikh, dan banyak lagi. Anda juga boleh menentukan terjemahan anda dalam fail JSON yang berasingan, yang mana perpustakaan boleh memuatkan fail ini mengikut lokasi pengguna.

Bolehkah saya melaksanakan i18n dalam javascript tanpa menggunakan perpustakaan?

Ya, i18n boleh dilaksanakan di JavaScript tanpa menggunakan perpustakaan. Ini boleh dilakukan secara manual secara manual melangkaui rentetan khusus locale dari kod anda dan menyimpannya dalam fail berasingan. Walau bagaimanapun, untuk aplikasi yang lebih besar, pendekatan ini boleh memakan masa dan kompleks. Gunakan perpustakaan untuk memudahkan proses dan menyediakan ciri -ciri tambahan yang meningkatkan pengantarabangsaan aplikasi.

bagaimana menangani pluralisasi dalam i18n?

Melupuskan pluralisasi dalam I18N boleh menjadi rumit kerana peraturan jamak yang berbeza dalam bahasa yang berbeza. Walau bagaimanapun, banyak perpustakaan i18n memberikan keupayaan untuk mengendalikan pluralisasi. Sebagai contoh, perpustakaan I18N-JS menyediakan fungsi pluralisasi yang boleh mengendalikan bentuk jamak mengikut lokasi pengguna.

Bagaimana untuk menguji pengantarabangsaan permohonan saya?

Menguji pengantarabangsaan aplikasi melibatkan memeriksa sama ada aplikasi dengan betul memaparkan kandungan dan format dalam bahasa yang berbeza berdasarkan lokasi pengguna. Ini boleh dilakukan dengan mengubah tetapan locale secara manual dalam penyemak imbas atau menggunakan alat ujian automatik. Ia juga penting untuk memeriksa kes -kes kelebihan, seperti kekurangan terjemahan atau bentuk jamak yang salah.

bagaimana memproses tarikh dan format nombor dalam i18n?

Format Tarikh dan Nombor mungkin berbeza -beza di antara kawasan. Banyak perpustakaan i18n memberikan keupayaan untuk memformat tarikh dan nombor mengikut lokasi pengguna. Sebagai contoh, Perpustakaan I18N-JS menyediakan fungsi formatdate dan formatnumber yang boleh mengendalikan tugas-tugas ini.

Bagaimana menangani bahasa kanan-ke-kiri (RTL) dalam i18n?

Pengendalian bahasa ke kanan-ke-kiri (RTL) dalam i18N melibatkan menyesuaikan susun atur dan orientasi teks permohonan berdasarkan lokasi pengguna. Ini boleh dilakukan menggunakan sifat CSS dan HTML. Sesetengah perpustakaan i18n juga menyediakan fungsi untuk mengendalikan bahasa RTL.

Bagaimana menangani penyetempatan (L10N) dengan I18N?

Penyetempatan, biasanya disingkat sebagai L10N, melibatkan menyesuaikan aplikasi anda ke tempat tertentu, termasuk kandungan terjemahan, tarikh pemformatan dan nombor, dan banyak lagi. Walaupun i18N menyediakan aplikasi anda untuk menyokong pelbagai tempat, L10N melibatkan pelaksanaan tweak ini untuk setiap tempat tertentu. Banyak perpustakaan i18n juga menyediakan fungsi untuk mengendalikan penyetempatan.

Atas ialah kandungan terperinci Cara Melaksanakan Pengantarabangsaan (I18N) dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!