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

推薦する

MySQLとOracleの違いを簡単に説明してください

1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...

MySql 5.6.35 winx64 インストール詳細チュートリアル

注: データベースのバージョンの問題により、プロジェクトの起動時にエラーは発生しませんでしたが、デー...

Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する方法

序文:この記事では、Ant Design Proログイン機能にグラフィック検証コードコンポーネントを...

Firefoxでリンクをクリックしたときに点線の枠線を削除する方法

今日、ブラウザの互換性の問題にいくつか遭遇しました。そのうちの 1 つは奇妙に感じました。Firef...

Dockerのインストール、イメージの作成、NodeJSプログラムの読み込みと実行の詳細なプロセス

システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

SpringBoot でマイクロサービスを構築するために Docker を使用した実際の記録を分析する

それは何ですか? Spring Boot は、Spring オープンソース組織のサブプロジェクトであ...

HTML ページ ヘッダー コード例の詳細な説明

知識ポイント1: ヘッダー情報にWebページのベースURLを設定するベース URL の本質は、ハイパ...

MySQL 5.7 以降のバージョンのダウンロードとインストールのグラフィック チュートリアル

1. ダウンロード1. MySQL公式サイトのダウンロードアドレス: https://downloa...

JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...

Linux で pyenv をインストールする方法

前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...

CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)

序文「画像処理というと、PhotoShop などの画像処理ツールを思い浮かべることが多いです。フロン...

HTML タグ: サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。関連記事: HTML タ...

Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...

MySQLの3つの用途と違いは同等ではない

MySQLでは判定記号がよく使われますが、等しくない記号はもっと一般的に使われます。次の3つの等しく...