JavaScript で文字列を日付に変換する
-
JavaScript で
new Date()関数を使用して文字列を日付に変換する -
JavaScript で
Date.parse()関数を使用して文字列を日付に変換する - JavaScript での文字列の分割と日付への変換
- まとめ
文字列を日付形式に変換する必要がある場合があります。文字列は、データベースに文字列として格納されている日付値、または API から返された値の場合があります。いずれの場合も、この文字列値を日付ピッカーまたは入力タイプ date で直接使用することはできません。したがって、HTML UI に表示するには、文字列を日付オブジェクトに変換する必要があります。文字列形式であるため、日付固有の操作を実行することはできません。したがって、文字列を日付オブジェクトに変換する必要があります。ここでは、文字列を日付に変換するいくつかの方法をリストします。
new Date()Date.parse()- 文字列を分割して日付に変換する
JavaScript で new Date() 関数を使用して文字列を日付に変換する
文字列を日付に変換するために最も一般的に使用される方法は、new Date() 関数を使用することです。new Date() は、以下で説明するさまざまな形式の引数を取りますが、日付オブジェクトを返します。
- 引数としてパラメータはありません。
new Date()は、new Date()関数にパラメータが渡されない場合、ローカルシステム時刻のタイムゾーン情報を含む現在のシステム日付と時刻を返します。 - 引数として date オブジェクトを渡します。
new Date()は、引数として渡された日付文字列で示される日付オブジェクトを返します。 - 文字列の日付を渡します。
new Date('2018-12-3')関数の最も興味深い部分は、引数として文字列形式で渡された日付を日付形式に変換できることです。これについて詳しく説明します。
引数に文字列形式の日付を渡す
文字列形式の日付を new Date() に渡すと、日付オブジェクトに変換されます。文字列形式が機能するには、ISO8601 形式の YYYY-MM-DD である必要があります。他の日付形式は、このメソッドでは日付オブジェクトに変換できない場合があります。たとえば、次のようにコードを参照してください。
new Date('2021-05-23');
new Date('2020/2/29');
new Date('2020-14-03');
new Date('14-02-2021');
出力：
Sun May 23 2021 05:30:00 GMT+0530 (India Standard Time)
Sat Feb 29 2020 00:00:00 GMT+0530 (India Standard Time)
Invalid Date
Invalid Date
上記の例からわかるように、日付に使用できる文字列形式は、2021-05-23 と 2020/2/29 のみです。new Date() 関数は、YYYY-MM-DD または YYYY-MM-DD の形式の文字列を処理できます。ISO 8601 標準に準拠していない別の文字列形式がある場合、new Date() は日付を解析できず、Invalid date として返されます。
備考
new Date()は、ISO 8601 形式YYYY-MM-DD hh:mm:ssに該当する場合にのみ、文字列を日付に変換するために使用できます。new Date()で理解できない別の形式の場合は、この記事の後半で紹介するように、文字列を分割して引数としてnew Date()に渡すことをお勧めします。new Date()は、01 Mar 2020 12:30またはMM DD YYYY HH:mmの形式の文字列を変換することもできます。バックエンドから API を介して渡された値を変換に使用している場合は、渡された形式がnew Date()関数で理解されていることを確認する必要があります。new Date()有効な日付オブジェクトを返します。そうしないと、コードが破損する可能性があります。
JavaScript で Date.parse() 関数を使用して文字列を日付に変換する
Date.parse() は、文字列の日付を変換するための代替オプションです。日付オブジェクトの代わりに数値を返します。したがって、日付オブジェクトが必要な場合は、さらに処理が必要になります。解析された日付を、1970 年 1 月 1 日の深夜 0 時から経過したミリ秒を表す数値に変換します。これはタイムスタンプ形式に似ていますが、秒の代わりに Date.parse() がミリ秒の値を返す点が異なります。
Date.parse('2020-11-21')
Date.parse('2019-01-01T12:30:00.000Z')
Date.parse('20-11-2021')
Date.parse('11-20-2021')
出力：
1605916800000
1546345800000
NaN
1637346600000
受け入れることができる入力値のタイプに関しては、Date.parse() は new Date() と同じですが、日付が有効な形式であるかどうかをより適切にチェックできることに注意してください。このような方法は、特に API 応答値を処理する場合に役立ちます。このような場合、バックエンドによって返される値が、Date.parse() または new Date() 関数で受け入れられる日付形式に準拠していることを確認するためにチェックを実行する必要がある場合があります。isNaN() チェックだけで、日付変換メソッドを識別して安全に実行できます。
let stringsFromAPI = ['2020-11-21', '20-11-2021'];
stringsFromAPI.forEach((d) => {
if (!isNaN(Date.parse(d))) {
console.log(new Date(d));
}
})
出力：
Sat Nov 21 2020 05:30:00 GMT+0530 (India Standard Time)
ここで、日付 20-11-2021 は DD-MM-YYYY の形式であることに注意してください。したがって、Date.parse() 関数でも new Date() 関数でも理解されません。したがって、stringsFromAPI がバックエンドからの値である場合、上記の関数は、受け入れ可能な形式に準拠する日付のみを変換します。!isNaN(Date.parse(d)) は、不適切な日付値を黙って拒否し、変換に成功した値をログに記録します。
備考
Date.parse()は、戻りタイプを除いてnew Date()に似ています。これにより、日付値が正しい形式であるかどうかを確認でき、を使用して日付を割り当てることもできます。dateObj.setTime(Date.parse(DateString))。- Unix タイムスタンプと比較して、
Date.parse()は、new Date()で実際の日付オブジェクトに変換しなくても、日付の正確な比較に使用できるミリ秒を返します。 Date.parse()は内部的にnew Date()を使用して日付を解析するため、new Date()関数で受け入れられる形式はDate.parse()関数でもサポートされます。
JavaScript での文字列の分割と日付への変換
Date.parse() 関数と new Date() 関数はどちらも、ISO8601 拡張日付形式に基づいて設計されています。場合によっては、日付が期待される形式に準拠していない場合は、日付文字列を分割し、値を抽出して、それらを日付オブジェクトに変換することにより、手動で計算する必要があります。驚いたことに、new Date() は引数として渡される日付パラメータもサポートしており、出力として日付オブジェクトを取得します。
引数から日付を作成するための構文：
new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)
ここでは、
yearValue：ISO 8061 YYYY 形式に準拠する必要があります。たとえば、2021 です。YY形式で値を指定すると、誤って解釈されます。たとえば、2021に 21 とだけ言及すると、2021 ではなく 1921 と見なされます。IndexOfMonth：インデックス 0 から始まります。したがって、Month 値から 1 を引きます。たとえば、3 月の場合、値は 3 ですが、monthIndexは 2 になります（つまり、3-1 = 2）。月のインデックスは通常、0-11の範囲にある必要がありますdayValue：月の日を示します。1 か月の日数に応じて、1〜31 の範囲に収まる必要があります。例：21-05-2021 の場合、日の値は 21 です。hours：1 日の時間。たとえば 10 時。minutes：1 時間を過ぎた分。seconds：1 分を過ぎた秒の値を保持します。
以下は、カスタムの日付形式（DD-MM-YYYYTHH:mm:SS）を持つ文字列を受け取り、日付オブジェクトを返す関数です。
function convertFromStringToDate(responseDate) {
let dateComponents = responseDate.split('T');
let datePieces = dateComponents[0].split('-');
let timePieces = dateComponents[1].split(':');
return (new Date(
datePieces[2], (datePieces[1] - 1), datePieces[0], timePieces[0],
timePieces[1], timePieces[2]))
}
convertFromStringToDate('21-03-2020T11:20:30')
出力：
Sat Mar 21 2020 11:20:30 GMT+0530 (India Standard Time)
まとめ
最も一般的に使用される new Date() 関数は、文字列が ISO 8601 形式に準拠している場合、文字列の日付を日付オブジェクトに変換するのに非常に便利です。new Date() と比較すると、Date.parse() 関数は、文字列引数として渡される日付まで経過した 1970 年 1 月 1 日からのミリ秒を含む数値を返すという点で異なります。日付文字列を分割し、日付コンポーネントを引数として new Date() 関数に渡すことにより、別の日付形式を変換できます。