目次
タイムゾーン
作成日
日付文字列メソッド
パラメーターを使用して日付を作成します
タイムスタンプで日付を作成します
パラメーターなし
作成日の概要
フォーマット日
カスタム日付形式を記述します
日付を比較します
別の日付から日付を取得します
特定の日付/時間を設定します
別の日付から増分を追加/減算します
最初の方法(設定方法)
2番目の方法(新しい日付方法)
自動日付修正
JavaScriptの日付の詳細
より多くのJavaScriptを学ぶことに興味がありますか?
ホームページ ウェブフロントエンド CSSチュートリアル JavaScriptの日付について知る必要があるすべて

JavaScriptの日付について知る必要があるすべて

Apr 20, 2025 am 10:09 AM

JavaScriptの日付について知る必要があるすべて

JavaScriptの日付オブジェクトは、日付と時間に対処する必要がある場合はいつでもライブラリ(日付と瞬間など)に目を向けることを混乱させることがよくあります。

しかし、私たちは常にライブラリを必要とするとは限りません。何に注意を払うべきか知っている場合、日付は実際には非常に簡単です。この記事では、日付オブジェクトに関するすべてを説明します。

まず、タイムゾーンの存在を認めましょう。

タイムゾーン

世界には何百ものタイムゾーンがあります。 JavaScriptでは、現地時間と調整されたユニバーサル時間(UTC)の2つのことのみを気にします。

  • 現地時間とは、コンピューターが配置されているタイムゾーンを指します。
  • UTCは、実際にはグリニッジ平均時間(GMT)と同義です。

デフォルトでは、JavaScriptのほぼすべての日付メソッド(1つを除く)は、現地時間の日付/時刻を提供します。 UTCを指定するときにのみUTCを取得できます。

これらを使用して、作成された日付について説明できます。

作成日

new Date()を使用して日付を作成できます。 new Date()

  1. 日付文字列を使用します
  2. 日付パラメーターを使用します
  3. タイムスタンプを使用します
  4. パラメーターなし

日付文字列メソッド

日付文字列メソッドでは、日付文字列をnew Dateに渡すことで日付を作成できます。

新しい日付( '1988-03-21')
ログイン後にコピー

日付を書くときは、日付文字列メソッドを使用する傾向があります。これは、私たちが生涯にわたって日付の文字列を使用してきたので、自然です。

21-03-1988を書いた場合、1988年3月21日だという質問はありません。ただし、JavaScriptで21-03-1988を書いた場合、 Invalid Dateが表示されます。

これには十分な理由があります。

世界のさまざまな地域で日付の文字列を異なって解釈します。たとえば、2019年11月6日は2019年6月11日または2019年11月6日になる可能性があります。しかし、使用している日付システムがわからない限り、私が言及しているものはわかりません。

JavaScriptでは、日付文字列を使用する場合は、世界中で受け入れられる形式を使用する必要があります。これらの形式の1つは、ISO 8601拡張形式です。

 <code>// ISO 8601 扩展格式`YYYY-MM-DDTHH:mm:ss.sssZ`</code>
ログイン後にコピー

これが価値の意味です。

  • YYYY:4桁の年
  • MM:2桁の月(1月に01、12月に12)
  • DD:2桁の日付(0〜31)
  • - :日付分離器
  • T:時間の始まりを示します
  • HH:24桁の時間(0〜23)
  • MM:分(0〜59)
  • SS:秒(0〜59)
  • SSS:ミリ秒(0〜999)
  • ::時間分離器
  • Z:zが存在する場合、日付はUTCに設定されます。 zが存在しない場合、現地時間です。 (これは、時間が提供される場合にのみ適用されます。)

日付、時間、分、秒、およびミリ秒がオプションを作成している場合。したがって、2019年6月11日の日付を作成したい場合は、これを書くことができます。

新しい日付( '2019-06-11')
ログイン後にコピー

これに特に注意してください。日付文字列を使用して日付を作成することには大きな問題があります。この日付をconsole.logすると、問題が見つかります。

GMTの背後にあるエリアに住んでいる場合、6月10日に表示される日付が表示されます。

GMTに至るエリアに住んでいる場合、6月11日に表示される日付が表示されます。

これは、日付文字列メソッドに特別な動作があるために発生します。日付を作成する場合(時間を指定しない)、UTCに設定された日付を取得します。

