Cara Menggunakan Intl API di JavaScript

Intl API menyederhanakan pemformatan dan manipulasi teks, angka, tanggal, dan mata uang internasional. Ini memungkinkan Anda menangani berbagai format data menurut lokal.

API ini mengatasi tantangan pemformatan data untuk berbagai budaya dan bahasa. Mempermudah pemformatan angka dengan simbol mata uang atau tanggal yang sesuai menggunakan format tanggal yang sesuai untuk wilayah tertentu.

Dengan menggunakan Intl API, Anda dapat membuat aplikasi web yang dapat diakses dan mudah digunakan untuk audiens lintas wilayah dan budaya.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

Mendapatkan Lokal Pengguna

Pembuat JavaScript yang disediakan oleh Intl API mengidentifikasi lokal yang akan mereka gunakan untuk memformat tanggal, teks, angka, dll., mengikuti pola yang sudah dikenal. Setiap konstruktor mengambil a lokal dan sebuah pilihan objek sebagai argumen. Dengan menggunakan argumen ini, konstruktor mencocokkan lokal yang diminta dengan lokal yang mereka dukung saat ini.

Untuk mendapatkan lokal pengguna, Anda dapat menggunakan navigator.language Properti. Properti ini mengembalikan string yang mewakili versi bahasa browser.

Nilai dari navigator.language properti adalah tag bahasa BCP 47, yang terdiri dari kode bahasa dan, secara opsional, kode wilayah dan subtag lainnya. Misalnya, “en-US” mewakili bahasa Inggris yang digunakan di Amerika Serikat.

Anda juga dapat menggunakan navigator.languages properti untuk mendapatkan larik bahasa pilihan pengguna, diurutkan berdasarkan prioritas. Item pertama dalam larik mewakili preferensi bahasa utama pengguna.

Setelah mendapatkan lokal pengguna, Anda dapat menyesuaikan tampilan tanggal, waktu, angka, dan mata uang aplikasi Anda menggunakan Internasional API.

Anda dapat membuat fungsi JavaScript sederhana untuk membantu Anda mendapatkan lokal pengguna. Berikut cuplikan kode yang dapat membantu:

 const getUserLocale = () => {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  }
  return navigator.language;
};
console.log(getUserLocale());
 

Ini getUserLocale function mengembalikan elemen pertama dari properti navigator.languages ​​jika tersedia. Jika tidak, ia kembali ke properti navigator.language, yang mewakili bahasa pilihan pengguna di browser lama.

Memformat Tanggal untuk Lokal Berbeda

Untuk memformat tanggal menggunakan Internasional API, Anda dapat menggunakan Intl.DateTimeFormat() konstruktor. Konstruktor ini membutuhkan dua argumen: string lokal dan objek opsi.

Objek opsi dapat berisi properti yang mengontrol pemformatan tanggal.

Beberapa opsi yang umum digunakan antara lain:

• hari kerja: Opsi ini menentukan format hari dalam seminggu. Anda juga dapat mengaturnya panjang (Jumat), pendek (Jumat), atau sempit (F).
• tahun: Opsi ini menentukan format tahun. Anda juga dapat mengaturnya numerik (2023) atau 2 digit (23).
• bulan: Opsi ini menentukan format bulan. Anda juga dapat mengaturnya numerik (3), 2 digit (03), panjang (Berbaris), pendek (Mar), atau sempit (M).
• hari: Opsi ini menentukan format hari. Anda juga dapat mengaturnya numerik (2) atau 2 digit (02).

Berikut adalah contoh yang menunjukkan cara memformat tanggal menggunakan Intl.DateTimeFormat() konstruktor:

 const date = Date.now()
const locale = getUserLocale();
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};
const formatter = new Intl.DateTimeFormat(locale, options);

console.log(formatter.format(date)); 

Kode ini menyiapkan objek pemformat dengan meneruskan lokal pengguna ke Intl.DateTimeFormat(), bersama dengan serangkaian opsi. Ini kemudian menggunakan pemformat untuk mengubah tanggal saat ini menjadi string. Itu pilihan objek berisi properti yang mengontrol pemformatan tanggal.

