M

MLOG

Bahasa Indonesia

Buka jangkauan global dengan API Intl JavaScript. Pelajari praktik terbaik internasionalisasi untuk memformat tanggal, angka, mata uang, dan lainnya, memastikan pengalaman pengguna yang mulus di seluruh dunia.

API Intl JavaScript: Praktik Terbaik Internasionalisasi untuk Audiens Global

Di dunia yang saling terhubung saat ini, membuat aplikasi web yang melayani audiens global sangatlah penting. API Intl JavaScript menyediakan alat yang kuat untuk internasionalisasi (i18n), memungkinkan Anda memformat tanggal, angka, mata uang, dan lainnya sesuai dengan konvensi berbagai lokal. Artikel ini membahas praktik terbaik untuk memanfaatkan API Intl guna membangun aplikasi yang benar-benar global.

Memahami Internasionalisasi (i18n) dan Lokalisasi (l10n)

Sebelum mendalami spesifikasi API Intl, penting untuk memahami perbedaan antara internasionalisasi (i18n) dan lokalisasi (l10n). I18n adalah proses merancang dan mengembangkan aplikasi sedemikian rupa sehingga dapat dengan mudah diadaptasi untuk berbagai bahasa dan wilayah tanpa memerlukan perubahan rekayasa. Di sisi lain, L10n adalah proses mengadaptasi aplikasi yang sudah diinternasionalisasi untuk lokal tertentu dengan menerjemahkan teks dan menyesuaikan elemen spesifik lokal lainnya.

API Intl berfokus pada aspek i18n, menyediakan mekanisme untuk menangani data yang sensitif terhadap lokal, sementara lokalisasi biasanya melibatkan penyediaan terjemahan dan konfigurasi spesifik lokal.

Komponen Kunci API Intl

API Intl terdiri dari beberapa objek kunci, masing-masing bertanggung jawab untuk menangani aspek spesifik dari internasionalisasi:

Praktik Terbaik Menggunakan API Intl

Untuk memanfaatkan API Intl secara efektif dan memastikan pengalaman pengguna yang positif bagi audiens global Anda, pertimbangkan praktik terbaik berikut:

1. Tentukan Lokal yang Benar

Dasar dari internasionalisasi adalah menentukan lokal yang benar. Lokal mengidentifikasi bahasa, wilayah, dan varian spesifik apa pun yang akan digunakan untuk pemformatan. Anda bisa mendapatkan lokal yang disukai pengguna dari properti navigator.language atau header HTTP Accept-Language.

Saat membuat objek Intl, Anda dapat menentukan lokal sebagai string atau larik string. Jika Anda menyediakan larik, API akan mencoba menemukan lokal yang paling cocok dari opsi yang tersedia.

Contoh:

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

Jika lokal yang disukai pengguna tidak tersedia, Anda dapat menyediakan lokal cadangan. Misalnya, Anda mungkin menggunakan 'en-US' sebagai default jika browser pengguna melaporkan lokal yang tidak didukung.

2. Manfaatkan Intl.DateTimeFormat untuk Pemformatan Tanggal dan Waktu

Memformat tanggal dan waktu dengan benar sangat penting untuk memberikan pengalaman yang terlokalisasi. Objek Intl.DateTimeFormat memungkinkan Anda memformat tanggal dan waktu sesuai dengan konvensi lokal tertentu.

Anda dapat menyesuaikan pemformatan dengan menentukan berbagai opsi, seperti format tahun, bulan, hari, jam, menit, dan detik. Anda juga dapat menentukan zona waktu untuk memastikan bahwa tanggal dan waktu ditampilkan dengan benar untuk pengguna di berbagai belahan dunia.

Contoh:

const locale = 'de-DE'; // Jerman (Germany)
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); // Output: mis. "22. Mai 2024, 14:30"
console.log(formattedDate);

Contoh ini memformat tanggal dan waktu saat ini sesuai dengan lokal Jerman (Germany), termasuk tahun, bulan, hari, jam, dan menit. Ini juga menentukan zona waktu 'Europe/Berlin'.

Ingatlah untuk mempertimbangkan berbagai format tanggal dan waktu yang digunakan di seluruh dunia. Misalnya, AS menggunakan MM/DD/YYYY, sementara banyak negara lain menggunakan DD/MM/YYYY.

3. Gunakan Intl.NumberFormat untuk Pemformatan Angka, Mata Uang, dan Persentase

Objek Intl.NumberFormat menyediakan cara yang fleksibel untuk memformat angka, mata uang, dan persentase sesuai dengan konvensi spesifik lokal. Anda dapat menyesuaikan pemformatan dengan menentukan opsi seperti mata uang, gaya (desimal, mata uang, atau persen), digit pecahan minimum dan maksimum, dan lainnya.

Contoh (Pemformatan Mata Uang):

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

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

Contoh ini memformat angka 12345.67 sebagai Yen Jepang (JPY). Perhatikan bagaimana simbol mata uang (￥) dan pemisah ribuan (,) secara otomatis disesuaikan sesuai dengan lokal Jepang.

Contoh (Pemformatan Persentase):

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

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

Contoh ini memformat angka 0.75 sebagai persentase dalam bahasa Arab (Mesir). Outputnya mencakup tanda persen Arab (٪) dan dua tempat desimal.

