ネイティブ國(guó)際 API の概要

JavaScript の Intl API は、さまざまな言語(yǔ)の日付、數(shù)値、テキストなどのデータのローカリゼーションと書式設(shè)定を処理するための強(qiáng)力なネイティブ ソリューションです。多くのサードパーティ ライブラリとは異なり、これらの API は以下を提供します:

• 高パフォーマンス: JavaScript エンジンに統(tǒng)合されています。

• バンドル サイズの縮小: 外部依存関係の必要がなくなります。

• グローバル サポート: 幅広い言語(yǔ)と地域のローカリゼーションが含まれます。

外部ライブラリとは異なり、ネイティブ API は開発者による更新やメンテナンスを必要としません。さらに、基盤となる JavaScript エンジン用に最適化されており、ローカリゼーションと書式設(shè)定に対する軽量かつ高速なアプローチを提供します。

この記事では、目的のローカライズに基づいて日付と時(shí)刻をフォーマットするための専用 API である Intl.DateTimeFormat に焦點(diǎn)を當(dāng)てます。この API が Moment.js、date-fns、Day.js などの一般的なライブラリを書式設(shè)定のニーズに置き換えて、最新のネイティブな代替手段を提供する方法を見ていきます。

---

Intl.DateTimeFormatの説明

Intl.DateTimeFormat は、日付と時(shí)刻のローカライズされた書式設(shè)定を可能にするクラスです。さまざまなローカリゼーションのサポート、カスタマイズ可能な形式、代替カレンダーやタイムゾーンの処理などの高度な機(jī)能を提供します。

---

フォーマッタの作成

フォーマッタは、日付書式設(shè)定の特定の構(gòu)成を保存する Intl.DateTimeFormat のインスタンスです。フォーマッタを使用すると、同じフォーマットを異なる日付に繰り返し適用できるため、コードがより効率的で読みやすくなります。

フォーマッタを作成するには、目的のパラメータを指定して Intl.DateTimeFormat コンストラクターを使用します。

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

• locale: ローカリゼーションを定義する文字列 (例: アメリカ英語(yǔ)の場(chǎng)合は「en-US」、イタリア語(yǔ)の場(chǎng)合は「it-IT」)。

• options: 日付コンポーネント (平日、月、年など) を指定するためのオプションのオブジェクト。

再利用のためにフォーマッタ インスタンスを変數(shù)に保存するのが一般的ですが、この手順は厳密には必須ではありません。以下に示すように、Intl.DateTimeFormat コンストラクターを直接呼び出して、日付をインラインで書式設(shè)定することができます。

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

ただし、フォーマッタ インスタンスの作成は、同じフォーマットを複數(shù)の日付に適用する必要がある場(chǎng)合に特に便利で、コードの一貫性が向上し、冗長(zhǎng)性が回避されます。

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

---

基本的な例: Intl.DateTimeFormat の概要

これらの基本的な例を使用して、Intl.DateTimeFormat のシンプルさと強(qiáng)力さを探ってください。アプリケーション全體で再利用できるデフォルトおよびカスタム形式のフォーマッタを作成する方法を示します。

1. デフォルトの書式設(shè)定

オプションが指定されない場(chǎng)合、フォーマッタは選択されたロケールのデフォルト形式を使用します。

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

2. カスタム書式設(shè)定

必要なオプションを指定して出力をカスタマイズします。

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"

---

高度な例: Intl.DateTimeFormat の可能性を最大限に引き出す

複數(shù)のローカリゼーション、代替カレンダー、タイムゾーンの処理などの高度なシナリオを使用して、日付と時(shí)刻の書式設(shè)定を次のレベルに引き上げます。これらの例は、複雑なアプリケーションにおける Intl.DateTimeFormat の多用途性と適応性を示しています。

1. さまざまなローカリゼーションの処理

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

2. 代替カレンダーを使用した書式設(shè)定

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. タイムゾーンの取り扱い

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 と Intl.DateTimeFormat

TypeScript で Intl.DateTimeFormat を使用すると、型の安全性が確保され、開発エクスペリエンスが向上します。 Intl.DateTimeFormat の TypeScript 定義は組み込まれており、そのメソッドとプロパティのオートコンプリートとドキュメントを提供します。

これが例です:

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

厳密な型付けは、不正なオプションやメソッド呼び出しなどの潛在的な問題をコンパイル時(shí)に検出することで、実行時(shí)エラーを回避するのに役立ちます。

---

人気のある図書館との比較

Intl.DateTimeFormat を検討する理由

• 軽量: ネイティブで外部ライブラリを必要としないため、バンドル サイズが削減されます。

• パフォーマンス: 多くの場(chǎng)合、ライブラリに基づくソリューションより高速です。

• 組み込みローカリゼーション: さまざまな言語(yǔ)とカレンダーをネイティブでサポートします。

例: 単純な書式設(shè)定

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"

date-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"

Day.js を使用

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

Intl.DateTimeFormat を使用する

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

外部ライブラリは糖衣構(gòu)文を提供する可能性がありますが、ネイティブ API は柔軟性や効率性を犠牲にすることなく同等の機(jī)能を提供します。ネイティブ API の構(gòu)文がわずかに長(zhǎng)いことは、保守性、パフォーマンス、シンプルさの利點(diǎn)と若干のトレードオフです。

---

結(jié)論

Intl.DateTimeFormat は、日付と時(shí)刻の書式設(shè)定のための堅(jiān)牢なネイティブ ソリューションを提供し、Moment.js、date-fns、Day.js などの一般的なライブラリの優(yōu)れた代替品となります。高いパフォーマンス、組み込みのローカリゼーション、簡(jiǎn)素化されたメンテナンスを備えたこのツールは、最新の JavaScript アプリケーションにとって貴重なツールです。

Intl.DateTimeFormat をさらに深く掘り下げて追加機(jī)能を探索するには、公式 MDN Web ドキュメントにアクセスしてください。そこでは、この強(qiáng)力な API を習(xí)得するのに役立つ包括的なドキュメントと実踐的な例が見つかります。

以上が日付と時(shí)刻の書式設(shè)定をネイティブにクラッシュする: Intl.DateTimeFormat の隠された力を解き放つの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。