Memformat Berbagai Jenis Angka

Anda dapat menggunakan Internasional API untuk memformat angka menggunakan Intl.NumberFormat() konstruktor. Menyukai Intl.DateTimeFormat()konstruktor ini menggunakan string lokal dan objek opsi sebagai argumen.

Objek opsi berisi properti yang mengontrol pemformatan angka. Properti ini bervariasi tergantung pada yang ditentukan gaya dari nomor.

Memformat Desimal dan Persentase

Anda dapat memformat angka sebagai desimal dan persentase menggunakan Intl.NumberFormat() konstruktor dengan menyetel properti gaya ke desimal untuk desimal dan persen untuk persentase.

Berikut adalah contoh yang menunjukkan cara memformat desimal:

 const num = 123456;
const locale = getUserLocale(); 
const options = {
  style: "decimal",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); 
 

Blok kode di atas memformat 123.456 sebagai desimal dengan pemisah pengelompokan (,) dan dua tempat desimal.

Berikut adalah contoh yang menunjukkan cara memformat persentase:

 const num = 123456;
const locale = getUserLocale();
const options = {
  style: "percent",
  useGrouping: true,
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); 
 

Blok kode di atas menyatakan 123.456 sebagai persentase dengan pemisah pengelompokan.

Memformat Mata Uang

Anda dapat memformat angka sebagai mata uang dengan menyetel properti gaya ke mata uang. Anda harus mengatur opsi lain di sampingnya, seperti:

• mata uang: Sebuah string yang mewakili kode mata uang ISO 4217 (seperti “USD”, “EUR”, atau “JPY”) yang akan digunakan untuk pemformatan. Jika Anda tidak memberikan opsi ini, pemformat akan memilih kode mata uang berdasarkan lokal pengguna.
• currencyDisplay: Properti ini menentukan bagaimana browser harus menampilkan mata uang. Bisa jadi simbol (US$ 75), kode (USD 75), atau nama (75 dolar AS).

Berikut adalah contoh yang menunjukkan bagaimana Anda dapat memformat mata uang:

 const num = 123456;
const locale = getUserLocale(); 
const options = {
  style: "currency",
  currency: "USD",
  currencyDisplay: "code",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); 
 

Blok kode di atas memformat 123.456 sebagai mata uang (USD).

Unit Pemformatan

Anda dapat menggunakan Intl.NumberFormat() konstruktor untuk memformat angka dengan satuan, seperti panjang, volume, dan massa. Anda dapat melakukan ini dengan mengatur gaya ke satuan. Saat Anda menyetel gaya ke unit, Anda harus menentukan opsi berikut:

• satuan: Properti ini menentukan unit yang akan digunakan untuk pemformatan, seperti “meter”, “kilogram”, “liter”, “detik”, dan seterusnya.
• unitDisplay: Properti ini menentukan bagaimana browser harus menampilkan unit. Anda juga dapat mengaturnya panjang (10 liter), pendek (10 L), atau sempit (10l).

Berikut adalah contoh yang menunjukkan bagaimana Anda dapat memformat satuan:

 const num = 123456;
const locale = getUserLocale();
const options = {
  style: "unit",
  unit: "liter",
  unitDisplay: "long",
};
const formatter = new Intl.NumberFormat(locale, options);
console.log(formatter.format(num)); 
 

Blok kode di atas memformat angka 123.456 sebagai satuan dalam liter.

Alternatif untuk Intl API

Intl API menyediakan seperangkat alat yang kuat dan fleksibel untuk memformat tanggal, angka, mata uang, dan satuan dalam aplikasi JavaScript. Ini mendukung banyak lokal dan menyediakan cara yang konsisten untuk memformat data di berbagai budaya dan bahasa.

Anda mungkin ingin menggunakan perpustakaan alternatif, seperti Luxon atau Day.js, karena dukungan browser yang terbatas untuk Intl. Pada akhirnya, memutuskan antara Intl API atau alternatif bergantung pada persyaratan dan kendala khusus proyek Anda.