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

推薦する

体験をデザインする: ボタンには何があるか

<br />最近、UCDChina は「インターフェース上のテキストに注意を払う」という...

MySQL 5.6 での table_open_cache パラメータの最適化と適切な構成の詳細な説明

1. はじめにtable_cache は非常に重要な MySQL パフォーマンス パラメータであり、...

Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)

1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...

jsはショッピングカートの加算と減算、価格計算機能を実現します

この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...

XHTML Web ページ チュートリアル

この記事は主に、初心者に XHTML の基本的な知識と、XHTML と HTML の違いを理解しても...

Baidu デッドリンクファイルを作成する方法

Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...

HTML いくつかの特別な分割線効果

1. 基本ライン 2. 特殊効果(効果は独立しておらず、互いに組み合わせることができます) 1. 両...

Linux環境でのDockerインストールチュートリアル

1. 設置環境Dockerは次のCentOSバージョンをサポートしていますCentOS 6.5 (6...

JavaScript スロットリングとアンチシェイクに関する簡単な説明

目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...

CSSでフォントアイコンを使用する方法をお教えします

まず、フォントアイコンとは何でしょうか?表面的にはアイコンですが、実際はテキストです。テキストの設定...

js の一般的でない演算子と演算子の概要

一般的な演算子と JavaScript の演算子の概要カテゴリオペレーター算術演算子+、–、*、/、...

div+cssとウェブ標準ページの利点

div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...