Pertimbangan Penting untuk Pemformatan Mata Uang:

4. Tangani Pluralisasi dengan Benar menggunakan Intl.PluralRules

Aturan pluralisasi sangat bervariasi antar bahasa. Misalnya, bahasa Inggris memiliki aturan sederhana dengan bentuk tunggal dan jamak, sementara bahasa lain memiliki aturan yang lebih kompleks berdasarkan nilai angka. Objek Intl.PluralRules membantu Anda menentukan bentuk jamak yang benar untuk angka dan lokal tertentu.

Contoh:

const locale = 'ru-RU'; // Rusia (Russia)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (tunggal)
    case 'few': return 'товара'; // tovara (sedikit)
    case 'many': return 'товаров'; // tovarov (banyak)
    default: return 'товаров'; // Default ke banyak
  }
}

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

Contoh ini menunjukkan cara menggunakan Intl.PluralRules untuk mendapatkan bentuk jamak yang benar untuk kata "товар" (item) dalam bahasa Rusia. Bahasa Rusia memiliki bentuk jamak yang berbeda tergantung pada apakah angka berakhir dengan 1, 2-4, atau 5-9.

5. Format Daftar dengan Intl.ListFormat

Saat menyajikan daftar item, pemformatannya dapat bervariasi di setiap lokal. Objek Intl.ListFormat memungkinkan Anda memformat daftar sesuai dengan konvensi spesifik lokal, termasuk penggunaan konjungsi yang berbeda (mis., "dan", "atau") dan pemisah daftar (mis., koma, titik koma).

Contoh:

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

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

Contoh ini memformat daftar buah dalam bahasa Spanyol (Spain), menggunakan konjungsi "y" (dan) untuk menghubungkan dua item terakhir.

6. Format Waktu Relatif dengan Intl.RelativeTimeFormat

Menampilkan waktu relatif (mis., "kemarin", "dalam 2 jam") memberikan cara yang ramah pengguna untuk menyajikan informasi waktu. Objek Intl.RelativeTimeFormat memungkinkan Anda memformat waktu relatif sesuai dengan konvensi spesifik lokal.

Contoh:

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

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

Contoh ini memformat waktu relatif dalam bahasa Prancis (Kanada). Outputnya menunjukkan "hier" (kemarin) dan "dans 2 jours" (dalam 2 hari).

Opsi `numeric` mengontrol bagaimana angka ditampilkan. `'auto'` menampilkan kata-kata relatif jika tersedia (seperti "kemarin"), dan angka jika tidak. `'always'` akan selalu menampilkan angka.

7. Kolasi String dengan Intl.Collator

Perbandingan string bersifat sensitif terhadap lokal. Cara string diurutkan bervariasi tergantung pada bahasanya. Misalnya, dalam bahasa Jerman, karakter "ä" biasanya diurutkan seperti "a", sedangkan dalam bahasa Swedia, karakter itu diurutkan setelah "z". Objek `Intl.Collator` memungkinkan Anda membandingkan string sesuai dengan aturan lokal tertentu.

Contoh:

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

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

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

Contoh ini mengurutkan larik kata-kata Jerman menggunakan Intl.Collator. Perhatikan bahwa "äpfel" diurutkan sebelum "aprikosen", meskipun "ä" muncul setelahnya dalam urutan abjad.

8. Tangani Kasus Pengecualian dan Data yang Hilang

Tidak semua lokal didukung oleh setiap browser atau lingkungan. Penting untuk menangani kasus-kasus pengecualian di mana lokal tidak tersedia atau ketika data hilang. Pertimbangkan strategi berikut:

9. Uji Secara Menyeluruh dengan Lokal yang Berbeda

Pengujian yang menyeluruh sangat penting untuk memastikan bahwa aplikasi internasional Anda berfungsi dengan benar untuk semua lokal yang didukung. Uji aplikasi Anda dengan berbagai lokal, termasuk bahasa yang menggunakan set karakter, format tanggal dan waktu, format angka, dan aturan pluralisasi yang berbeda.

Pertimbangkan untuk menggunakan alat pengujian otomatis untuk memverifikasi bahwa aplikasi Anda berperilaku seperti yang diharapkan di berbagai lokal.

10. Pertimbangkan Implikasi Kinerja

Meskipun API Intl umumnya efisien, pembuatan objek Intl bisa relatif mahal. Untuk mengoptimalkan kinerja, pertimbangkan hal berikut:

Di Luar API Intl: Pertimbangan Lebih Lanjut untuk Internasionalisasi

Meskipun API Intl menyediakan alat yang kuat untuk pemformatan data, internasionalisasi melibatkan lebih dari sekadar pemformatan. Pertimbangkan aspek tambahan berikut:

Kesimpulan

API Intl JavaScript adalah alat yang sangat berharga untuk membangun aplikasi web yang melayani audiens global. Dengan mengikuti praktik terbaik yang diuraikan dalam artikel ini, Anda dapat membuat aplikasi yang tidak hanya fungsional tetapi juga peka budaya dan ramah pengguna bagi pengguna di seluruh dunia. Manfaatkan kekuatan API Intl dan buka potensi aplikasi Anda di panggung global. Menguasai API Intl akan menghasilkan pengalaman yang lebih inklusif dan dapat diakses untuk semua pengguna Anda, terlepas dari lokasi atau bahasa mereka.