この記事では、JavaScript を使用して Date オブジェクトをさまざまな形式のさまざまな日付文字列にフォーマットするさまざまな方法について学びます。

JavaScript を使用して、Date オブジェクトをさまざまな形式のさまざまな日付文字列に書式設定する方法を見ていきます。 Web アプリケーションを構築する場合でも、データを操作する場合でも、単に日付を表​​示する場合でも、これらのテクニックをマスターすると、ニーズに最も適した形式で日付を表示できるようになります。 JavaScript の日付書式設定の多用途性を見てみましょう。

以下のリストには、JavaScript で日付をフォーマットするさまざまな方法が含まれています。

目次

マウスとマウスの種類

• 方法 1: toDateString() メソッドを使用する
• 方法 2: toISOString() メソッドを使用する
• 方法 3: toLocaleDateString() メソッドを使用する
• 方法 4: toLocaleString() メソッドを使用する
• 方法 5: Intl.DateTimeFormat() オブジェクト メソッドを使用する
• 方法 6: Date メソッドを使用して日付を手動で書式設定する

方法 1: toDateString() メソッドを使用する

の toDateString() メソッド 日付オブジェクトを人間が判読できる形式にフォーマットします。 日、月、日、年。

構文：

CSSの最初の子

dateObj.toDateString();>

例： 以下のコード例は、toDateString() メソッドを使用して日付をフォーマットする方法を説明しています。

const currentDate = new Date(); const formattedDate = currentDate.toDateString(); console.log(formattedDate);>

Fri Dec 29 2023>

方法 2: toISOString() メソッドを使用する

の toISOString() メソッド ISO 8601 フォーマットに従って、データを国際標準にフォーマットします。

構文：

dateObj.toISOString();>

例： 以下のコード例では、toISOString() メソッドを実装して日付オブジェクトをフォーマットします。

const currentDate = new Date(); const formattedDate = currentDate.toISOString(); console.log(formattedDate);>

2023-12-29T09:39:27.634Z>

方法 3: toLocaleDateString() メソッドを使用する

toLocaleDateString() メソッド 日付オブジェクトの日付部分を、システムによって取得されたものと同じ形式、または指定された形式にフォーマットします。

構文：

dateObj.toLocaleDateString();

例： 以下のコード例では、日付をシステムが取得した形式に変換します。

Javaオブジェクトからのjson

const currentDate = new Date(); const formattedLocalDate = currentDate.toLocaleDateString(); const formattedInSpecifiedFormat = currentDate.toLocaleDateString("hi-IN"); console.log(formattedLocalDate); console.log(formattedInSpecifiedFormat);>

12/29/2023 29/12/2023>

方法 4: toLocaleString() メソッドを使用する

toLocaleString() メソッド toLocaleDateString() と同様の方法で動作します。唯一の違いは、時刻もフォーマットされた文字列で返すことです。

構文：

ブール値を文字列に変換する

dateObj.toLocaleString();

例： 以下の例では、toLocaleString() メソッドを使用して日付をフォーマットします。

const currentDate = new Date(); const formattedLocalDate = currentDate.toLocaleString(); const formattedInSpecifiedFormat = currentDate.toLocaleString("hi-IN"); console.log(formattedLocalDate); console.log(formattedInSpecifiedFormat);>

12/29/2023, 9:39:27 AM 29/12/2023, 9:39:27 am>

方法 5: Intl.DateTimeFormat() オブジェクト メソッドを使用する

Intl.DateTimeFormat() オブジェクト メソッド は、日付オブジェクトをフォーマットするための強力なオブジェクト メソッドです。日付と時刻をフォーマットするための指定されたオプションを使用して、日付を指定されたフォーマットにフォーマットします。

構文：

const formatObj = new Intl.DateTimeFormat('en-US'); formatObj.format(dateObj);>

例： 次の例では、 intl.DateTimeFormat() オブジェクト メソッドを使用して日付オブジェクトをフォーマットします。

const currentDate = new Date(); const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {dateStyle: 'long'}); const formattedDate = dateTimeFormatter.format(currentDate); console.log(formattedDate);>

December 29, 2023>

方法 6: Date メソッドを使用して日付を手動で書式設定する

このアプローチでは、さまざまな日付メソッドを使用して日付オブジェクトの日、日、月、年を取得し、それらを連結して書式設定された日付文字列を形成します。

例： 以下のコード例では、さまざまな日付メソッドを使用して日付を取得し、フォーマットします。

const weekDays =  ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const monthsArr =  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const currentDateObj = new Date(); const currentDay = weekDays[currentDateObj.getDay()]; const currentDate = currentDateObj.getDate(); const currentMonth = monthsArr[currentDateObj.getMonth()]; const currentYear = currentDateObj.getFullYear(); console.log(`${currentDay} ${currentDate} ${currentMonth}, ${currentYear}`);>

Fri 29 Dec, 2023>