Hancurkan Pemformatan Tarikh dan Masa Secara Asli: Lepaskan Kuasa Tersembunyi Intl.DateTimeFormat

Pengenalan kepada API Antarabangsa Asli

API Antarabangsa dalam JavaScript ialah penyelesaian yang berkuasa dan asli untuk mengendalikan penyetempatan dan pemformatan data seperti tarikh, nombor dan teks dalam pelbagai bahasa. Tidak seperti kebanyakan perpustakaan pihak ketiga, API ini menawarkan:

• Prestasi tinggi: Disepadukan ke dalam enjin JavaScript.

• Saiz berkas yang lebih kecil: Menghilangkan keperluan untuk kebergantungan luaran.

• Sokongan global: Termasuk penyetempatan untuk pelbagai bahasa dan wilayah.

Tidak seperti perpustakaan luaran, API asli tidak memerlukan kemas kini atau penyelenggaraan oleh pembangun. Selain itu, ia dioptimumkan untuk enjin JavaScript asas, memberikan pendekatan yang lebih ringan dan lebih pantas untuk penyetempatan dan pemformatan.

Dalam artikel ini, kami akan menumpukan pada Intl.DateTimeFormat, API khusus untuk memformat tarikh dan masa berdasarkan penyetempatan yang dikehendaki. Kita akan melihat bagaimana API ini boleh menggantikan perpustakaan popular seperti Moment.js, date-fns atau Day.js untuk keperluan pemformatan, menawarkan alternatif moden dan asli.

---

Perihalan Intl.DateTimeFormat

Intl.DateTimeFormat ialah kelas yang membenarkan pemformatan setempat tarikh dan masa. Ia menyediakan ciri lanjutan seperti sokongan untuk penyetempatan yang berbeza, format yang boleh disesuaikan dan pengendalian kalendar alternatif dan zon waktu.

---

Mencipta Pemformat

Pemformat ialah contoh Intl.DateTimeFormat yang menyimpan konfigurasi khusus untuk pemformatan tarikh. Dengan menggunakan pemformat, anda boleh menggunakan format yang sama berulang kali pada tarikh yang berbeza, menjadikan kod anda lebih cekap dan boleh dibaca.

Untuk mencipta pemformat, gunakan pembina Intl.DateTimeFormat dengan parameter yang dikehendaki:

const formatter = new Intl.DateTimeFormat(locale, options);

• locale: Rentetan yang mentakrifkan penyetempatan (cth., "en-US" untuk Bahasa Inggeris Amerika, "it-IT" untuk Itali).

• pilihan: Objek pilihan untuk menentukan komponen tarikh (cth., hari bekerja, bulan, tahun, dll.).

Walaupun adalah perkara biasa untuk menyimpan contoh pemformat dalam pembolehubah untuk digunakan semula, langkah ini tidak diperlukan sepenuhnya. Pembina Intl.DateTimeFormat boleh digunakan terus untuk memformat tarikh sebaris, seperti yang ditunjukkan di bawah:

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

Walau bagaimanapun, mencipta contoh pemformat menjadi amat berguna apabila format yang sama perlu digunakan pada berbilang tarikh, meningkatkan ketekalan kod dan mengelakkan lebihan:

const formatter = new Intl.DateTimeFormat(locale, options);

---

Contoh Asas: Bermula dengan Intl.DateTimeFormat

Terokai kesederhanaan dan kuasa Intl.DateTimeFormat dengan contoh asas ini. Kami akan menunjukkan cara membuat pemformat untuk format lalai dan tersuai yang boleh digunakan semula merentas aplikasi anda.

1. Pemformatan Lalai

Jika tiada pilihan disediakan, pemformat menggunakan format lalai tempat yang dipilih.

console.log(new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(2024, 11, 19)));
// Output: "December 19, 2024"

2. Pemformatan Tersuai

Sesuaikan output dengan menyatakan pilihan yang diingini.

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

console.log(formatter.format(new Date(2024, 11, 19))); // Output: "December 19, 2024"
console.log(formatter.format(new Date(2023, 5, 15))); // Output: "June 15, 2023"

---

Contoh Lanjutan: Membuka Potensi Penuh Intl.DateTimeFormat

Ambil pemformatan tarikh dan masa anda ke peringkat seterusnya dengan senario lanjutan, seperti mengendalikan berbilang penyetempatan, kalendar alternatif dan zon waktu. Contoh ini mempamerkan kepelbagaian dan kebolehsuaian Intl.DateTimeFormat dalam aplikasi yang kompleks.

