Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

今日は、JavaScript で日付を扱うのに役立つライブラリ Day.js を皆さんにお勧めします。JavaScript で日付を扱うのは難しすぎるからです。ビジネス開発を行う際に全く使えず、様々な機能を自らカプセル化する必要があります。

day.js を使用する理由

まず、day.js を使用すると、JavaScript で日付と時刻をより簡単に処理できるようになります。
JavaScript で時間を処理するライブラリは Moment など数多く耳にしたことがあるかと思いますが、2021 年現在、日付処理ツールとしては扱いにくいため、moment.js の使用は実際には推奨されていません。day.js は、よりモダンで軽量、拡張しやすいライブラリです。

モーメント

サイズを見るにはここをクリック

デイ.js

サイズを見るにはここをクリック

TreeShaking が使えて、プラグインで拡張できるので、非常に軽量です。必要に応じてプラグインを導入できるので、最終的には必要なものだけを導入します。

day.js がなければどうなるでしょうか?

ネイティブJavaScriptでは、現在の日付を次のように取得する必要があります。

const today = 新しい Date();
const dd = String(today.getDate()).padStart(2, '0'); // 日 const mm = String(today.getMonth() + 1).padStart(2, '0'); // 月 const yyyy = today.getFullYear(); // 年 const curDate = `${yyyy}-${mm}-${dd}`

コンソールログ(現在の日付)
// 出力: 2021-09-17

day.js では、これだけが必要ですが、もちろん、それ以上の多くの機能もサポートしています。
「dayjs」からdayjsをインポートします。

const curDate = dayjs().format('YYYY-MM-DD');

コンソールログ(現在の日付)
// 出力: 2021-09-17

Day.js の例

ここで、ネイティブ API よりもシンプルで読みやすい、実用的で興味深い例をいくつか見てみましょう。

1. 2つの日付間の日数を取得する

ドキュメントを見る

「dayjs」からdayjsをインポートします。

// 2 番目のパラメーターは 'day' として指定されており、粒度が day であることを意味します。dayjs(new Date(2021, 10, 1)).diff(new Date(2021, 9, 17), "day"); 
// 出力: 15

2. 日付が有効かどうかを確認する

ドキュメントを見る

「dayjs」からdayjsをインポートします。

dayjs("20").isValid(); 
// 出力: false
dayjs("2021-09-17").isValid(); 
// 出力: true

3. 入力した日付の月の日数を取得する

ドキュメントを見る

「dayjs」からdayjsをインポートします。

dayjs("2021-09-13").daysInMonth() 
// 出力: 30

4. 日、月、年、時間、分、秒を追加します

ドキュメントを見る

「dayjs」からdayjsをインポートします。

dayjs("2021-09-17 08:10:00").add(20, "分").format('YYYY-MM-DD HH:mm:ss') 
// 出力: 2021-09-17 08:30:00

5. 日、月、年、時間、分、秒を減算する

ドキュメントを見る

「dayjs」からdayjsをインポートします。

dayjs("2021-09-17 08:10:00").subtract(20, "分").format('YYYY-MM-DD HH:mm:ss')
// 出力: 2021-09-17 07:50:00

プラグインを使用して機能を拡張する

1. 相対時間

ドキュメントを見る

指定した時刻から現在までの時間差を取得します。

「dayjs」からdayjsをインポートします。
「dayjs/plugin/relativeTime」から relativeTime をインポートします。

dayjs.extend(相対時間);

dayjs("2021-09-16 13:28:55").fromNow();
// 出力: 9 時間前

以下は出力テーブルです

範囲サンプル出力
0~44秒s数秒前
45~89秒メートル1分前
90秒から44分んん2分前...44分前
45~89分h 1時間前
90分~21時間はあ2時間前 ... 21時間前
22~35時間d 1日前
36時間から25日間dd 2日前 ... 25日前
26~45日1か月前
46日から10か月MM 2か月前 ... 10か月前
11~17ヶ月ええ1年前
18ヶ月以上ええ2年前...20年前

2. 週番号

ドキュメントを見る

指定された日付の年内の週番号を取得します

「dayjs」からdayjsをインポートします。
「dayjs/plugin/weekOfYear」から weekOfYear をインポートします。

dayjs.extend(weekOfYear);

dayjs("2021-09-13 14:00:00").week(); 
// 出力: 38

3. 同じかそれ以降

ドキュメントを見る

日付が指定された日付以上であるかどうかを確認します

「dayjs」からdayjsをインポートします。
「dayjs/plugin/isSameOrAfter」からisSameOrAfterをインポートします。

dayjs.extend(isSameOrAfter);

dayjs("2021-09-17").isSameOrAfter("2021-09-16"); 
// 出力: true

4. 最小最大

ドキュメントを見る

配列内の最大または最小の日付を取得する

「dayjs」からdayjsをインポートします。
「dayjs/plugin/minMax」からminMaxをインポートします。

dayjs.extend(最小最大)

定数maxDate = dayjs.max([
    dayjs("2021-09-13"), 
    dayjs("2021-09-16"), 
    2021-09-20 の投稿
])

定数minDate = dayjs.min([
    dayjs("2021-09-13"), 
    dayjs("2021-09-16"), 
    2021-09-20 の投稿
])

maxDate.format('YYYY-MM-DD HH:mm:ss') 
// 出力: 2021-09-20 00:00:00
minDate.format('YYYY-MM-DD HH:mm:ss') 
// 出力: 2021-09-13 00:00:00

5. 間にある

ドキュメントを見る

指定された日付が指定された日付範囲内にあるかどうかを確認します

「dayjs」からdayjsをインポートします。
「dayjs/plugin/isBetween」からisBetweenをインポートします。

dayjs.extend(isBetween);

// 比較の粒度として日を使用します dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day");
// 出力: true

// 比較の粒度として年を使用します dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year");
// 出力: false

Day.js をベースにした JavaScript でのよりエレガントな日付処理に関するこの記事はこれで終わりです。Day.js を使用した日付処理の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSの日付処理機能についての簡単な説明
  • Moment.js は見逃せない素晴らしい JavaScript 日付処理ライブラリです。
  • 5 つのベスト JavaScript データ処理ライブラリ
  • JavaScript で先週と先月の日付を表示する方法
  • 日付処理jsライブラリ(ミニ版) - 自作jsライブラリのまとめ
  • 自分で整理したJavaScriptの日付処理関数
  • js での一般的な日付形式の処理、カレンダーのレンダリング、カウントダウン機能の詳細な説明
  • JavaScript 日付処理関数、パフォーマンス最適化バッチ処理

<<:  MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

>>:  Linux で gdb を使用してコア ファイルをデバッグする方法

推薦する

ユーザーエクスペリエンスの要素またはWebデザインの要素

システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...

JavaScript で 9 グリッドのモバイル パズル ゲームを実装

この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...

Vue+SSMは画像アップロードのプレビュー効果を実現します

現在の要件は、ファイルのアップロード ボタンがあることです。ボタンをクリックすると、アップロードする...

JS配列の次元削減のいくつかの方法の詳細な説明

2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...

ユーザーはその理由を知る必要がある

証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...

MySQL テーブルと列のコメントの概要

コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...

Mysql5.7 のルートパスワードを忘れた場合の対処法 (シンプルで効果的な方法)

前回の記事では、MySQL 5.7でルートパスワードを忘れた場合と、MySQL 5.7でルートパスワ...

MySQL で日付を保存するためのベスト プラクティス ガイド

目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...

HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

JavaScript 文字列操作の 4 つの実用的なヒント

目次序文1. 文字列を分割する2. JSONのフォーマットと解析3. 複数行の文字列と埋め込み式4....

Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する

この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...

Docker execは複数のコマンドを実行します

docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...

Vueストレージにはブール値のソリューションが含まれています

Vueはブール値でストレージを保存します今日、問題に遭遇しました。バックグラウンドから返された真偽の...

MySQLは重複しないデータ挿入を実装するためにUNIQUEを使用する

SQL UNIQUE制約UNIQUE 制約は、データベース テーブル内の各レコードを一意に識別します...

SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。

Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...