Apakah API Pengantarabangsaan JavaScript (I18N)?

Bahasa Inggeris adalah bahasa yang paling banyak digunakan di dunia, tetapi hanya satu dari tujuh orang yang berbahasa Inggeris. Ia adalah bahasa pertama (bahasa ibunda) sebanyak 379 juta orang, tetapi terdapat 917 juta orang yang berbahasa Mandarin, 460 juta orang yang berbahasa Sepanyol, dan 341 juta orang yang berbahasa Hindi.

Banyak pengguna berbahasa bukan bahasa Inggeris tinggal di pasaran baru muncul, dengan pertumbuhan internet meningkat secara eksponen. Jika aplikasi web anda boleh diterjemahkan secara global, pasaran sasaran berpotensi anda mungkin meningkat sebanyak 700%!

JavaScript International API (juga dikenali sebagai I18N) membolehkan anda merancang laman web dan aplikasi supaya mereka dapat dengan mudah menyesuaikan diri dengan keperluan pengguna yang bercakap bahasa yang berbeza.

Dalam artikel ini, kami akan melihat pelbagai kaedah API yang disediakan dan bagaimana untuk melaksanakannya dalam kod anda untuk mencapai penonton antarabangsa yang lebih luas.

mata utama

API Pengantarabangsaan JavaScript (I18N) menggalakkan penyesuaian aplikasi web kepada penonton global dengan menyokong pelbagai bahasa dan norma budaya.
Menggunakan objek INTL, pemaju boleh memformat tarikh, masa, nombor, dan senarai berdasarkan keutamaan tempatan, yang mungkin berbeza mengikut rantau.
• API
termasuk fungsi seperti
• dan Intl.DateTimeFormat(), yang menerima pengecam locale untuk membentangkan maklumat dalam format yang biasa kepada pengguna. Intl.NumberFormat()
Ciri -ciri canggih seperti pemformatan masa relatif () dan pemformatan sensitif plural (
• ) membolehkan aplikasi yang lebih nuanced dan budaya. Intl.RelativeTimeFormat Intl.PluralRules Walaupun keupayaannya yang kuat, API INTL JavaScript memerlukan pelaksanaan yang teliti untuk mengendalikan perbezaan bahasa dan budaya dengan berkesan dan memastikan bahawa aplikasi benar -benar antarabangsa.
Pengantarabangsaan (I18N) boleh menjadi rumit

Pengantarabangsaan kelihatan mudah ...

sehingga anda cuba melakukannya

. Bahasa berasaskan Latin mungkin sama di permukaan. Sebagai contoh, borang untuk meminta nama, e -mel, dan tarikh diterjemahkan seperti berikut:

Bahasa Sepanyol: Nombre, E -mel, Fecha

• Perancis: nom, e-mel, tarikh
• Jerman: Nama, e -mel, datum
sistem pengantarabangsaan dan penyetempatan GETTEXT telah wujud selama beberapa dekad, dan kebanyakan bahasa pengaturcaraan mempunyai perpustakaan yang tersedia.

Dalam kes yang lebih mudah, anda boleh menggunakan beberapa bentuk tokenisasi. Sebagai contoh, ambil templat HTML yang mengandungi yang berikut:

Ini secara dinamik akan menggantikan

<code><label> for="name"></label>{{ NAME }}>
</code>

"nama"

apabila pengguna menetapkan bahasa Inggeris sebagai bahasa utama mereka. Malangnya, ini adalah di mana masalah antara muka pengguna anda mula muncul:

1. Bahasa yang sama mungkin mempunyai variasi yang berbeza. Penggunaan bahasa Sepanyol di Sepanyol tidak sama seperti di Amerika Selatan.
2. perkataan dalam satu bahasa boleh tumbuh lebih lama dalam bahasa lain. Sebagai contoh, "e -mel" diterjemahkan dalam bahasa Rusia sebagai "э (ээт foto пmi".
3. teks tidak selalu diatur dari kiri ke kanan. Ada yang ditulis dari kanan ke kiri - seperti bahasa Arab, Ibrani, Kurdish dan Yiddish. Bahasa lain boleh ditulis dari atas ke bawah, seperti Cina, Korea, Jepun dan Taiwan.

Banyak isu boleh diselesaikan dengan menyimpan teks dengan minimum dan meletakkan dengan sifat CSS seperti orientasi, corak penulisan, dan dimensi logik.

Istilah kekeliruan

Kekeliruan lanjut berlaku apabila aplikasi anda perlu memaparkan tarikh, masa, nombor, mata wang, atau unit.

Pertimbangkan memaparkan tarikh sebagai "12/03/24". Ia akan ditafsirkan sebagai:

• U.S.
penduduk Eropah, Amerika Selatan dan Asia dalam format DMY menafsirkannya sebagai "12 Mac, 2024",
Penduduk Kanada, China, Jepun dan Hungary menggunakan format YMD yang lebih praktikal akan menafsirkannya sebagai "24 Mac 2012".

(sila ambil perhatian bahawa pemisah tarikh pemisah tidak biasa digunakan dalam semua bahasa!)

Nombor "1,000" akan ditafsirkan sebagai:

orang dari Amerika Syarikat, Britain, Kanada, China dan Jepun akan menafsirkannya sebagai "seribu",

• Orang di Sepanyol, Perancis, Jerman dan Rusia akan menafsirkannya sebagai "satu (titik sifar)" kerana pecahan perpuluhan negara -negara ini dipisahkan oleh koma.
Walaupun dalam bahasa Inggeris sahaja, keadaan boleh menjadi rumit. Istilah "1,000 meter" bermaksud:

1 km (atau 0.62 mi) untuk penduduk A.S.

• Bagi orang di UK, Kanada dan Australia, ia adalah koleksi seribu instrumen pengukur!
JavaScript Intl API

Objek INTL JavaScript yang terkenal melaksanakan API International ECMAScript dalam pelayar dan runtime yang paling moden. Sokongan biasanya baik, dan bahkan IE11 mempunyai banyak kaedah yang lebih berguna. Untuk penyemak imbas yang lebih tua, terdapat polyfill dan API dapat dikesan seperti ini:

API agak luar biasa. Ia menyediakan beberapa pembina objek untuk tarikh, masa, nombor, dan senarai yang lulus tempatan dan objek pilihan yang mengandungi parameter konfigurasi. Sebagai contoh, ini adalah objek DateTime yang menentukan bahasa Inggeris Amerika:

<code><label> for="name"></label>{{ NAME }}>
</code>

Objek ini boleh digunakan beberapa kali untuk memanggil pelbagai kaedah yang lulus tarikh () nilai (atau tersedia ES6 temporal). Kaedah format biasanya merupakan pilihan yang paling praktikal. Contohnya:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Sebagai alternatif, anda boleh membuat objek INTL dalam baris kod dan menjalankan kaedah:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Di samping kaedah format (), beberapa objek juga menyokong kaedah berikut:

• formatAttOparts (): Mengembalikan pelbagai objek yang mengandungi rentetan diformat, contohnya {type: 'weekday', nilai: 'Isnin'}
• ResolvedOptions (): Mengembalikan objek baru yang mengandungi sifat -sifat yang mencerminkan pilihan lokasi dan pemformatan yang digunakan, seperti DateFormatter.ResolvedOptions (). Locale.

Tentukan locale

Semua objek INTL memerlukan parameter locale. Ini adalah rentetan yang mengenal pasti:

• subtag bahasa
• subtag skrip (pilihan)
• rantau (atau negara) subtag (pilihan)
• satu atau lebih subtag variasi (pilihan)
• satu atau lebih urutan lanjutan BCP 47 (pilihan)
• urutan lanjutan tujuan khas (pilihan)

bahasa dan rantau biasanya mencukupi. Sebagai contoh, "en-us", "fr-fr", dll.

Selain menggunakan rentetan, anda juga boleh menggunakan objek Intl.Locale untuk membina kawasan, seperti Bahasa Inggeris AS dalam format 12 jam:

<code><label> for="name"></label>{{ NAME }}>
</code>

Ini boleh digunakan dalam pembina INTL yang lain. Contohnya:

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Jika locale tidak ditakrifkan, bahasa semasa dan tetapan serantau peranti digunakan. Contohnya:

Ini mengembalikan "5/4/2022" pada peranti yang ditetapkan di Amerika Syarikat dan "04/05/2022" pada peranti yang ditetapkan di United Kingdom.

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Tarikh dan masa

Alat berikut menunjukkan contoh tarikh dan masa yang diformat menggunakan intl.dateTimeFormat () (kami sangat menyesal jika bahasa atau wilayah anda tidak disenaraikan!):

(contoh codepen harus tertanam di sini, tetapi kerana saya tidak dapat membenamkan sumber luaran secara langsung, saya hanya dapat memberikan keterangan teks.) Contoh Codepen menunjukkan pelbagai cara untuk memformat tarikh dan masa di kawasan dan bahasa yang berbeza menggunakan

, termasuk gaya tarikh yang berbeza (penuh, panjang, sederhana, pendek) dan gaya masa (penuh, panjang, sederhana, pendek), serta pilihan lain seperti kalendar, zon waktu, dll.

Intl.DateTimeFormat() Pembina melewati objek locale dan opsyen. Terdapat banyak sifat yang mungkin untuk ini, walaupun anda jarang perlu melebihi gaya dan/atau gaya masa:

(ia harus menjadi jadual di sini, tetapi kerana saya tidak dapat membuat jadual secara langsung, saya hanya dapat memberikan keterangan teks.) Jadual menyenaraikan sifat

dan penerangan mereka, termasuk

, Intl.DateTimeFormat(), dateStyle, timeStyle>, calendar, dayPeriod, numberingSystem, localeMatcher, timeZone, hour12, hourCycle, formatMatcher, weekday, era, year, month, day, hour, minute, second, timeZoneName,

,

,

, dll.

<code>const valentinesDay = dateFormatter.format( new Date('2022-02-14') );
// 返回美国格式“2/14/2022”

const starwarsDay = dateFormatter.format( new Date('2022-05-04') );
// 返回美国格式“5/4/2022”
</code>

Contoh:

julat tarikh

<code>const starwarsDay = new Intl.DateTimeFormat('en-US').format( new Date('2022-05-04') );
</code>

Kaedah

formatRange () mengambil dua tarikh dan format tempoh dengan cara yang paling ringkas, bergantung kepada lokasi dan pilihan. Contohnya:

Kaedah ini mempunyai julat sokongan penyemak imbas yang lebih kecil, tetapi ia dilaksanakan dalam Chrome 76.

tempoh relatif

Objek intl.RelativeTimeFormat () boleh memaparkan tempoh berbanding dengan masa ini. Objek pilihan mempunyai pilihan yang lebih sedikit:

(ia harus menjadi jadual di sini, tetapi kerana saya tidak dapat membuat jadual secara langsung, saya hanya dapat memberikan keterangan teks.) Jadual menyenaraikan sifat Intl.RelativeTimeFormat() dan penerangan mereka, termasuk localeMatcher, numeric, style, > Tunggu.

Kaedah format () Format () meluluskan nilai dan unit: "tahun", "suku", "bulan", "minggu", "hari", "jam", "minit", atau "kedua". Contoh:

<code><label> for="name"></label>{{ NAME }}>
</code>

digital, mata wang, peratusan dan unit

Alat berikut menunjukkan contoh nombor pemformatan, mata wang, peratusan, dan unit pengukuran menggunakan intl.numberFormat ():

(contoh codepen harus tertanam di sini, tetapi kerana saya tidak dapat membenamkan sumber luaran secara langsung, saya hanya dapat memberikan keterangan teks.) Contoh codepen menunjukkan cara memformat nombor, mata wang, peratusan dan unit di kawasan yang berlainan dan Bahasa menggunakan

, termasuk gaya yang berbeza (perpuluhan, mata wang, peratus, unit) dan pilihan seperti Intl.NumberFormat(), notation, currency, currencyDisplay, unit, unitDisplay, useGrouping, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, minimumSignificantDigits, maximumSignificantDigits,

, 🎜>,

,

,

, dan lain -lain. Intl.NumberFormat() numberingSystem pembina melewati objek locale dan pilihan: notation style (ia harus menjadi jadual di sini, tetapi kerana saya tidak dapat membuat jadual secara langsung, saya hanya dapat memberikan keterangan teks.) Jadual menyenaraikan sifat currency dan penerangan mereka, termasuk currencyDisplay, currencySign, unit, unitDisplay>, useGrouping, minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits, minimumSignificantDigits, maximumSignificantDigits,

,

,

,

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

,

, ,

,

,

, dll.

Contoh:

Intl.ListFormat() type Senarai style Objek

intl.listFormat () boleh memformat pelbagai item ke dalam senarai sensitif bahasa. Dalam bahasa Inggeris, ini biasanya memerlukan menambah "dan" atau "atau" sebelum item terakhir.

Ciri -ciri berikut boleh ditetapkan dalam objek pilihan:

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

(ia harus menjadi jadual di sini, tetapi kerana saya tidak dapat membuat jadual secara langsung, saya hanya dapat memberikan keterangan teks.) Jadual menyenaraikan sifat

dan penerangan mereka, termasuk

,

, dll. Contoh: Plural Objek Intl.PluralRules () yang agak pelik () menyokong peraturan bahasa sensitif jamak, di mana anda mempunyai beberapa item. Objek Opsyen boleh menetapkan jenis harta kepada:

• asas: bilangan perkara (nilai lalai), atau
• Nombor Ordinal: Kedudukan perkara, seperti pertama, kedua atau ketiga dalam Bahasa Inggeris

Kaedah

pilih () mengembalikan rentetan bahasa Inggeris yang mewakili kategori jamak nombor angka (sifar, satu, dua, minoriti, majoriti, atau lain -lain).

Contoh:

<code><label> for="name"></label>{{ NAME }}>
</code>

perbandingan rentetan

Akhir sekali, objek intl.collator () menyokong perbandingan rentetan sensitif bahasa. Objek pilihannya boleh menetapkan sifat berikut:

(ia harus menjadi jadual di sini, tetapi kerana saya tidak dapat membuat jadual secara langsung, saya hanya dapat memberikan keterangan teks.) Jadual menyenaraikan sifat Intl.Collator() dan penerangan mereka, termasuk collation, numeric, dll.

Kaedah membandingkan () membandingkan dua rentetan. Contohnya:

Keuntungan!

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

Jika anda menggunakan JavaScript untuk memaparkan data, anda harus dapat memaparkan maklumat secara langsung dalam format tempatan pengguna. Sebagai contoh, kod berikut mentakrifkan fungsi dateFormat () yang menggunakan format tarikh pendek INTL atau jatuh ke

yyyy-mm-dd

jika format tidak disokong:

Ini dengan sendirinya tidak menjadikan aplikasi anda lebih mudah untuk penonton antarabangsa, tetapi ia adalah langkah pertama yang lebih dekat dengan pengedaran global.

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

Soalan Lazim (FAQ) Mengenai JavaScript Internationalisation API (I18N)

Apakah tujuan API Pengantarabangsaan JavaScript (I18N)?

API Pengantarabangsaan JavaScript JavaScript (juga dikenali sebagai I18N) adalah API JavaScript terbina dalam yang menyediakan perbandingan rentetan sensitif bahasa, pemformatan angka, dan pemformatan tarikh dan masa. Ia membolehkan pemaju untuk mengantarabsankan aplikasi mereka dengan memberikan sokongan untuk bahasa dan konvensyen budaya yang berbeza. Ini amat berguna untuk aplikasi yang digunakan di seluruh dunia, kerana ia membolehkan mereka menyesuaikan diri dengan konvensyen bahasa dan format di kawasan yang berbeza.

Bagaimana JavaScript i18n mengendalikan tarikh dan pemformatan masa?

JavaScript i18n menyediakan objek DateTimeFormat yang boleh digunakan untuk memformat tarikh dan masa mengikut konvensyen budaya yang berbeza. Objek ini mengambil objek lokasi dan pilihan sebagai parameter, yang menentukan konvensyen format untuk digunakan. Objek Pilihan boleh menentukan format tarikh, masa, zon waktu, dan aspek lain dari format tarikh dan masa.

