Cara Definitif untuk Format Tarikh untuk Tapak Antarabangsa
Format tarikh berbeza dengan rantau dan bahasa, jadi selalu berguna jika kita dapat mencari cara untuk memaparkan tarikh kepada pengguna, khusus untuk bahasa dan wilayah mereka.
Kembali pada Disember 2012, ECMA mengeluarkan spesifikasi API Pengantarabangsaan untuk JavaScript. API Pengantarabangsaan membantu kami memaparkan data tertentu mengikut bahasa dan spesifikasi cutural. Ia boleh digunakan untuk mengenal pasti mata wang, zon masa dan banyak lagi.
Dalam siaran ini kita akan melihat pemformatan tarikh menggunakan API ini.
Ketahui lokasi pengguna
Untuk menunjukkan tarikh mengikut lokasi pilihan pengguna, pertama kita perlu tahu apa yang disukai tempatan. Pada masa ini, cara yang mudah diketahui ialah untuk meminta pengguna; biarkan pengguna memilih tetapan bahasa dan rantau pilihan mereka di halaman web.
Tetapi, jika itu bukan pilihan anda boleh mentafsirkannya Terima-Bahasa permintaan header atau baca navigator.language(untuk Chrome dan Firefox) atau navigator.browserLanguage(untuk IE) nilai.
Sila ketahui bahawa tidak semua pilihan tersebut mengembalikan bahasa pilihan pelayar UI.
var language_tag = window.navigator.browserLanguage || window.navigator.language || "en"; // mengembalikan tag bahasa seperti 'en-GB'
Semak API Pengantarabangsaan
Untuk mengetahui sama ada pelayar menyokong API Pengantarabangsaan atau tidak, kami boleh menyemak kehadiran objek global Intl.
jika (window.hasOwnProperty)‹("Intl") && typeof Intl === "object") // API Pengantarabangsaan hadir, mari kita gunakan itu The Intl objek
Intl adalah objek global untuk menggunakan API Pengantarabangsaan. Ia mempunyai tiga sifat yang merupakan konstruktor untuk tiga objek iaitu Collator, NumberFormat, dan DateTimeFormat.
Objek yang akan kita gunakan ialah DateTimeFormat yang akan membantu kita memformat masa tarikh mengikut bahasa yang berlainan.
The DateTimeFormat objek
The DateTimeFormat pembina mengambil dua argumen pilihan;
tempatan- rentetan atau pelbagai rentetan yang mewakili tag bahasa, sebagai contoh; “de” untuk bahasa Jerman, “en-GB” untuk bahasa Inggeris yang digunakan di United Kingdom. Sekiranya tag bahasa tidak disebutkan, tempat asal lalai akan menjadi runtime.pilihan- objek yang sifatnya digunakan untuk menyesuaikan pemformat. Ia mempunyai ciri-ciri berikut:
| Harta | Penerangan | Nilai yang mungkin |
| hari | Hari bulan | “2 digit”, “angka” |
| zaman | Era tarikh jatuh, Ex: SM | “sempit”, “pendek”, “lama” |
| formatMatcher | Algoritma yang digunakan untuk padanan format | “asas”, “patut terbaik”[Lalai] |
| jam | Merupakan Jam pada masa itu | “2 digit”, “angka” |
| jam 12 | Menunjukkan format 12 jam (benar) atau format 24 jam (salah) | benar, salah |
| localeMatcher | Algoritma yang digunakan untuk pemadanan locale | “lookup”, “patut terbaik”[Lalai] |
| minit | Minit pada masa itu | “2 digit”, “angka” |
| bulan | Bulan dalam setahun | “2 digit”, “angka”, “sempit”, “pendek”, “lama” |
| kedua | Seconds pada masa itu | “2 digit”, “angka” |
| Zon masa | Zon waktu untuk memohon | “UTC”, lalai adalah zon waktu runtime |
| timeZoneName | Zon waktu tarikh | “pendek”, “lama” |
| hari kerja | Hari dalam seminggu | “sempit”, “pendek”, “lama” |
| tahun | Tahun tarikh | “2 digit”, “angka” |
Contoh:
var formatter = new Intl.DateTimeFormat ('en-GB'); / * mengembalikan formatter yang boleh memformat tarikh dalam format tarikh Inggeris Inggeris * / var options = weekday: 'short'; var formatter = new Intl.DateTimeFormat ('en-GB', pilihan); / * mengembalikan formatter yang boleh memformat tarikh dalam format tarikh Bahasa Inggeris Inggeris * bersama dengan hari kerja dalam notasi pendek seperti 'Thu' untuk Khamis * / The format fungsi
Contohnya DateTimeFormat objek mempunyai penunjuk harta (getter) dipanggil format yang mengembalikan fungsi format yang a Tarikh berdasarkan pada tempatan dan pilihan didapati di DateTimeFormat contohnya.
Fungsi ini mengambil a Tarikh objek atau undefined sebagai hujah pilihan dan mengembalikan a tali dalam format tarikh yang diminta.
Catatan: Jika hujah sama ada undefined atau tidak disediakan maka ia mengembalikan nilai Tarikh.now () dalam format tarikh yang diminta.
Inilah sintaks:
format Intl.DateTimeFormat (). baru () // akan memulangkan tarikh semasa dalam format tarikh runtime
Dan kini mari kita kod pemformatan tarikh ringkas.
Marilah kita menukar bahasa dan melihat output.
Sekarang, sudah tiba masanya untuk melihat pilihan.
The toLocaleDateString kaedah
Daripada menggunakan formatter seperti yang ditunjukkan dalam contoh di atas, anda juga boleh menggunakan Date.prototype.toLocaleString dengan cara yang sama dengan tempatan dan pilihan hujah, mereka adalah serupa tetapi disyorkan untuk menggunakannya DateTimeFormat objek ketika berurusan dengan terlalu banyak tarikh dalam permohonan anda.
var mydate = new Date ('2015/04/22'); var options = weekday: "short", year: "numeric", month: "long", day: "numeric"; console.log (mydate.toLocaleDateString ('en-GB', pilihan)); // returns "Wed, 22 April 2015" Uji jika tempatan disokong
Untuk memeriksa yang disokong tempatan, kita boleh menggunakan kaedah ini disokongLocalesOf daripada DateTimeFormat objek. Ia mengembalikan pelbagai semua kawasan sokongan atau array kosong jika tiada satupun daripada lokal disokong.
Untuk ujian, marilah kita menambah loceng dummy “blah” dalam senarai tempatan untuk diperiksa.
console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "blah", "fa-pes"])); // mengembalikan Array ["zh", "fa-pes"]
Sokongan Penyemak Imbas
Pada akhir bulan April 2015, pelayar utama menyokong API Pengantarabangsaan.
Rujukan
- ECMA Antarabangsa: Spesifikasi API Pengantarabangsaan ECMAScript
- IANA: Pendaftaran Subtop Bahasa
- Norbert's Corner: API Internationalization ECMAScript
