JavaScriptで日付と時刻を理解する
序章
日付と時刻は私たちの日常生活の一部であるため、コンピュータープログラミングで際立って機能します。 JavaScriptでは、予定表、列車の時刻表、または予定を設定するためのインターフェイスを備えたWebサイトを作成する必要がある場合があります。 これらのアプリケーションは、ユーザーの現在のタイムゾーンに基づいて関連する時刻を表示するか、到着時刻と出発時刻、または開始時刻と終了時刻の前後で計算を実行する必要があります。 さらに、JavaScriptを使用して、毎日特定の時間にレポートを生成したり、現在開いているレストランや施設をフィルタリングしたりする必要がある場合があります。
これらすべての目的などを達成するために、JavaScriptには組み込みの機能が付属しています Date
オブジェクトおよび関連するメソッド。 このチュートリアルでは、JavaScriptで日付と時刻をフォーマットして使用する方法について説明します。
日付オブジェクト
The Date
object は、日付と時刻を格納するJavaScriptの組み込みオブジェクトです。 これは、そのデータをフォーマットおよび管理するための多数の組み込みメソッドを提供します。
デフォルトでは、新しい Date
引数が指定されていないインスタンスは、現在の日付と時刻に対応するオブジェクトを作成します。 これは、現在のコンピューターのシステム設定に従って作成されます。
JavaScriptをデモンストレーションする Date
、変数を作成し、それに現在の日付を割り当てましょう。 この記事は10月18日水曜日にロンドン(GMT)で執筆されているため、現在の日付、時刻、およびタイムゾーンを以下に示します。
// Set variable to current date and time
const now = new Date();
// View the output
now;
OutputWed Oct 18 2017 12:41:34 GMT+0000 (UTC)
出力を見ると、次の日付文字列があります。
曜日 | 月 | 日 | 年 | 時間 | 分 | 2番 | タイムゾーン |
---|---|---|---|---|---|---|---|
結婚した | 10月 | 18 | 2017 | 12 | 41 | 34 | GMT + 0000(UTC) |
日付と時刻は、人間として理解できるように分割されて印刷されています。
ただし、JavaScriptは、 Unixtimeから派生したtimestampに基づいて日付を理解します。これは、1970年1月1日の午前0時から経過したミリ秒数で構成される値です。 タイムスタンプを取得できます getTime()
方法。
// Get the current timestamp
now.getTime();
Output1508330494000
現在のタイムスタンプの出力に表示される大きな数値は、2017年10月18日の上記と同じ値を表しています。
Epoch time は、ゼロ時間とも呼ばれ、日付文字列で表されます。 01 January, 1970 00:00:00 Universal Time (UTC)
、およびによって 0
タイムスタンプ。 新しい変数を作成し、それに新しい変数を割り当てることで、ブラウザでこれをテストできます Date
のタイムスタンプに基づくインスタンス 0
.
// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);
epochTime;
Output01 January, 1970 00:00:00 Universal Time (UTC)
エポックタイムは、プログラミングの初期の頃にコンピューターが時間を測定するための標準として選択されたものであり、JavaScriptが使用する方法です。 アプリケーションの設定と目的によっては両方が使用される可能性があるため、タイムスタンプと日付文字列の両方の概念を理解することが重要です。
これまで、新しいものを作成する方法を学びました Date
現在の時刻に基づくインスタンス、およびタイムスタンプに基づいてインスタンスを作成する方法。 全部で4つのフォーマットがあり、それによって新しいものを作成することができます Date
JavaScriptで。 現在の時刻のデフォルトとタイムスタンプに加えて、日付文字列を使用したり、特定の日付と時刻を指定したりすることもできます。
日付の作成 | 出力 |
---|---|
new Date() |
現在の日時 |
new Date(timestamp) |
エポック時間からのミリ秒に基づいて日付を作成します |
new Date(date string) |
日付文字列に基づいて日付を作成します |
new Date(year, month, day, hours, minutes, seconds, milliseconds) |
指定された日時に基づいて日付を作成します |
特定の日付を参照するさまざまな方法を示すために、新しい日付を作成します Date
1776年7月4日午後12時30分GMTを3つの異なる方法で表すオブジェクト。
// Timestamp method
new Date(-6106015800000);
// Date string method
new Date("July 4 1776 12:30");
// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);
上記の3つの例はすべて、同じ情報を含む日付を作成します。
タイムスタンプメソッドの数値が負であることに気付くでしょう。 エポック時間より前の日付は、負の数として表されます。
日付と時刻の方法では、秒とミリ秒は次のように設定されます。 0
. 番号が欠落している場合 Date
作成、デフォルトで 0
. ただし、順番は変更できませんので、番号を省略した場合はご注意ください。 また、7月が次のように表されていることに気付くかもしれません。 6
、通常ではありません 7
. これは、日付と時刻の数字がから始まるためです 0
、プログラミングでのほとんどのカウントがそうであるように。 より詳細なチャートについては、次のセクションを参照してください。
で日付を取得する get
日付を取得すると、さまざまな組み込みメソッドを使用して、日付のすべてのコンポーネントにアクセスできます。 メソッドは、ローカルタイムゾーンを基準にした日付の各部分を返します。 これらの各メソッドは、 get
、および相対数を返します。 以下は、の詳細な表です。 get
の方法 Date
物体。
日付時刻 | 方法 | 範囲 | 例 |
---|---|---|---|
年 | getFullYear() |
YYYY | 1970 |
月 | getMonth() |
0-11 | 0=1月 |
日(月の) | getDate() |
1-31 | 1=月の1日 |
曜日) | getDay() |
0-6 | 0=日曜日 |
時間 | getHours() |
0-23 | 0=真夜中 |
分 | getMinutes() |
0-59 | |
2番 | getSeconds() |
0-59 | |
ミリ秒 | getMilliseconds() |
0-999 | |
タイムスタンプ | getTime() |
エポック時間からのミリ秒 |
1980年7月31日に基づいて新しい日付を作成し、それを変数に割り当てましょう。
// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);
これで、すべてのメソッドを使用して、年からミリ秒までの各日付コンポーネントを取得できます。
birthday.getFullYear(); // 1980
birthday.getMonth(); // 6
birthday.getDate(); // 31
birthday.getDay(); // 4
birthday.getHours(); // 0
birthday.getMinutes(); // 0
birthday.getSeconds(); // 0
birthday.getMilliseconds(); // 0
birthday.getTime(); // 333849600000 (for GMT)
日付の一部のみを抽出する必要がある場合があり、組み込み get
メソッドは、これを実現するために使用するツールです。
この例として、現在の日付を10月3日の日と月に対してテストして、10月3日であるかどうかを確認できます。
// Get today's date
const today = new Date();
// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("It's October 3rd.");
} else {
console.log("It's not October 3rd.");
}
OutputIt's not October 3rd.
これを書いている時点では10月3日ではないので、コンソールはそれを反映しています。
ビルトイン Date
で始まるメソッド get
インスタンス化されたオブジェクトから取得しているものに関連付けられている番号を返す日付コンポーネントにアクセスできるようにします。
で日付を変更する set
すべてのために get
上記で学んだ方法には、対応するものがあります set
方法。 どこ get
日付から特定のコンポーネントを取得するために使用されます。 set
日付のコンポーネントを変更するために使用されます。 以下は、の詳細なチャートです。 set
の方法 Date
物体。
日付時刻 | 方法 | 範囲 | 例 |
---|---|---|---|
年 | setFullYear() |
YYYY | 1970 |
月 | setMonth() |
0-11 | 0=1月 |
日(月の) | setDate() |
1-31 | 1=月の1日 |
曜日) | setDay() |
0-6 | 0=日曜日 |
時間 | setHours() |
0-23 | 0=真夜中 |
分 | setMinutes() |
0-59 | |
2番 | setSeconds() |
0-59 | |
ミリ秒 | setMilliseconds() |
0-999 | |
タイムスタンプ | setTime() |
エポック時間からのミリ秒 |
これらを使用できます set
日付の1つ、複数、またはすべてのコンポーネントを変更するメソッド。 たとえば、年を変更できます birthday
上から可変 1997
それ以外の 1980
.
// Change year of birthday date
birthday.setFullYear(1997);
birthday;
OutputThu Jul 31 1997 00:00:00 GMT+0000 (UTC)
上記の例では、 birthday
出力の一部として新年を受け取る変数。
で始まる組み込みメソッド set
のさまざまな部分を変更しましょう Date
物体。
UTCを使用した日付メソッド
The get
上記の方法では、ユーザーのローカルタイムゾーン設定に基づいて日付コンポーネントを取得します。 日付と時刻の制御を強化するには、 getUTC
メソッドは、 get
UTC(協定世界時)標準に基づいて時間を計算することを除いて、メソッド。 以下は、JavaScriptのUTCメソッドの表です。 Date
物体。
日付時刻 | 方法 | 範囲 | 例 |
---|---|---|---|
年 | getUTCFullYear() |
YYYY | 1970 |
月 | getUTCMonth() |
0-11 | 0=1月 |
日(月の) | getUTCDate() |
1-31 | 1=月の1日 |
曜日) | getUTCDay() |
0-6 | 0=日曜日 |
時間 | getUTCHours() |
0-23 | 0=真夜中 |
分 | getUTCMinutes() |
0-59 | |
2番 | getUTCSeconds() |
0-59 | |
ミリ秒 | getUTCMilliseconds() |
0-999 |
ローカルとUTCの違いをテストするには get
メソッドでは、次のコードを実行できます。
// Assign current time to a variable
const now = new Date();
// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());
このコードを実行すると、現在の時刻とUTCタイムゾーンの時刻が出力されます。 現在UTCタイムゾーンにいる場合、上記のプログラムの実行から出力される数値は同じになります。
UTCは、国際的な時間標準参照を提供するという点で便利です。したがって、開発しているものに適用できる場合は、タイムゾーン全体でコードの一貫性を保つことができます。
結論
このチュートリアルでは、のインスタンスを作成する方法を学びました Date
オブジェクトを作成し、その組み込みメソッドを使用して、特定の日付のコンポーネントにアクセスして変更します。 JavaScriptでの日付と時刻のより詳細なビューについては、Mozilla DeveloperNetworkのDateリファレンスを読むことができます。
日付の操作方法を知ることは、JavaScriptの多くの一般的なタスクにとって不可欠です。これにより、繰り返しレポートの設定から正しいタイムゾーンでの日付とスケジュールの表示まで多くのことができるようになります。