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パスワードを変更するいくつかの方法

推薦する

Vueはカスタム命令を使用してページの下部に透かしを追加します

プロジェクトシナリオプロジェクトの背景全体にカスタム透かしを追加します。透かしのテキスト、フォントの...

JavaScriptページングコンポーネントの使い方の詳細な説明

ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...

Linux の一般的なコマンド chmod を使用して、ファイルの権限 777 と 754 を変更します。

よく使用されるコマンドは次のとおりです。 chmod 777 文件或目錄例: chmod 777 /...

Mysqlがデータベースに接続するときのホストとユーザーのマッチングルールについての簡単な説明

--データベースに接続するとき、ホストとユーザーのマッチングルール公式ドキュメント: https:/...

Centos ベースイメージの作成方法

序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...

アバターと国旗の統合を実現する1行のCSSコード

今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...

INS と DEL を使用してドキュメントの変更をマークする方法の詳細な説明

ins と del は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、...

Nginx ソースコードのコンパイルとインストールのプロセス記録

rpm パッケージのインストールは比較的簡単なので、ここでは説明しません。ほとんどのオープンソース ...

MySql データ型チュートリアル例の詳細な説明

目次1. 概要2. MySQLデータ型の詳細な説明1) 文字列型2) 整数型3) 浮動小数点型4) ...

なぜ IE6 が最も多くの人に使用されているのでしょうか?

まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...

Tomcatがセッションを管理する方法の例

ConcurrentHashMapを学習しましたが、どのように適用すればよいかわかりませんか? To...

iframe を使用して Web ページに天気の影響を表示します

CS: ...コードをコピーコードは次のとおりです。 *{マージン:0;パディング:0;リストスタイ...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

MySQLデータベースは何をするのか

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...