ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript形式string_javascriptスキルの適用
設計を経て、ようやくこの機能が完成しました。この JS を導入すると、フォーマット文字列を自分で設定して、カスタマイズされたさまざまな日付フォーマットを出力できるようになります。 格式字符串 描述 示例 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 浏览器 快捷键 Chrome Ctrl + Shift + J IE8 F12 FireFox 忘了。FireFox中的控制台不是原生的,是一个叫FireBug的插件。
フローチャート
いわゆる書式文字列は、実際には特定の文字を含む文字列であり、その実際の文字列に基づいていることがわかります。意味は指定した値に置き換えられます。
この記事では、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] /;
ケース x:
//todo
デフォルト:
//todo
}
});
解释:
1. 使用while循环,只要格式字符串format中含有特定字符就一直执行下去;
2. 声明一个正则表达式对象/[x]+/,其中x表示特定字符;
3. 使用string对象的replace方法替换特定字符;
4. 根据匹配到的特定字符串的长度,执行不同的操作(在本示例中,“d”、“dd”、“ddd”代表不同的含义)。
格式字符串说明
以508-1-9 14:3:5为例
更多的设置,大家可以自己动手做一下。
示例
引用此js后,在浏览器的控制台中测试结果如下:
如何,有没有心动的感觉……
顺便说一下各浏览器的控制台呼出方式:
ソースコード
次のコードは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 版ダウンロードアドレス