Bagaimana menangani pemformatan digital dalam JavaScript i18n?

JavaScript i18n menyediakan objek NumberFormat yang boleh digunakan untuk memformat nombor mengikut konvensyen budaya yang berbeza. Objek ini mengambil objek lokasi dan pilihan sebagai parameter, yang menentukan konvensyen format untuk digunakan. Objek pilihan boleh menentukan gaya nombor (perpuluhan, peratusan, atau mata wang), penggunaan pemisah kumpulan, tempat perpuluhan minimum dan maksimum, dan aspek lain dari format angka.

Bagaimana untuk mengendalikan perbandingan rentetan dalam JavaScript i18n?

JavaScript i18n menyediakan objek Collator yang boleh digunakan untuk membandingkan rentetan mengikut konvensyen budaya yang berbeza. Objek ini mengambil objek locale dan pilihan sebagai parameter, yang menentukan konvensyen perbandingan untuk digunakan. Objek pilihan boleh menentukan kepekaan perbandingan (asas, aksen, kes, atau variasi), penggunaan penyortiran angka, dan aspek perbandingan rentetan lain.

Bagaimana untuk menentukan tempat untuk JavaScript i18n?

Apabila membuat objek DateTimeFormat, NumberFormat, atau Collator, anda boleh menentukan lokasi sebagai parameter. Lokasi adalah rentetan yang mewakili bahasa dan rantau, seperti "en-us" dalam bahasa Inggeris Amerika atau "FR-FR" dalam bahasa Perancis yang digunakan di Perancis. Jika lokasi tidak ditentukan, lokasi lalai untuk persekitaran JavaScript digunakan.

Bolehkah saya menggunakan pelbagai tempat dengan JavaScript i18n?

Ya, apabila membuat objek DateTimeFormat, NumberFormat, atau Collator, anda boleh menentukan pelbagai tempat sebagai array. JavaScript i18n akan menggunakan lokasi pertama yang menyokongnya dalam array. Ini sangat berguna untuk aplikasi yang digunakan di beberapa kawasan, kerana ia membolehkan mereka menyesuaikan diri dengan konvensyen bahasa dan format di kawasan yang berbeza.

Bagaimana untuk menyesuaikan pilihan pemformatan JavaScript i18n?

Apabila membuat objek DateTimeFormat, NumberFormat, atau Collator, anda boleh menyesuaikan pilihan pemformatan untuk JavaScript i18n dengan menyediakan objek pilihan. Objek pilihan boleh menentukan aspek pemformatan atau perbandingan, seperti format tarikh atau nombor, kepekaan perbandingan rentetan, dan sebagainya.

Bolehkah saya menggunakan JavaScript i18n dengan API JavaScript lain?

Ya, JavaScript i18n boleh digunakan bersempena dengan API JavaScript yang lain. Sebagai contoh, anda boleh menggunakan objek tarikh dengan objek DateTimeFormat untuk memformat tarikh, atau anda boleh menggunakan objek nombor dengan objek NumberFormat untuk nombor format. Ini membolehkan anda memanfaatkan kuasa JavaScript untuk mengantarabsankan aplikasi anda.

Adakah JavaScript i18n disokong oleh semua pelayar?

Pelayar yang paling moden (termasuk Chrome, Firefox, Safari, dan Edge) menyokong JavaScript i18n. Walau bagaimanapun, ia mungkin tidak disokong oleh pelayar yang lebih tua atau beberapa pelayar mudah alih. Anda boleh melihat jadual keserasian di Rangkaian Pemaju Mozilla (MDN) untuk maklumat terkini mengenai sokongan penyemak imbas.

di mana saya boleh mengetahui lebih lanjut mengenai JavaScript i18n?

Anda boleh mengetahui lebih lanjut mengenai JavaScript i18n dari Spesifikasi API Antarabangsa ECMAScript rasmi, Rangkaian Pemaju Mozilla (MDN), dan pelbagai tutorial dan artikel dalam talian. Sumber -sumber ini memberikan maklumat terperinci mengenai API dan penggunaannya, serta contoh dan amalan terbaik untuk memanfaatkan aplikasi JavaScript.

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