検索
ホームページウェブフロントエンドjsチュートリアルjsの時刻と日付の書式設定のカプセル化関数_javascriptスキル

js では、次のようなさまざまな属性メソッドが提供されています。メソッド ... ... などがありますが、ユーザーが自分で提供したテンプレート (パターン) に従って指定された時刻オブジェクトをフォーマットするための Java のようなメソッドは提供されていないため、小さなメソッドをカプセル化しました。みんなが笑ってくれるように -.- 何か良い提案があれば、惜しみなく与えてください。 使用される知識ポイント: 引数: このオブジェクトは、実行される関数とそれを呼び出す関数のパラメーターを表します。これは明示的に作成することはできませんが、長さ属性があり、配列と同様に「[]」構文を使用して取得できますが、配列ではありません。 typeof object: 演算子は、式のデータ型を表す文字列を返します。 6 つの可能性: 「数値」、「文字列」、「ブール値」、「オブジェクト」、「関数」、および「未定義」。 object.constructor: オブジェクトを作成する関数を表します。 オブジェクトは、 オブジェクトまたは関数の名前である必要があります。基になるデータにはこの属性がありません。 exec メソッド: 正規表現パターンを使用して文字列の検索を実行し、検索結果を含む配列を返します。一致するものが見つからない場合は、null を返します。同じ型の一致する要素が配列内に繰り返し現れることはありません。 str.split(Rex|str): 通常のオブジェクトまたは部分文字列を使用して文字列を部分文字列に分割し、結果を文字列配列として返します。 throw Error('msg'): メッセージ情報を含むエラーをスローします。 throw の後には任意の式を続けることができます。 for..in、三項演算子、substr の使用法もいくつかありますが、比較的単純なので説明しません。

コードスニペット:

コードをコピー

コードは次のとおりです:


