js の通常形式の日付と時刻に 0 を自動的に追加する 2 つのソリューション

js の通常形式の日付と時刻に 0 を自動的に追加する 2 つのソリューション

背景

日付と時間をフォーマットする必要は非常に一般的であり、ツールベースの変換方法も多数あります。たとえば、2022-3-4 のような日付形式を 2022-03-04 に変換する必要があります。これは、1 桁の月または日の前に自動的に 0 が付加されることを意味します。これも、moment.js や dayjs などのサードパーティライブラリの API を使用すると簡単に実現できます。自分で実装してみましょう。

解決策1

アイデア:

まず従来のアプローチを見てみましょう。日付 2022-3-4 を例に挙げます。まず、文字列を - に従って分割して配列を取得し、次に 3 や 4 などの 1 桁の日付を識別します。<10 の場合は先頭に 0 を追加します。それ以外の場合は操作は実行されません。

コード:

関数formatDate(str) {
  // - 記号に従って str を分割して返します
    。スプリット("-")
    .map((アイテム) => {
      // +item は項目文字列を数値に変換します // 10 未満の場合はプレフィックス 0 を追加します
      (+アイテム < 10) の場合 {
        "0" + +item を返します。
      }

      // 値が10より大きい場合は0を加算する必要はありません
      返品商品;
    })
    .join("-"); // 最後に再組み立てします }

// テスト formatDate("2022-03-4"); // 出力 '2022-03-04'

上記のソリューションは、2022-3-4 から 2022-03-04 などの単純な変換にのみ適しています。2022-3-4 1:2:3 などのより複雑な日付形式や日付と時刻の形式は一致しません。 また、ここでは - の形式のみが認識されます。2022/3/4 や 2022.3.4 もあったらどうなるでしょうか?

解決策2

アイデア:

正規表現の使い方を見てみましょう。正規表現を使用すると、コードが簡素化されるだけでなく、より多くの状況に対応しやすくなります。

私たちの基本的な考え方は、先読みと後読みを使用して日付コネクタの中央にある数字を識別し、その数字に 0 を埋め込む必要があるかどうかを判断することです。書き始める前に、いくつかの正規表現の使い方を理解しておきましょう。

1. 前を見る: (?=)、後ろを見る: (?<=)、

簡単に言えば、

// 先読み:
A(?=B) //Bより前にAがあるか検索

// ルックバック:
(?<=B)A //Bの後のAを検索

// 否定先読み:
A(?!B) // Bが後に続かないAを探す

// 否定的なルックバック:
(?<!B)A // B が前にない A を検索

ここでは、-、/、などの文字間の数字を識別するためにこれを使用できます。

2. 単語境界: \b

  • 単語とは、\w が一致できる文字、つまり数字、大文字と小文字、アンダースコア [0-9a-zA-Z_] を指します。
  • 境界線はプレースホルダー文字の周囲のスペースを指します。

ここでは、日付の先頭または末尾の数字を識別するために使用できます。たとえば、2022-3-4 1:2:5 では、4 の後のギャップ、1 の前のギャップ、5 の後のギャップはすべて単語の境界です。

3. replace メソッドは、一致する文字列 $& を置き換えます。

1 桁の数字を一致させた後は、0 を追加する必要があります。$& は一致した数字を表し、0$& を使用して 0 を追加できます。

コード:

// $& を使って一致させます function formatDate(str) {
  /*  
        replace の最初のパラメータは通常の (?<=\/|-|\.|:|\b)\d{1} は後読みを使用して、/ または - または。または: または T の後の単語境界または数字を検索します\d{1}(?=\/|-|\.|:|\b) は先読みを使用して、/ または - または。または: または T の前の単語境界または数字を検索します。replace の 2 番目のパラメータ "0$&" は、一致した文字列の先頭に 0 を追加します

    */
  str.replace(/(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g, "0$&"); を返します。
}

// 一致するように $1 を使用します function formatDate(str) {
  /*
        replace の最初のパラメータは上記と同じです。2 番目のパラメータは関数です。最初のパラメータは最初に一致したパラメータです。関数内で 0 を処理して埋めることができます。
    */
  str.replace() を返す
    /(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g,
    関数 ($1) {
      "0" + $1 を返します。
    }
  );
}

// テスト formatDate("2022-3-4 1:2:3"); // 出力 '2022-03-04 01:02:03'
formatDate("2022/3/4"); // 出力 '2022/03/04'
formatDate("2022.3.4"); // 出力 '2022.03.04'
formatDate("2020/8/9T1:2:3"); // 出力 '2020/08/09T01:02:03'

要約する

ここでは通常の文字列変換のみを実行しましたが、これにも欠点があります。

  1. 日付検証は組み込まれていません
  2. 01/10/07 などの短縮日付形式は考慮されません。

興味のある友人は、このアプリを試してみると、変換方法がさらに充実するでしょう。

参照する

  • js の通常の先読みと後読み、および非キャプチャグループ
  • 正規表現の境界
  • 文字列.prototype.replace()
  • 主張
以下もご興味があるかもしれません:
  • js で数値文字列を 0 で埋める (js はゼロで埋めます)
  • JavaScript で先頭に 0 (ゼロパディング) を追加するいくつかの方法
  • 数値に「0」を追加する JavaScript メソッドの 5 つの例

<<:  スーパーバイザーによるDockerfileのマルチサービスイメージパッケージ操作

>>:  MySQLパスワードを変更するいくつかの方法

推薦する

Nginxはドメイン名のアクセス方法を定義しています

最近Nginxを構築しているのですが、ドメイン名でアクセスできません。 nginx 構成ファイル n...

MySQLデータベースインデックスの欠点と適切な使用

目次インデックスの適切な使用1. 通常のインデックスのデメリット2. 主キーインデックスの落とし穴3...

Ubuntu 18.04にmysql5.7をインストールする

Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...

Vue で動的パラメータと計算プロパティを使用する方法

1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...

Vueは遅延読み込みによりページの応答速度を向上

目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...

Nginxドメイン名転送のhttpsアクセスの実装

事前に一言:突然、複数のドメイン名のアクセスを https に転送するというタスクを受け取りました。...

VMware Workstation 14 Pro(仮想マシン)にシステムをインストールする方法の詳細な説明

この記事では、VMware Workstation 14 Pro (仮想マシン) にシステムをインス...

MySQL データベース トランザクション例のチュートリアル

目次1. トランザクションとは何ですか? 2. トランザクションに関連するステートメントは、挿入、削...

ffmpeg コマンドラインを使用してビデオを変換するためのサンプルコード

この記事の本文を始める前に、まず ffmpeg プログラムをインストールする必要があります (Lin...

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

Centos8 は kdc 暗号化に基づいて nfs を構築します

目次構成nfs サーバー (nfs.skills.com) nfs クライアント (client.s...

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...