Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Bekerja Dengan Intl

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Internasionalisasi - sesuatu yang sering Anda dengar dari para pengembang, tetapi jarang sekali orang yang benar-benar menggunakannya - sedang menendang celana dengan API Internasionalisasi ECMAScript yang baru. Saat ini didukung di Chrome 24, Chrome untuk Android, Firefox 29, IE 11, dan Opera 15 (sayangnya tidak ada dukungan Safari), namespace Intl baru menyediakan satu set fungsi untuk menambahkan internasionalisasi ke nomor Anda, tanggal, dan penyortiran. Dalam artikel ini saya akan menunjukkan fitur-fitur utama dari Intl dan membawa Anda pada jalur untuk mengadopsi dukungan bagi miliaran orang di Internet yang tinggal di luar negara Anda sendiri!

Fitur Inti

Namespace Internasional mencakup tiga bidang fungsi utama:

  • Memformat angka
  • Memformat tanggal
  • Menyortir string

Di dalam masing-masing ini terdapat berbagai opsi untuk mengontrol baik lokal yang digunakan untuk memformat maupun opsi pemformatan. Sebagai contoh, formatter nomor termasuk dukungan untuk menangani mata uang. Formatter tanggal memiliki opsi untuk bagian apa dari tanggal yang akan ditampilkan.

Mari kita lihat beberapa contoh.

Aplikasi Kami

Aplikasi pertama kami adalah reporter data sederhana. Ia menggunakan AJAX untuk mengambil satu set data yang berisi tanggal dan angka. Pertama, HTML:

Listing 1: test1.html:

Catat tabel yang kosong. Di situlah kami akan membuang data kami. Sekarang mari kita lihat JavaScript.

Listing 2: app1.js:

Semua yang dilakukan kode di sini, adalah membuat panggilan AJAX ke file dan merender hasilnya ke data. File data, stats.json, hanyalah sebuah array dari sepuluh nilai kode keras. Berikut ini sebagian dari file:

Seperti yang Anda lihat, tanggal tersebut diformat sebagai bulan/tanggal/tahun dan nomor-nomor dilewatkan, sebagaimana adanya. Ini bisa diterima:

Tetapi perhatikan jumlahnya agak sulit dibaca tanpa format. Mari kita mulai dengan menambahkan beberapa pemformatan ke angka.

Menambahkan Format Angka

Modifikasi berikut dapat dilihat di app2.js dan diuji dengan test2.html. Pertama, saya akan memodifikasi kode saya untuk memanggil fungsi baru, numberFormat:

Dan inilah fungsi itu:

Fungsi ini dimulai dengan memeriksa apakah Intl ada sebagai bagian dari objek window. Jika ya, kami kemudian memeriksa untuk melihat apakah kami telah membuat formatter sebelumnya. Objek Intl membuat objek pemformatan yang dapat Anda gunakan kembali, dan karena kami memformat banyak angka, kami hanya ingin membuatnya sekali saja. Itulah tepatnya apa yang kita lakukan segera setelah kita melihat bahwa kita perlu juga. Kami tidak peduli dengan opsi apa pun untuk saat ini, hanya untuk membuatnya tetap sederhana. Akhirnya, jika tidak ada dukungan untuk Intl sama sekali, kami hanya mengembalikan nomornya sebagaimana adanya. Hasilnya adalah peningkatan yang signifikan, dengan kerja minimal:

Keren! Jadi, bagaimana kita menguji bahasa lain? Anda mungkin tergoda untuk memeriksa pengaturan browser Anda. Semua browser memiliki preferensi untuk bahasa, tetapi sayangnya, mengubah bahasa di browser tidak cukup. Mengubahnya memengaruhi cara berperilaku browser.

Jika Anda membuka alat dev dan melihat permintaan jaringan, Anda dapat melihat bahwa sebuah header bernama "Accept-Lanage" akan berubah berdasarkan pengaturan Anda. Jika Anda menambahkan bahasa Prancis, misalnya (saya mengasumsikan Anda bukan penutur bahasa Prancis asli), Anda akan melihat "fr" ditambahkan ke tajuk ini. Tapi ini tidak berdampak Intl. Sebagai gantinya, Anda harus mengubah bahasa sistem operasi Anda dan memulai kembali peramban. Ini tidak seseram kedengarannya. Ketika saya menguji, saya khawatir seluruh sistem operasi saya akan segera berubah. Namun dalam pengujian saya, saya bisa mengubah bahasa, restart browser saya, dan lihat perubahannya. Saya dengan cepat berubah kembali. Fungsi formatter Internasional memungkinkan Anda untuk mengganti lokal saat ini dan mengirimkannya sebagai gantinya.

Saya memodifikasi aplikasi untuk memungkinkan pengguna akhir menentukan bahasa melalui drop down. Berikut modifikasi yang dilakukan pada HTML. (Modifikasi ini dapat ditemukan di test3.html)

Bahasa yang saya pilih cukup sewenang-wenang. Berikutnya - Saya memperbarui kode aplikasi saya untuk mendengarkan perubahan pada drop down ini serta memeriksa lokal yang diinginkan saat memformat.

Listing 3: app3.js:

Mulai dari bagian bawah - perhatikan bahwa saya telah menambahkan event handler sederhana untuk perubahan pada drop down. Ketika suatu perubahan dideteksi, tabel dikosongkan dan fungsi getStats dijalankan. Fungsi baru ini hanya mengabstraksikan kode AJAX yang digunakan sebelumnya. Perubahan sebenarnya sekarang ada di numberFormat. Saya memeriksa bahasa yang dipilih dan jika salah satu dari mereka terpilih, kami meneruskannya sebagai lokal ke konstruktor NumberFormat. Perhatikan bahwa jika ada sesuatu yang tidak dipilih, kita default ke navigator.language. Ini sekarang memberi kita cara cepat menguji berbagai lokal dan melihat bagaimana mereka membuat angka.

Menambahkan Format Tanggal

Sekarang adalah waktu yang tepat untuk mengurus kolom data lainnya - angka-angka. Saya mengikuti gaya yang sama seperti sebelumnya dan menambahkan panggilan ke fungsi baru, dateFormat.

Dan di sini adalah dateFormat (Anda dapat menemukan kode di app4.js, yang digunakan oleh test4.html):

Ini sangat mirip dengan pemformatan angka, kecuali kali ini kami secara eksplisit menyampaikan beberapa opsi ketika kami membuat formatter. Opsi menentukan apakah bidang yang terlihat di tanggal, serta bagaimana tampilannya. Setiap bagian dari tanggal dapat ditampilkan atau tidak, dan masing-masing memiliki opsi yang berbeda. Pilihannya termasuk:

  • weekday
  • era
  • year
  • month
  • day
  • hour
  • minute
  • second
  • timeZoneName

Untuk daftar lengkap nilai apa yang dapat Anda gunakan, lihat dokumentasi MDN untuk DateTimeFormat, tetapi sebagai contoh, bulan dapat ditampilkan sebagai angka atau dalam bentuk tekstual yang berbeda. Jadi apa yang dibuat ini? Ini versi bahasa Inggrisnya:

Dan ini dia dalam bahasa Prancis:

Anda mungkin bertanya-tanya - apa yang mencakup lokasi masing-masing bidang? Sejauh yang saya tahu, Anda tidak punya kendali atas ini. Anda dapat, tentu saja, membuat beberapa formatters dan kemudian menggabungkannya bersama-sama, tetapi menggunakan satu formatter tata letak bidang didorong oleh logika internal. Jika Anda mematikan hari dalam sebulan, misalnya, inilah yang Anda dapatkan: April 2013 Senin. Mengapa? Sejujurnya aku tidak tahu.

Akhirnya - perhatikan bahwa Anda harus memberikan nilai tanggal, bukan string, ke formatter. Anda dapat melihat di mana saya menggunakan konstruktor tanggal di formatter untuk mengurai tanggal berbasis string saya. Ini - sedikit longgar - jadi ingatlah ini ketika menggunakan fungsi ini.

Tunjukkan pada saya uang

Pemformatan mata uang bukan objek terpisah, tetapi lebih merupakan penggunaan opsional dari pemformat nomor. Untuk demo berikutnya, kami telah membuat file data baru, stats2.json, dan menambahkan kolom "penjualan" ke data kami. Berikut ini contohnya:

Kolom ditambahkan ke HTML (test5.html), ditambahkan dalam iterasi JavaScript atas baris data (lihat app5.js), dan diteruskan ke fungsi baru yang disebut currencyFormat. Mari kita lihat itu.

Menampilkan angka sebagai mata uang membutuhkan dua nilai opsional. Pertama, gaya "mata uang", dan kemudian jenis mata uangnya. Pilihan lain (seperti cara menampilkan nama mata uang) juga ada. Inilah bagian yang mungkin membuat Anda sedikit tersandung. Anda harus menentukan jenis mata uang.

Anda mungkin berpikir - bagaimana cara saya mengetahui jenis mata uang untuk semua nilai yang mungkin? Nilai yang mungkin didasarkan pada spesifikasi (http://www.currency-iso.org/en/home/tables/table-a1.html) dan secara teori Anda dapat menguraikan XML mereka, tetapi Anda tidak ingin melakukannya bahwa. Alasan mengapa cukup jelas tetapi saya bisa dengan jujur mengatakan saya lupa pada awalnya juga. Anda tidak ingin hanya menampilkan kembali nomor tertentu dalam mata uang lokal tertentu. Mengapa? Karena sepuluh dolar Amerika tentu tidak sama dengan sepuluh dolar dalam peso. Itu cukup jelas dan semoga aku satu-satunya orang yang melupakan itu.

Dengan menggunakan kode di atas, kita dapat melihat hasil berikut di lokal Perancis. Perhatikan bagaimana angka-angka diformat tepat untuk lokal dan simbol mata uang ditempatkan setelah nomor tersebut.

Menyortir Dengan Collator

Untuk contoh terakhir kita, kita akan melihat konstruktor Collator. Kolektor memungkinkan Anda menangani pemilahan teks. Sementara beberapa bahasa mengikuti sistem pemesanan A sampai Z yang sederhana, bahasa lain memiliki aturan yang berbeda. Dan tentu saja, hal-hal menjadi lebih menarik ketika Anda mulai menambahkan aksen. Dapatkah Anda mengatakan, dengan pasti, jika ä datang setelah? Saya tahu saya tidak bisa. Konstruktor kolektor mengambil sejumlah argumen untuk membantunya menentukan dengan tepat bagaimana seharusnya mengurutkan, tetapi default mungkin akan bekerja dengan baik untuk Anda.

Untuk contoh ini, kami telah membuat demo yang sepenuhnya baru, tetapi yang serupa dengan contoh sebelumnya. Di test6.html, Anda dapat melihat tabel baru, untuk Students. Kode baru kami akan memuat paket JSON siswa dan kemudian menyortirnya pada klien. Data JSON hanyalah sebuah array nama jadi saya akan melewatkan menunjukkan kutipan. Mari kita lihat logika aplikasi.

Listing 4: app6.js:

Seperti yang saya katakan, kode ini sangat mirip dengan contoh sebelumnya, jadi fokuslah untuk getStudents terlebih dahulu. Garis penting di sini adalah: s.sort(sortir). Kami menggunakan fungsi built-in untuk array untuk melakukan penyortiran melalui fungsi kustom. Fungsi itu akan melewati dua hal untuk dibandingkan dan harus mengembalikan -1, 0, atau 1 untuk menunjukkan bagaimana dua item harus disortir. Sekarang mari kita lihat penyortir.

Jika kita memiliki objek Intl, kita membuat Collator baru (dan sekali lagi, kami mengizinkan Anda untuk mengirimkan sebuah lokal) dan kemudian kita menjalankan fungsi compare. Itu dia. Seperti yang saya katakan, ada opsi untuk mengubah cara segala sesuatunya disortir, tetapi kita dapat menggunakan default. Fallback adalah localeCompare, yang juga akan mencoba menggunakan format khusus lokal, tetapi memiliki (dalam bentuk ini) dukungan yang sedikit lebih baik. Kami dapat memeriksa dukungan itu juga dan menambahkan satu lagi penggantian untuk dukungan yang sangat baik, tetapi saya akan meninggalkan itu untuk Anda, sebagai latihan.

Kami juga telah memodifikasi bagian depan untuk menggunakan bahasa Swedia sebagai bahasa. Saya melakukan ini karena dokumentasi MDN yang sangat baik menunjukkan bahwa itu adalah cara yang baik untuk melihat pengurutan dalam tindakan. Inilah jenis bahasa Inggris dari nama mahasiswa kami:

Dan ini dia di Swedia:

Perhatikan bagaimana ätest diurutkan secara berbeda. (Maaf, aku tidak bisa memikirkan nama yang dimulai dengan ä.)

Kesimpulan

Secara keseluruhan, kelas Intl menyediakan beberapa cara yang sangat sederhana untuk menambahkan pemformatan spesifik lokal ke kode Anda. Ini tentu saja sesuatu yang dapat Anda temukan sekarang, mungkin di beberapa ribu perpustakaan JavaScript yang berbeda, tetapi sangat bagus untuk melihat produsen browser menambahkan dukungan langsung dalam bahasa itu sendiri. Kurangnya dukungan iOS memang mengecewakan, tetapi semoga itu akan segera ditambahkan.

Terima kasih kepada Jaringan Pengembang Mozilla yang luar biasa untuk dokumentasi Intl yang hebat.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.