1. Mengendalikan Penyetempatan Berbeza

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US');
console.log(formatter.format(date)); // Output: "12/19/2024"

2. Memformat dengan Kalendar Alternatif

const date = new Date(2024, 11, 19);
const formatter = new Intl.DateTimeFormat('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(formatter.format(date)); // Output: "Thursday, December 19, 2024"

3. Mengendalikan Zon Masa

const date = new Date(2024, 11, 19);
const italianFormatter = new Intl.DateTimeFormat('it-IT', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
console.log(italianFormatter.format(date)); // Output: "giovedì 19 dicembre 2024"

---

TypeScript dan Intl.DateTimeFormat

Menggunakan Intl.DateTimeFormat dengan TypeScript memastikan keselamatan jenis dan pengalaman pembangunan yang lebih baik. Takrif TypeScript untuk Intl.DateTimeFormat terbina dalam, menyediakan autolengkap dan dokumentasi untuk kaedah dan sifatnya.

Ini contohnya:

const islamicFormatter = new Intl.DateTimeFormat('ar-SA-u-ca-islamic');
console.log(islamicFormatter.format(new Date(2024, 11, 19))); // Output: Date in the Islamic calendar

Penaipan yang ketat membantu mengelakkan ralat masa jalan dengan menangkap isu yang berpotensi pada masa penyusunan, seperti pilihan yang salah atau panggilan kaedah.

---

Perbandingan dengan Perpustakaan Popular

Mengapa Pertimbangkan Intl.DateTimeFormat?

• Ringan: Ia asli dan tidak memerlukan perpustakaan luaran, mengurangkan saiz berkas.

• Prestasi: Selalunya lebih pantas daripada penyelesaian berdasarkan perpustakaan.

• Penyetempatan Terbina dalam: Secara asli menyokong pelbagai bahasa dan kalendar.

Contoh: Pemformatan Mudah

Dengan Moment.js

const date = new Date(Date.UTC(2024, 11, 19, 15, 30)); // Ensure the date is set in UTC

// Formatter for UTC
const utcFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'UTC',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(utcFormatter.format(date)); 
// Output: "Dec 19, 2024, 03:30 PM UTC"

// Formatter for Tokyo time zone
const tokyoFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'Asia/Tokyo',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(tokyoFormatter.format(date)); 
// Output: "2024/12/20 00:30 JST"

// Formatter for Berlin time zone
const berlinFormatter = new Intl.DateTimeFormat('de-DE', {
  timeZone: 'Europe/Berlin',
  year: 'numeric',
  month: 'short',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  timeZoneName: 'short',
});
console.log(berlinFormatter.format(date)); 
// Output: "19. Dez. 2024, 16:30 MEZ"

Dengan tarikh-fns

const formatter: Intl.DateTimeFormat = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

const formattedDate: string = formatter.format(new Date(2024, 11, 19));
console.log(formattedDate); // Output: "December 19, 2024"

Dengan Day.js

const moment = require('moment');
console.log(moment("2024-12-19").format('dddd, MMMM Do YYYY'));

Dengan Intl.DateTimeFormat

const { format } = require('date-fns');
console.log(format(new Date(2024, 11, 19), 'EEEE, MMMM do yyyy'));

Walaupun perpustakaan luaran mungkin menawarkan gula sintaksis, API asli menyediakan kefungsian yang setara tanpa mengorbankan fleksibiliti atau kecekapan. Sintaks API asli yang lebih panjang sedikit ialah pertukaran kecil untuk faedahnya dalam kebolehselenggaraan, prestasi dan kesederhanaan.

---

Kesimpulan

Intl.DateTimeFormat menyediakan penyelesaian asli yang mantap untuk pemformatan tarikh dan masa, menjadikannya alternatif terbaik kepada perpustakaan popular seperti Moment.js, date-fns dan Day.js. Dengan prestasi tinggi, penyetempatan terbina dalam dan penyelenggaraan yang dipermudahkan, ia merupakan alat yang berharga untuk aplikasi JavaScript moden.

Untuk menyelam lebih dalam ke Intl.DateTimeFormat dan meneroka ciri tambahan, lawati Dokumen Web MDN rasmi. Di sana, anda akan menemui dokumentasi komprehensif dan contoh praktikal untuk membantu anda menguasai API yang berkuasa ini.

Atas ialah kandungan terperinci Hancurkan Pemformatan Tarikh dan Masa Secara Asli: Lepaskan Kuasa Tersembunyi Intl.DateTimeFormat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!