日付と時刻の書式設定をネイティブにクラッシュする: Intl.DateTimeFormat の隠された力を解き放つ-jsチュートリアル-php.cn

Crush Date and Time Formatting Natively: Unleash the Hidden Power of Intl.DateTimeFormat

ネイティブ国際 API の概要

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

高パフォーマンス: JavaScript エンジンに統合されています。
バンドルサイズの縮小: 外部依存関係の必要がなくなります。
グローバルサポート: 幅広い言語と地域のローカリゼーションが含まれます。

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

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

Intl.DateTimeFormatの説明

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

フォーマッタの作成

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

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

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

ログイン後にコピー

locale: ローカリゼーションを定義する文字列 (例: アメリカ英語の場合は「en-US」、イタリア語の場合は「it-IT」)。
options: 日付コンポーネント (平日、月、年など) を指定するためのオプションのオブジェクト。

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

1. デフォルトの書式設定

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

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

ログイン後にコピー

2. カスタム書式設定

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

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 の可能性を最大限に引き出す

複数のローカリゼーション、代替カレンダー、タイムゾーンの処理などの高度なシナリオを使用して、日付と時刻の書式設定を次のレベルに引き上げます。これらの例は、複雑なアプリケーションにおける 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. 代替カレンダーを使用した書式設定

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

ログイン後にコピー

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

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

Intl.DateTimeFormat を検討する理由

軽量: ネイティブで外部ライブラリを必要としないため、バンドルサイズが削減されます。
パフォーマンス: 多くの場合、ライブラリに基づくソリューションより高速です。
組み込みローカリゼーション: さまざまな言語とカレンダーをネイティブでサポートします。

例: 単純な書式設定

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'));

ログイン後にコピー

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

結論

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

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

以上が日付と時刻の書式設定をネイティブにクラッシュする: Intl.DateTimeFormat の隠された力を解き放つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。