JavaScript形式string_javascriptスキルの適用

WBOY
リリース: 2016-05-16 18:31:16
オリジナル
1067 人が閲覧しました

設計を経て、ようやくこの機能が完成しました。この JS を導入すると、フォーマット文字列を自分で設定して、カスタマイズされたさまざまな日付フォーマットを出力できるようになります。

フローチャート
clip_image002
いわゆる書式文字列は、実際には特定の文字を含む文字列であり、その実際の文字列に基づいていることがわかります。意味は指定した値に置き換えられます。
この記事では、Date オブジェクトを例としてのみ使用します。実際には、書式文字列の値はこれにとどまりません。フォーマット文字列はどのような状況で使用できますか?この記事の最後までに答えが見つかることを願っています。
アルゴリズムの紹介
以下では、例を使用して書式文字列アルゴリズムを説明します。この例では、2008-8-8 のように日付の「日」部分をフォーマットします。フォーマット文字列が「d」の場合は「8」を出力し、フォーマット文字列が「dd」の場合は「」を出力します。 08"; if 書式文字列が「dddd」の場合は「five」が出力され、書式文字列が「dddd」の場合は「friday」が出力されます。パラメータ d は Date オブジェクトで、形式は文字列です:

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

//Format Day
function FormatDay(d, format){
while(format.indexOf("d") > -1){
var regex = /[d] /;
format = format.replace(regex,function(w){
switch(w.length){
case 0:break;
case 1:
return d.getDate();
ケース 2:
return d.getDate() ケース 3:
switch(d.getDay() ) {
ケース 0:
リターン "日";
ケース 1:
ケース 2:
リターン "二";
return "三";
ケース 4:
return "四";
ケース 6:
リターン "六";
}
デフォルト:
switch(d.getDay()){
ケース 0:
「日曜日」を返す;
ケース 1:
「月曜日」を返す
ケース 2:
「火曜日」を返します。
ケース 3:
「水曜日」を返します。
ケース 5:
"金曜日" を返す;
"土曜日" を返す
}
}


ご覧のとおり、コア部分は次のとおりです:




コードをコピーします


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

while (format.indexOf("d") > -1) {
var regex = /[d] /;
format = format.replace(regex, function(w) ) { switch (w.length) { ケース 0: ブレーク; ケース 1: //todo ケース 2: //todo
ケース 3:
/ /todo
ケース x:
//todo
デフォルト:
//todo
}
});
解释:
1. 使用while循环,只要格式字符串format中含有特定字符就一直执行下去;
2. 声明一个正则表达式对象/[x]+/,其中x表示特定字符;
3. 使用string对象的replace方法替换特定字符;
4. 根据匹配到的特定字符串的长度,执行不同的操作(在本示例中,“d”、“dd”、“ddd”代表不同的含义)。
格式字符串说明
以508-1-9 14:3:5为例

格式字符串

描述

示例

y

格式化年。年份由世纪+年代组成。

“y”输出8

“yy”输出08

“yyy”输出508

“yyyy”输出0508

“yyyyyy”输出000508

M

格式化月。

“M”输出1

“MM”输出01

“MMM”或更多输出一月

d

格式化日。

“d”输出9

“dd” 输出09

“ddd” 输出一

“dddd” 或更多输出星期一

H,h

格式化小时。其中H表示24小时制,h表示12小时制。

“H”输出14

“HH” 或更多输出14

“h”输出2

“hh” 或更多输出02

m

格式化分钟。

“m”输出3

“mm” 或更多输出03

s

格式化秒

“s”输出5

“ss” 或更多输出05


更多的设置,大家可以自己动手做一下。

示例
引用此js后,在浏览器的控制台中测试结果如下:
clip_image003
如何,有没有心动的感觉……

顺便说一下各浏览器的控制台呼出方式:

浏览器

快捷键

Chrome

Ctrl + Shift + J

IE8

F12

FireFox

忘了。FireFox中的控制台不是原生的,是一个叫FireBug的插件。


ソースコード
次のコードはDateExtension.jsからダウンロードできます
コードをコピーします コードは次のとおりです:

Date.prototype.ToString = function(format){
if(typeof(format) == "string"){
return FormatDateTime(this, format); >}
return FormatDateTime(this, "yyyy-MM-dd HH:mm:ss");
}
//フォーマット DateTime オブジェクト
function FormatDateTime(d, format){

format = FormatDay(d, format);
format = FormatDay(d, format); FormatMinute(d, format);
format = FormatSecond(d, format);
return format;
}
// 年をフォーマットします。 var fullyear = d.getFull Year(); // 年
var 世紀 = Math.floor(fullyear / 100); // 年
var year = fullyear % 100; // 年
.indexOf ("y") > -1){
var regex = /[y] /;
format = format.replace(regex,function(w){
//文字列をフォーマットしますそれ以外の場合は、世紀年が返されます。
case 0:break;
case 1:

ケース 2:



var CenturyPart = "";
for(var i = 0; i < w.length - 2 - Century.toString().length; i ){
centuryPart = "0";
centuryPart = Century;
return CenturyPart yearPart;
}
return format;
}
関数 FormatMonth (d, format){
var month = d.getMonth() 1;
while(format.indexOf("M") > -1){
var regex = /[M] /;
format = format .replace(regex,function(w){
switch(w.length){
case 0:break;
case 1:
return month;
case 2:
return month <10 ? "0" month : month;
default:
switch(month){
case 2 :
「2 月」を返す;
ケース 3:
「3 月」を返す;
ケース 4:
「4 月」を返す;
「5 月」を返す;
ケース 6:
ケース 7:
ケース 8:
ケース 9:
「9 月」を返します。
ケース 10:
「10 月」を返します。
ケース 12:
「12 月」を返します。 🎜>}
}
});
}
return format;
}
//フォーマット day
function FormatDay(d , format){
while( format.indexOf("d") > -1){
var regex = /[d] /;
format = format.replace(regex,function(w) {
switch(w.length) ){
ケース 0:break;
ケース 1:
return d.getDate();
return d.getDate() < getDate() : d.getDate();
ケース 3:
switch(d.getDay()){
ケース 0:
「日」を返す
ケース 1:
リターン "一";
リターン "二";
ケース 4:
リターン "四"; >ケース 5:
return "五";
ケース 6:
return "六";
デフォルト:
switch(d .getDay()){
ケース 0:
を返す "日曜日";
ケース 1:
を返す "月曜日";
ケース 2:
を返す "火曜日";水曜日";
ケース 4:
"木曜日" を返す;
ケース 5:
"金曜日" を返す;
ケース 6:
"土曜日" を返す;
}
}
});
}
return format;
}
//時間の形式
//H: 24 時間 System
//h: 12 時間format
function FormatHour(d, format){
while(format.indexOf("H") > -1){
var regex = /[H ] /;
format = フォーマット。 replace(regex,function(w){
switch(w.length){
ケース 0:break;
ケース 1:
return d.getHours ();
デフォルト:
return d.getHours() < 10 ? "0" d.getHours();
}
while(format.indexOf(") h") > -1){
var regex = /[h] /;
format = format.replace(regex,function(w){
switch(w.length){
ケース 0:break;
ケース 1:
return d.getHours() - 12 :
default:
var t = d .getHours() > d.getHours() - 12 :
t : t; >}
return format;
}
//分をフォーマットします
function FormatMinute(d, format){
while(format.indexOf( "m") > -1){
var regex = /[m] /;
format = format.replace(regex,function(w){
switch(w.length){
case 0:break;
case 1 :
return d.getMinutes();
default:
return d.getMinutes() }
});
}
return format;
}
//フォーマット秒
function FormatSecond(d, format){
while(format.indexOf("s") > ; -1){
var regex = /[s] /;
format = format.replace(regex,function(w){
switch( w.length){
case 0:break ;
ケース 1:
return d.getSeconds();
default:
return d.getSeconds() }
});
}

}


この記事で使用されているリソース
DateExtension.js のダウンロード
W3C School の閲覧
Date オブジェクトに関するサポートの詳細を参照
js によって実装された日付操作クラス DateTime 関数コード

pdf 版ダウンロードアドレス

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート