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 を使用してコア ファイルをデバッグする方法

推薦する

Linux 仮想ホストで SourceGuardian (sg11) 暗号化コンポーネントを有効にする詳細な手順

注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...

js配列forEachインスタンスの詳細な使用方法

1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

MySQLクエリ制御ステートメントの詳細なグラフィック説明

mysql クエリ制御ステートメントフィールド重複排除 **キーワード: 明確** 構文: テーブル...

MySQL無料インストール版のパスワードの設定と変更に関するチュートリアル

ステップ 1: 環境変数を構成する (解凍パス: G:\mysql\mysql-5.7.21-win...

JS を使用してクリップボード内の Excel コンテンツを解析する方法

目次序文1. イベントとクリップボードを貼り付ける2. クリップボード内のコンテンツ形式3. HTM...

ウェブデザインの達人がよく使うレスポンシブフレームワークを共有する(要約)

この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...

MySQL 時間差関数 (TIMESTAMPDIFF、DATEDIFF)、日付変換計算関数 (date_add、day、date_format、str_to_date)

1. 時間差関数(TIMESTAMPDIFF、DATEDIFF) MySQLを使用して時間差を計算...

効率を向上できる Linux コマンドエイリアス 10 個のまとめ

序文Linux 環境で作業するエンジニアは、これらの面倒な命令とパラメータのコマンドラインにきっと驚...

フィールドの文字セットの違いによる MySQL のインデックス失敗の解決策

インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...

MySQLログシステムの詳細情報共有

大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...

テーブルの幅を固定して、テキストによって幅が変わらないように設定

ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...

MySQLはconnect_by_isleaf MySQLメソッドまたはストアドプロシージャに似た機能を実装します

最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...

CSS で適応型ディバイダーを巧みに実装する N 通りの方法

分割線はウェブページでよく使われるデザインです。例えば、Zhihuのその他の回答をご覧ください。 こ...

Dockerイメージの圧縮と最適化操作

Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...