上記の場合、 new Date('2019-06-11')を書くとき、実際に作成した日付は2019年6月11日、午前12時のUTCでした。そのため、GMTの後ろの地域に住んでいる人々は、6月11日ではなく6月10日になります。

Date Stringメソッドを使用して現地時間に日付を作成する場合は、時間を含める必要があります。時間を含めるときは、少なくともHHとMMを書く必要があります(そうでなければ、Google Chromeは無効な日付を返します)。

新しい日付( '2019-06-11T00:00')
ログイン後にコピー

日付文字列の使用に関するUTCの問題を伴う現地時間全体は、キャッチするのが難しいソースになる可能性があります。したがって、日付を作成するために日付文字列を使用しないことをお勧めします。

(ところで、MDNは、ブラウザが異なる方法で日付文字列を解析する場合があるため、日付文字列メソッドを使用しないように警告しています)。

日付を作成する場合は、パラメーターまたはタイムスタンプを使用してください。

パラメーターを使用して日付を作成します

最大7つのパラメーターを渡して、日付/時刻を作成できます。

  1. 年: 4桁の年。
  2. 月:月(0-11)。数ヶ月はゼロから始まります。省略した場合、デフォルトは0です。
  3. 日付:日付(1-31)。省略した場合、デフォルトは1です。
  4. 時間: 1日の時間(0-23)。省略した場合、デフォルトは0です。
  5. 議事録:分(0-59)。省略した場合、デフォルトは0です。
  6. 秒:秒(0-59)。省略した場合、デフォルトは0です。
  7. ミリ秒:ミリ秒(0-999)。省略した場合、デフォルトは0です。
 // 2019年6月11日、午前5時23分59時、現地時間新しい日付(2019、5、11、5、23、59)
ログイン後にコピー

多くの開発者(私自身も含めて)は、複雑に見えるため、パラメーターメソッドの使用を避けています。しかし、それは実際には非常に簡単です。

数字を左から右に読んでみてください。左から右へと、振幅の減少に値を挿入します:年、月、日、時間、分、秒、およびミリ秒。

新しい日付(2017、3、22、5、23、50)

//左から右への式に従うと、この日付を簡単に読むことができます。
//年:2017年
//月:4月(月がゼロから始まるため)
//日付:22
//時間:05
//議事録:23
//秒:50
ログイン後にコピー

日付の最も問題のある部分は、月の値がゼロ、つまり1月=== 0、2月=== 1、3月=== 2などから始まることです。

JavaScriptがゼロから始まるのは少し奇妙です(明らかにJavaがそうするからです)が、1月が1(0ではなく)である理由を主張するのではなく、JavaScriptのその月をゼロから開始する方が良いです。この事実を受け入れると、日付は処理しやすくなります。

ここにあなたがよく知っているいくつかの例があります:

 // 1988年3月21日、現地時間の午前12時。
新しい日付(1988、2、21)

// 2019年12月25日、午前8時、現地時間。
新しい日付(2019、11、25、8)

// 2023年11月6日、午前2時20分、現地時間の新しい日付(2023、10、6、2、20)

// 2019年6月11日、午前5時23分59時、現地時間新しい日付(2019、5、11、5、23、59)
ログイン後にコピー

パラメーターを使用して作成された日付はすべて現地時間であることに注意してください。

これは、パラメーターを使用することの追加の利点の1つです。現地時間とUTCを混乱させることはありません。 UTCが必要な場合は、この方法でUTCで日付を作成できます。

 // 2019年6月11日、午前12時、UTC。
新しい日付(date.utc(2019、5、11))
ログイン後にコピー

タイムスタンプで日付を作成します

JavaScriptでは、タイムスタンプは1970年1月1日から通過するミリ秒の数です(1970年1月1日はUnix Epoch Timeとしても知られています)。私の経験では、タイムスタンプを使用して日付を作成することはめったにありません。タイムスタンプのみを使用して、さまざまな日付を比較します(詳細については、後で詳しく説明します)。

 // 2019年6月11日午前8時(現地時間、シンガポール)
新しい日付(1560211200000)
ログイン後にコピー

パラメーターなし

パラメーターなしで日付を作成すると、日付が現在の時刻(現地時間)に設定されます。

 new date()
ログイン後にコピー

画像から、私がこれを書くとき、シンガポールの時間は2019年5月25日午前11時10分であることがわかります。

作成日の概要

  1. new Date()を使用して日付を作成できます。
  2. 可能な構文は4つあります。
    1. 日付文字列を使用します
    2. 使用パラメーター
    3. タイムスタンプを使用します
    4. パラメーターなし
  3. 日付の文字列メソッドを使用して日付を作成しないでください
  4. パラメーターメソッドを使用して日付を作成するのが最善です。
  5. JavaScriptの月はゼロから始まることを覚えておいてください(そして受け入れます)。

次に、日付を読み取り可能な文字列に変換することについて話しましょう。

フォーマット日

ほとんどのプログラミング言語は、必要な日付形式を作成するためのフォーマットツールを提供します。たとえば、PHPでは、2019年1月23日と同様の日付としてdate("d MY")を書き込むことができます。

しかし、JavaScriptに日付をフォーマットする簡単な方法はありません。

ネイティブの日付オブジェクトには、7つのフォーマット方法が付属しています。これらの7つの方法はそれぞれ、特定の値を提供します(そして、非常に役に立たない)。

 const date = new Date(2019、0、23、17、23、42)
ログイン後にコピー
  1. toString 2019年1月23日水曜日17:23:42 GMT 0800(シンガポールの標準時間)を提供します
  2. toDateString 、2019年1月23日水曜日を提供します
  3. toLocaleString 、2019年1月23日、17:23:42を提供します
  4. toLocaleDateString 、2019年1月23日に提供されます
  5. toGMTString水曜日、2019年1月23日09:23:42 GMTを提供します
  6. toUTCString 2019年1月23日水曜日に提供されます09:23:42 GMT
  7. toISOString 、2019-01-23T09:23:42.079zを提供します

カスタム形式が必要な場合は、自分で作成する必要があります。

カスタム日付形式を記述します

2019年1月23日の木のようなものが必要だとします。この値を作成するには、日付オブジェクトに付属の日付メソッドを理解(および使用)する必要があります。

日付を取得するには、これらの4つの方法を使用できます。

  1. getFullYear :現地時間に基づいて4桁の年を取得します
  2. getMonth :現地時間に基づいて月(0-11)を取得します。数ヶ月はゼロから始まります。
  3. getDate :現地時間(1-31)に基づいて、月の日付を取得します。
  4. getDay :現地時間に基づいて、曜日(0-6)を取得します。曜日は日曜日(0)に始まり、土曜日(6)に終了します。

2019年1月23日、木の23と2019年の作成は簡単です。 getFullYeargetDateを使用してそれらを取得できます。

 const d = new Date(2019、0、23)
const year = d.getthullyear()// 2019
const date = d.getdate()// 23
ログイン後にコピー

木と1月を取得するのは難しいです。

1月を取得するには、12か月のすべての値をそれぞれの名前にマッピングするオブジェクトを作成する必要があります。

 const months = {
  0:「1月」、
  1:「2月」、
  2:「マーチ」、
  3:「4月」、
  4:「5月」、
  5:「6月」、
  6:「7月」、
  7:「8月」、
  8:「9月」、
  9:「10月」、
  10:「11月」、
  11:「12月」
}
ログイン後にコピー

月はゼロから始まるので、オブジェクトの代わりに配列を使用できます。同じ結果が生成されます。

 const months = [
  '1月'、
  '2月'、
  '行進'、
  「4月」、
  '5月'、
  「6月」、
  「7月」、
  「8月」、
  「9月」、
  「10月」、
  「11月」、
  '12月'
]
ログイン後にコピー

1月を取得するには:

  1. getMonthを使用して、日付から始まる月を取得します。
  2. monthsから月の名前を取得します
const monthindex = d.getmonth()
const monthname = months [monthindex]
console.log(monthname)// 1月
ログイン後にコピー

略語バージョン:

 const monthname = months [d.getmonth()]
console.log(monthname)// 1月
ログイン後にコピー

あなたは木で同じことをします。今回は、週7日を含む配列が必要です。

 const days = [
  '太陽'、
  「モン」、
  「火」、
  「水」、
  'thu'、
  「金」、
  'SAT'
]
ログイン後にコピー

それからあなた:

  1. getDayを使用してdayIndexを取得します
  2. dayIndexを使用してdayNameを取得します
const dayindex = d.getday()
const dayname = days [dayindex] // thu
ログイン後にコピー

略語バージョン:

 const dayname = days [d.getday()] // thu
ログイン後にコピー

次に、作成したすべての変数を組み合わせて、フォーマットされた文字列を取得します。

 const formatted = `$ {dayname}、$ {date} $ {monthname} $ {year}`
console.log(フォーマット)// 2019年1月23日
ログイン後にコピー

はい、それは面倒です。しかし、一度トリックが得られたら、それは不可能です。

カスタム形式を作成する必要がある場合は、次の方法を使用できます。

  1. getHours :現地時間に基づいて時間(0-23)を取得します。
  2. getMinutes :現地時間に基づいて議事録(0-59)を取得します。
  3. getSeconds :現地時間に基づいて秒(0-59)を取得します。
  4. getMilliseconds :現地時間に基づいてMilliseconds(0-999)を取得します。

次に、日付の比較について話しましょう。

日付を比較します

ある日付が別の日付よりも早いか遅いかを知りたい場合は、>、=および

 const hery = new Date(2019、0、26)
const Later = new Date(2019、0、27)

console.log(以前<p> 2つの日付が同時に落ちたかどうかを確認する場合は、比較するのがより困難です。 ==または===を使用してそれらを比較することはできません。</p><pre class="brush:php;toolbar:false"> const a = new Date(2019、0、26)
const b = new Date(2019、0、26)

console.log(a == b)// false
console.log(a === b)// false
ログイン後にコピー

2つの日付がたまたま同時に落ちるかどうかを確認するには、 getTimeを使用してタイムスタンプを確認できます。

 constisametime =(a、b)=> {
  return a.gettime()=== b.gettime()
}

const a = new Date(2019、0、26)
const b = new Date(2019、0、26)
console.log(assametime(a、b))// true
ログイン後にコピー

両方の日付が同じ日にあるかどうかを確認する場合は、 getFullYeargetMonthgetDate値を確認できます。

 constisadeday =(a、b)=> {
  a.getfullyear()=== b.getfullyear()&&を返します
    a.getMonth()=== b.getMonth()&&
    a.getDate()=== b.getDate()
}

const a = new Date(2019、0、26、10)// 2019年1月26日、午前10:00 const b = new Date(2019、0、26、12)// 2019年1月26日、正午Console.log(IssadedAy(a、b))// true
ログイン後にコピー

もう1つ紹介しなければなりません。

別の日付から日付を取得します

別の日付から日付を取得する必要がある2つのシナリオがあります。

  1. 別の日付から特定の日付/時刻値を設定します。
  2. 別の日付から増分を追加/減算します。

特定の日付/時間を設定します

これらの方法を使用して、別の日付から日付/時刻を設定できます。

  1. setFullYear :現地で4桁の年を設定します。
  2. setMonth :現地時間に月を設定します。
  3. setDate :現地時間に毎月の日付を設定します。
  4. setHours :現地時間に時間を設定します。
  5. setMinutes :現地時間に議事録を設定します。
  6. setSeconds :現地時間に秒を設定します。
  7. setMilliseconds :現地時にミリ秒を設定します。

たとえば、日付を月の15日目に設定する場合は、 setDate(15)を使用できます。

 const d = new Date(2019、0、10)
D.SetDate(15)

Console.log(d)// 2019年1月15日
ログイン後にコピー

月を6月に設定したい場合は、 setMonthを使用できます。 (覚えておいてください、JavaScriptの数ヶ月はゼロから始まります!)

 const d = new Date(2019、0、10)
D.SetMonth(5)

Console.log(d)// 2019年6月10日
ログイン後にコピー

注:上記の設定方法は、元の日付オブジェクトを変更します。実際には、オブジェクトを変更しないでください(理由はここで詳しく説明しています)。これらの操作は、新しい日付オブジェクトで行う必要があります。

 const d = new Date(2019、0、10)
const newdate = new Date(d)
newdate.setmonth(5)

console.log(d)// 2019年1月10日Console.log(Newdate)// 2019年6月10日
ログイン後にコピー

別の日付から増分を追加/減算します

増分は変更です。別の日付から増分を追加/減算することは、次のことを意味します。別の日付からxの距離を持つ日付を取得する必要があります。 x年、 xヶ月、 x日などになることがあります。

増分を取得するには、現在の日付の価値を知る必要があります。次の方法を使用して取得できます。

  1. getFullYear :現地時間に基づいて4桁の年を取得します
  2. getMonth :現地時間に基づいて月(0-11)を取得します。
  3. getDate :現地時間(1-31)に基づいて、月の日付を取得します。
  4. getHours :現地時間に基づいて時間(0-23)を取得します。
  5. getMinutes :現地時間に基づいて議事録(0-59)を取得します。
  6. getSeconds :現地時間に基づいて秒(0-59)を取得します。
  7. getMilliseconds :現地時間に基づいてMilliseconds(0-999)を取得します。

増分を追加/減算するには、2つの一般的な方法があります。最初の方法は、スタックオーバーフローでより一般的です。それは簡潔で明確ですが、理解するのは難しいです。 2番目の方法はより冗長ですが、理解しやすいです。

これら2つの方法を紹介しましょう。

今日から3日から日付を取得したいとします。この例では、今日は2019年3月28日であると仮定しています(固定日を使用するときに説明する方が簡単です)。

最初の方法(設定方法)

//今日は2019年3月28日であると仮定しますconst Today = New Date(2019、2、28)

最初に、新しい日付オブジェクトを作成します(したがって、元の日付は変更されません)

 const finaldate = new Date(今日)
ログイン後にコピー

次に、変更したい価値を知る必要があります。日付を変更しているため、 getDateを使用して日付を取得できます。

 const currentdate = today.getDate()
ログイン後にコピー

今日より3日遅れてデートが必要です。現在の日付に増分(3)を追加します。

 finaldate.setdate(currentDate 3)
ログイン後にコピー

メソッドを設定するための完全なコード:

 const today = new Date(2019、2、28)
const finaldate = new Date(今日)
finaldate.setdate(today.getDate()3)

console.log(finaldate)// 2019年3月31日
ログイン後にコピー

2番目の方法(新しい日付方法)

ここでは、変更する値のタイプが見つかるまで、 getFullYeargetMonthgetDate 、その他のゲッターメソッドを使用します。次に、 new Dateを使用して最終日を作成します。

 const today = new Date(2019、2、28)

//必要な値を取得const year = today.getSlyear()
const month = Today.getMonth()
const day = today.getDate()

//新しい日付を作成します(増分付き)
const finaldate = new Date(年、月、3日目)

console.log(finaldate)// 2019年3月31日
ログイン後にコピー

どちらの方法も機能します。 1つを選択して、それに固執します。

自動日付修正

許容範囲を超えた値を日付に提供する場合、JavaScriptはあなたの日付を自動的に再計算します。

これが例です。 2019年3月33日までの日付を設定したとします(カレンダーに3月33日はありません)。この場合、JavaScriptは3月33日から4月2日まで自動的に調整されます。

 // 3月33 => 4月2日新しい日付(2019、2、33)
ログイン後にコピー

これは、増分を作成するときに、分、時間、日付、月などの計算を心配する必要がないことを意味します。JavaScriptは自動的に処理します。

 // 3月33日=> 4月2日新しい日付(2019、2、30 3)
ログイン後にコピー

これは、JavaScriptネイティブデートオブジェクトについて知っておく必要があるすべてです。

JavaScriptの日付の詳細

  • JavaScript(DigitalOcean)で日付と時刻を理解する
  • JavaScriptの日付オブジェクトを探索する(wiregator.io)

より多くのJavaScriptを学ぶことに興味がありますか?

この日付の導入が有用であると思われる場合は、JavaScriptを作成するために作成したコースであるJavaScriptを学ぶことができます。

このコースでは、あなたが知る必要がある基本的な概念を紹介し、実際のコンポーネントを構築するために学んだ概念を使用する方法を示します。

見てください。あなたはそれが便利だと思うかもしれません。

また、JavaScriptの問題がある場合は、お気軽にご連絡ください。私はあなたの質問に答えるために無料の記事を作成するために最善を尽くします。

以上がJavaScriptの日付について知る必要があるすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

Googleフォント変数フォント Googleフォント変数フォント Apr 09, 2025 am 10:42 AM

Google Fontsが新しいデザイン(ツイート)を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? CSSを介してファーストクラスの名前アイテムを使用して子要素を選択する方法は? Apr 05, 2025 pm 11:24 PM

要素の数が固定されていない場合、CSSを介して指定されたクラス名の最初の子要素を選択する方法。 HTML構造を処理するとき、あなたはしばしば異なる要素に遭遇します...

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

See all articles