JavaScriptの日付オブジェクトは、日付と時間に対処する必要がある場合はいつでもライブラリ(日付と瞬間など)に目を向けることを混乱させることがよくあります。
しかし、私たちは常にライブラリを必要とするとは限りません。何に注意を払うべきか知っている場合、日付は実際には非常に簡単です。この記事では、日付オブジェクトに関するすべてを説明します。
まず、タイムゾーンの存在を認めましょう。
タイムゾーン
世界には何百ものタイムゾーンがあります。 JavaScriptでは、現地時間と調整されたユニバーサル時間(UTC)の2つのことのみを気にします。
- 現地時間とは、コンピューターが配置されているタイムゾーンを指します。
- UTCは、実際にはグリニッジ平均時間(GMT)と同義です。
デフォルトでは、JavaScriptのほぼすべての日付メソッド(1つを除く)は、現地時間の日付/時刻を提供します。 UTCを指定するときにのみUTCを取得できます。
これらを使用して、作成された日付について説明できます。
作成日
new Date()
を使用して日付を作成できます。 new Date()
:
- 日付文字列を使用します
- 日付パラメーターを使用します
- タイムスタンプを使用します
- パラメーターなし
日付文字列メソッド
日付文字列メソッドでは、日付文字列を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つのパラメーターを渡して、日付/時刻を作成できます。
- 年: 4桁の年。
- 月:月(0-11)。数ヶ月はゼロから始まります。省略した場合、デフォルトは0です。
- 日付:日付(1-31)。省略した場合、デフォルトは1です。
- 時間: 1日の時間(0-23)。省略した場合、デフォルトは0です。
- 議事録:分(0-59)。省略した場合、デフォルトは0です。
- 秒:秒(0-59)。省略した場合、デフォルトは0です。
- ミリ秒:ミリ秒(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分であることがわかります。
作成日の概要
-
new Date()
を使用して日付を作成できます。 - 可能な構文は4つあります。
- 日付文字列を使用します
- 使用パラメーター
- タイムスタンプを使用します
- パラメーターなし
- 日付の文字列メソッドを使用して日付を作成しないでください。
- パラメーターメソッドを使用して日付を作成するのが最善です。
- JavaScriptの月はゼロから始まることを覚えておいてください(そして受け入れます)。
次に、日付を読み取り可能な文字列に変換することについて話しましょう。
フォーマット日
ほとんどのプログラミング言語は、必要な日付形式を作成するためのフォーマットツールを提供します。たとえば、PHPでは、2019年1月23日と同様の日付としてdate("d MY")
を書き込むことができます。
しかし、JavaScriptに日付をフォーマットする簡単な方法はありません。
ネイティブの日付オブジェクトには、7つのフォーマット方法が付属しています。これらの7つの方法はそれぞれ、特定の値を提供します(そして、非常に役に立たない)。
const date = new Date(2019、0、23、17、23、42)
-
toString
2019年1月23日水曜日17:23:42 GMT 0800(シンガポールの標準時間)を提供します -
toDateString
、2019年1月23日水曜日を提供します -
toLocaleString
、2019年1月23日、17:23:42を提供します -
toLocaleDateString
、2019年1月23日に提供されます -
toGMTString
水曜日、2019年1月23日09:23:42 GMTを提供します -
toUTCString
2019年1月23日水曜日に提供されます09:23:42 GMT -
toISOString
、2019-01-23T09:23:42.079zを提供します
カスタム形式が必要な場合は、自分で作成する必要があります。
カスタム日付形式を記述します
2019年1月23日の木のようなものが必要だとします。この値を作成するには、日付オブジェクトに付属の日付メソッドを理解(および使用)する必要があります。
日付を取得するには、これらの4つの方法を使用できます。
-
getFullYear
:現地時間に基づいて4桁の年を取得します -
getMonth
:現地時間に基づいて月(0-11)を取得します。数ヶ月はゼロから始まります。 -
getDate
:現地時間(1-31)に基づいて、月の日付を取得します。 -
getDay
:現地時間に基づいて、曜日(0-6)を取得します。曜日は日曜日(0)に始まり、土曜日(6)に終了します。
2019年1月23日、木の23と2019年の作成は簡単です。 getFullYear
とgetDate
を使用してそれらを取得できます。
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月を取得するには:
-
getMonth
を使用して、日付から始まる月を取得します。 -
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' ]
それからあなた:
-
getDay
を使用してdayIndex
を取得します -
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日
はい、それは面倒です。しかし、一度トリックが得られたら、それは不可能です。
カスタム形式を作成する必要がある場合は、次の方法を使用できます。
-
getHours
:現地時間に基づいて時間(0-23)を取得します。 -
getMinutes
:現地時間に基づいて議事録(0-59)を取得します。 -
getSeconds
:現地時間に基づいて秒(0-59)を取得します。 -
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
両方の日付が同じ日にあるかどうかを確認する場合は、 getFullYear
、 getMonth
、 getDate
値を確認できます。
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つのシナリオがあります。
- 別の日付から特定の日付/時刻値を設定します。
- 別の日付から増分を追加/減算します。
特定の日付/時間を設定します
これらの方法を使用して、別の日付から日付/時刻を設定できます。
-
setFullYear
:現地で4桁の年を設定します。 -
setMonth
:現地時間に月を設定します。 -
setDate
:現地時間に毎月の日付を設定します。 -
setHours
:現地時間に時間を設定します。 -
setMinutes
:現地時間に議事録を設定します。 -
setSeconds
:現地時間に秒を設定します。 -
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日などになることがあります。
増分を取得するには、現在の日付の価値を知る必要があります。次の方法を使用して取得できます。
-
getFullYear
:現地時間に基づいて4桁の年を取得します -
getMonth
:現地時間に基づいて月(0-11)を取得します。 -
getDate
:現地時間(1-31)に基づいて、月の日付を取得します。 -
getHours
:現地時間に基づいて時間(0-23)を取得します。 -
getMinutes
:現地時間に基づいて議事録(0-59)を取得します。 -
getSeconds
:現地時間に基づいて秒(0-59)を取得します。 -
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番目の方法(新しい日付方法)
ここでは、変更する値のタイプが見つかるまで、 getFullYear
、 getMonth
、 getDate
、その他のゲッターメソッドを使用します。次に、 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 サイトの他の関連記事を参照してください。

@keyframesandcsstransitionsdifferincomplexity:@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

私は知っています、私は知っています:たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY&#039;知っているものはありませんでしたか?奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります&

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1)タグを使用して、ローカルCSSファイルをリンクします。 2)複数のタグを追加することにより、複数のCSSファイルを実装できます。 3)外部CSSファイルは、そのような絶対URLリンクを使用します。 4)ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1)FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2)グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

はい、Youはrelearnbothlexboxandgrid.1)FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2)Gridexcelsintwo-digsignssuchasmagazinelayouts.3)Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

独自のコードをリファクタリングするのはどのように見えますか?ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1)


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

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