2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript で月の名前を取得する

JavaScript で月の名前を取得する

作成時間: October-18, 2021 | 更新時間: November-20, 2021

  1. JavaScript で toLocaleString 関数を使用する
  2. JavaScript で Intl.DateTimeFormat オブジェクトを使用する
  3. カスタムコードを使用して JavaScript で特定の日付から月の名前を取得する

JavaScript には、日付オブジェクトの getMonth() メソッドがあります。0から始まる月のインデックスを返します。ただし、実際のシナリオのほとんどのアプリケーションでは、エンドユーザーが読みやすくするために、今月はアルファベット順である必要があります。特定の月のインデックスの月の名前を表すコードを作成するのは難しい場合があります。JavaScript で月の名前を取得するいくつかの方法を見てみましょう。

JavaScript で toLocaleString 関数を使用する

javascript の toLocaleString 関数を使用して、日付オブジェクトから月の名前を取得できます。toLocaleString 関数でサポートされている特定の言語で月の名前を返すオプションを提供します。

toLocaleString 関数の構文

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

パラメーター：

この関数は通常、日付文字列を取得するためにパラメータなしで使用されます。toLocaleString は 2つのオプションのパラメーターを受け入れます。最初のパラメーターは言語キー（たとえば、英語の場合は en-US、アラビア語の場合は ar-EG など）で、2つ目は options として渡される設定のセットです。options はオブジェクトです。

戻り値

toLocaleString は、日付を表す文字列値を MM/DD/YYYY, hh:mm:ss a の形式で返します。a は AM / PM のことです。

この関数を使用して、月の名前の長い形式と短い形式の両方を取得できます。長いものは完全な月の名前を表示しますが、短いものは出力の月の名前の最初の 3文字のみをリストします。使い方は以下の通りです。

const dateObj = new Date("1-1-2021");
const dateString = dateObj.toLocaleString();
const enDateString = dateObj.toLocaleString("en-US");
const monthNameLong = dateObj.toLocaleString("en-US", { month: "long" });
const monthNameShort = dateObj.toLocaleString("en-US", { month: "short" });
console.log(dateString);
console.log(enDateString);
console.log(monthNameLong);
console.log(monthNameShort);

出力：

1/1/2021, 12:00:00 AM
1/1/2021, 12:00:00 AM
January
Jan

option として渡された{ month: 'long' }を使用して、より長い月の名前を取得します。月の名前を短くするには、{ month: 'short' }のように、月の構成を short に設定する必要があります。

ノート

  • toLocaleString は、Internet Explorer ブラウザを含むすべてのブラウザでサポートされています。
  • 出力された日付文字列を変数に文字列として格納された日付と比較すると、ブラウザ間で一貫した結果が得られない場合があります。たとえば、次のコードは、Firefox と Internet Explorer、および古いバージョンの MSEdge ブラウザーでは異なる方法で実行される可能性があります。
("1/5/2021, 6:00:00 PM" === new Date("2021-01-05T12:30:00Z").toLocaleString("en-US") ) ? true : false;

Chrome での出力：

true

Internet Explorer での出力：

false

これは、Internet Explorer および古いバージョンの Edge が、日付文字列の開始と終了に制御文字を挿入するために発生します。Chrome と Internet Explorer で new Date("2021-01-05T12:30:00Z").toLocaleString("en-US") によって出力される文字列の長さを確認して、違いを確認できます。IE では長さが 32と表示されますが、chrome では 20と表示されます。また、IE コンソールの 0番目の文字は""と表示されますが、chrome では"1"と表示されます。

JavaScript で Intl.DateTimeFormat オブジェクトを使用する

Intl.DateTimeFormat は DateTimeFormat オブジェクトを返します。目標日を入力として受け取り、設定したオプションに基づいてフォーマットするフォーマット関数があります。これは toLocaleString 関数に似ています。違いは、 toLocaleString がデータ型を日付として持つオブジェクトに適用されることです。一方、 Intl.DateTimeFormat では、日付を引数として format 関数に渡します。パラメータ名は、さまざまな日付形式のシナリオで異なります（詳細については、MDN ドキュメントを参照してください）。Intl.DateTimeFormat はすべてのブラウザでサポートされています。次のコードに示すように、 Intl.DateTimeFormat を使用して、月の長い名前と短い名前を取得できます。

new Intl.DateTimeFormat('en-US', {month: "short"}).format(new Date("1-1-2021"))
new Intl.DateTimeFormat('en-US', {month: "long"}).format(new Date("1-1-2021"))

出力：

Jan
January

ノート

  • Intl.DateTimeFormat コンストラクターは、日付をフォーマットするために作成されます。Intl.DateTimeFormat は、date オブジェクトのフォーマットに関してはるかに柔軟性があります。これを使用して、ローカル言語の日付文字列を取得できます。options オブジェクトでフォールバック言語を提供するためのオプションもサポートしています。
  • 古いバージョンの Internet Explorer を含むすべての Web ブラウザでサポートされています。

カスタムコードを使用して JavaScript で特定の日付から月の名前を取得する

上記の 2つの組み込み JavaScript メソッドを使用したくない場合は、カスタムコードを記述して、対応する日付の月名を取得できます。コードはさまざまな方法で記述できます。2つの配列を使用できます。1つは長い月の名前を保持し、もう 1つは短い月の名前を保持します。ただし、以下は、月名の単一配列を使用してフルネームとショートネームを返す簡潔で効率的なコードです。次のコードを見てみましょう。

const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

getLongMonthName = function(date) {
    return monthNames[date.getMonth()];
}

getShortMonthName = function(date) {
    return monthNames[date.getMonth()].substring(0, 3);
}

console.log( getLongMonthName(new Date("1-1-2021")) );
console.log( getShortMonthName(new Date("1-1-2021")) );
console.log( getLongMonthName(new Date("11-5-2021")) );
console.log( getShortMonthName(new Date("11-5-2021")) );
console.log( getLongMonthName(new Date("12-8-2021")) );
console.log( getShortMonthName(new Date("12-8-2021")) );

出力：

January
Jan
November
Nov
December
Dec

上記のコードスニペットでは、2つの関数を使用しています。1つはフルネームを取得するためのもので、もう 1つは短いものを取得するためのものです。

  • 日付オブジェクトをパラメーターとして受け取り、それに対応する完全な月の名前を返す getLongMonthName() 関数をコーディングします。JavaScript の組み込み関数 getMonth() を使用します。日付オブジェクトの getMonth() 関数は、月のインデックスを返します。このインデックスを使用して、月のフルネームを保持する monthNames 配列から月の名前を取得します。
  • 月の名前を短くするための追加の手順がある getShortMonthName 関数があります。getLongMonthName と同じロジックを使用します。javascript の substring() 関数を使用して、最終結果を 3文字に切り捨てます。したがって、渡された日付の短い月の名前をパラメーターとして取得します。
  • コードのローカリゼーションと国際化を可能にするために、複数の言語をサポートするように monthNames 配列を変更する必要がある場合があります。さまざまな言語の月名を格納するために、さまざまな文字列配列を使用できます。また、短い月の名前が最初の 3文字だけであるとは限りません。各言語には、短い月の名前の表現があります。したがって、このような言語には 2つの配列を使用する必要がある場合があります。1つは長い月の名前を含み、もう 1つは短い月の名前を含みます。getLongMonthName()のロジックを使用して、パラメーターとして渡された日付値に対応する月の名前を取得できます。

関連記事 - JavaScript DateTime

  • JavaScript で年の週番号を取得する
  • JavaScript で日付を検証する