/**
* ***js の時刻と日付の形式***

*


* テンプレート文字列は厳密な形式を採用しており、制限を超えると例外がスローされます。例: yyyy-mm-yyyy 形式は例外をスローします。 *


* 年の長さ: 2/4 桁
* q の 4 分の 1 桁の長さ
* M 月の長さ: 1 ~ 2 桁
* d-日の長さ: 1 ~ 2 桁
* H 時間の長さ: 24 時間形式の 1 ~ 2 桁、h: 12 時間形式
*分の長さ: 1 ~ 2 桁
* 秒の長さ: 1 ~ 2 桁
* Sミリ秒の長さ: 1桁固定
* @param {日付型オブジェクト} date
* @param {文字列型のテンプレート文字列} fmt
* @return 形式の時刻と日付の文字列
* @著者lyt
​*/
function DateFormat(date, fmt){
If (arguments.length != 2) // パラメータ番号の確認
throw Error('引数の長さが不正です');
If (!date || (typeof date != 'object') || (d.constructor != Date)) // パラメータの有効性検証
throw Error(arguments[0] ':型は Date 型ではありません');
If (/H /.test(fmt) && /h /.test(fmt))
throw Error("時間の形式が間違っています。同じ型は連続して 1 回しか出現できません!");
/* テンプレートパラメータの検証、通常の検証方法 */
var verify = function(Rex){
var arr = new RegExp(Rex).exec(fmt) // 一致する結果の配列を取得します
if (!arr) // 一致が失敗した場合は
を返します return "";
If (fmt.split(Rex).length > 2) // 同じ型が複数回出現します
throw Error("fmt フォーマット エラー: 同じ型は連続して 1 回しか出現できません!");
return arr[0];
};
/**
* 月、日、時、分、秒のユニバーサル一致置換を提供します
* @param {オブジェクトまたは属性キー} r
* @param {r は通常のオブジェクトに対応します} rex
**/
var common = function(r, rex) {
If(レン !=1 && レン !=2)
throw Error("月の形式エラー: M は 1/2 回しか出現できません");
len == 2 ? fmt=fmt.replace(rex, o[r].length==1 ? "0" o[r] : o[r]) : fmt=fmt.replace(rex, o[r]) ;
}
var o = { // データストレージオブジェクト
"y ": date.getFull Year() "", // 年
"q ": Math.floor((date.getMonth() 3) / 3), // 四半期
"M ": date.getMonth() 1 "", // 月
"d ": date.getDate() "", // 日
"H ": date.getHours() "", // 24 時間
"h ": date.getHours() "", // 12時
"m ": date.getMinutes() "", // 分
"s ": date.getSeconds() "", // 秒
"S ": date.getMilliseconds() // ミリ秒
}
for(var r in o) {
var rex、len、temp;
rex = 新しい RegExp(r);
temp = verify(rex) // 結果の文字列と一致します
; len = temp.length; // 長さ
If(!len || len == 0)
続行;
if(r == "y ") {
If(len !=2 && len != 4)
throw Error("年の形式エラー: y は 2/4 回しか出現できません");
len == 2 ? fmt=fmt.replace(rex, o[r].substr(2,3)) : fmt=fmt.replace(rex, o[r]);
} else if(r == "q ") {
if(len != 1)
throw Error("四半期形式エラー: q は 1 回しか出現できません");
fmt=fmt.replace(rex, o[r]);
} else if(r == "h ") {
If(レン !=1 && レン !=2)
throw Error("時間形式エラー: h は 1/2 回しか出現できません");
var h = (o[r] > 12 ? o[r]-12 : o[r]) "";
len == 2 ? fmt=fmt.replace(rex, h.length==1 ? "0" h : h) : fmt=fmt.replace(rex, h);
} else if(r == "S ") {
If(len != 1)
throw Error("ミリ秒形式エラー: S は 1 回しか出現できません");
fmt=fmt.replace(rex, o[r]);
// (r=="M " || r=="d " || r=="H " || r=="m " || r=="s ")
コモン(r, レックス)
                                                                                                              }
fmt を返します;
}

参考までに、デモンストレーション効果をいくつか示します:

コードをコピー コードは次のとおりです:
console.log(DateFormat(new Date(),' yyyy年 q 四半期 M 月 dd 日 HH 時 m 分 s 秒 S ミリ秒'));

コードをコピー コードは次のとおりです:
console.log(DateFormat(new Date(),' yyyyyearyy Q 四半期 M 月 dd 日 HH 時 m 分 s 秒 S ミリ秒'));

コードをコピー コードは次のとおりです:
console.log(DateFormat(new Date(),' yyyy年 q 四半期 M 月 dd 日 Hh 時 m 分 s 秒 S ミリ秒'));

コードをコピーします コードは次のとおりです。
console.log(DateFormat("I am not a time object",'yyyy 年 q 四半期 M 月 dd 日 Hh 時 m 分 s 秒 S ミリ秒'));

コードをコピー コードは次のとおりです:
console.log(DateFormat(new Date(),' yyyy年 q 四半期 MMM 月 dd 日 HH 時 m 分 s 秒 S ミリ秒'));

他のエフェクトを 1 つずつリストすることはしません。興味がある場合は、コードをコピーして直接テストして、バグや最適化が必要な領域がある場合は、自由に修正してください。

上記は、この非常に便利なカプセル化された関数の紹介です。友達が自分のプロジェクトで直接使用できるのではないでしょうか。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか?JavaScriptをインストールするにはどうすればよいですか?Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

クォーツでタスクが開始される前に通知を送信する方法は?クォーツでタスクが開始される前に通知を送信する方法は?Apr 04, 2025 pm 09:24 PM

Quartzタイマーを使用してタスクをスケジュールする場合、Quartzでタスク通知を事前に送信する方法、タスクの実行時間はCron式によって設定されます。今...

JavaScriptでは、コンストラクターのプロトタイプチェーンで関数のパラメーターを取得する方法は?JavaScriptでは、コンストラクターのプロトタイプチェーンで関数のパラメーターを取得する方法は?Apr 04, 2025 pm 09:21 PM

JavaScriptプログラミング、プロトタイプチェーンの関数パラメーターの理解と操作のJavaScriptのプロトタイプチェーンの関数のパラメーターを取得する方法は、一般的で重要なタスクです...

WeChat MiniプログラムWebViewでVUE.JSダイナミックスタイルの変位が失敗した理由は何ですか?WeChat MiniプログラムWebViewでVUE.JSダイナミックスタイルの変位が失敗した理由は何ですか?Apr 04, 2025 pm 09:18 PM

WeChatアプレットWeb-ViewでVue.jsを使用する動的スタイルの変位障害がvue.jsを使用している理由の分析...

TamperMonkeyで複数のリンクの同時GETリクエストを実装し、順番に戻る結果を決定する方法は?TamperMonkeyで複数のリンクの同時GETリクエストを実装し、順番に戻る結果を決定する方法は?Apr 04, 2025 pm 09:15 PM

複数のリンクの同時ゲットリクエストを作成し、結果を返すために順番に判断する方法は? TamperMonkeyスクリプトでは、複数のチェーンを使用する必要があることがよくあります...

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい