JavaScript自定义日期格式化函数
我们对 JavaScript 扩展其中一个较常的做法便是对 Date.prototype 的扩展。因为我们知道，Date 类只提供了若干获取日期元素的方法，如 getDate(),getMinute()……却没有一个转换为特定字符串的格式化方法。故所以，利用这些细微的方法，加以封装，组合我们想要的日期字符串形式。一般来说，该格式化函数可以定义在 Date 对象的原型身上，也可以独立一个方法写出。定义原型方法的操作如 Date.prototype.format = function(date){……}，使用时候直接 new Date().format(YYYY:MM:DD) 即可，仿佛就是 Date 对象的原生方法。但是定义原型方法却略嫌有“入侵” JS 原型的不足。设计 API 之时必须考虑这个问题。我的建议是，用户按照自己的判断去做决定，只是调用的方式不同，不影响过程的逻辑即可。
下面的一个例子就是以独立函数写出的 JavaScript 日期格式化函数，独立的 format 函数。回到格式化的这一知识点上，我们考查的是怎么实现的、运用了哪些原理。传统字符串拼接如 indexOf()+substr() 虽然能够实现，但明显不仅效率低下，而且代码冗长，还是适宜引入正则表达式的方法，先写出字符串正则然后再进行结果的命中匹配。我们先看看来自 Steven Levithan 的例子：
/** * Date Format 1.2.3 * @credit Steven Levithan
该段代码对日期处理考虑得比较周全，我们就进入原理看看它的奥秘，——是怎么处理日期的！
日期字符串模板中，我们约定用 yyyy/mm/dd 等的有意义的符号分别表示日期中某一个元素，像 y 即 year 某一年份，m 即 month 某一月份，d 即 day 某一天，如果是大写的话还要注意区分开来，大写 M 代表分钟，小写 m 是月份。总之，这是一份我们人为规范好的约定，即上述代码所谓的“mask”，遵照此约定输入欲格式化模式的参数，便可将日期类型的值输出可供打印的字符串。至于解析的日期过程是，先按照 Mask 的全部要求，逐个获取到日期的每一个元素（getDate(),getMinute()……可以很快获取到），接着按照 Mask 真实的条件是什么，即Mask.replace(正则, 元素)方法进行字符串模板与元素之间的替换，替换的过程还是以 flag 为标志去逐一匹配的对照表。至于正则部分，关键在于理解 token 和 replace() 函数的过程。参加上述代码注释，即可了解内部细节。
如果每一次都要输入冗长的 Mask 字符串岂不是很累？我们可以通过定义常量的方法缩减我们的工作量：
dateFormat.masks = { "default": "ddd mmm dd yyyy HH:MM:ss", shortDate: "m/d/yy", shortDate2: "yy/m/d/h:MM:ss", mediumDate: "mmm d, yyyy", longDate: "mmmm d, yyyy", fullDate: "dddd, mmmm d, yyyy", shortTime: "h:MM TT", mediumTime: "h:MM:ss TT", longTime: "h:MM:ss TT Z", isoDate: "yyyy-mm-dd", isoTime: "HH:MM:ss", isoDateTime: "yyyy-mm-dd'T'HH:MM:ss", isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'" // 加入中国类型的日期 @Edit 2010.8.11 ,ChineseDate :'yyyy年mm月dd日 HH时MM分' } dateFormat.i18n = { dayNames: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ], monthNames: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ] };
Steve 的 dateFormat 足可以完成大多数日期转化的任务，不过在茫茫代码中，我们找到了更优的解法，不出20行代码，把正则运用得收放自如，就是来自月影前辈的JS ！
Date.prototype.format = function(format) //author: meizz { var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(format)) format=format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); for(var k in o)if(new RegExp("("+ k +")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); return format; } alert(new Date().format("yyyy-MM-dd hh:mm:ss"));
原理上与 Steve 方法相似，但更浓缩的代码，却集技巧性和全面性于一身。从源码第12行开始，test() 方法不但可以检测是否匹配的这个起码功能，而且实际上是有记忆匹配结果的，产生 RegExp.$1 结果组来处理年份（开始我认为 test() 效率高并不会产生结果，实则不然）。然后，再使用 new RegExp 在字符串形式创建正则表达式的实例，又是一个高明的地方，——因为直接与 o 的 hash 表直接对接起来了！继而依法瓢葫芦，先测试是否命中匹配，有的话就进行替换。
另外，代码中的 ("00" + o[k]).substr(String(o[k]).length) 也是有趣的地方，前面加上两个什么意思呢？原来目的是为了取数组的最后两位。这是综合利用 substr() 方法的一个技巧，substr 第一个参数是开始截取的 index，若不指定第二个参数 index 则保留字符串到最后（str.length）。于是，我们事先加多了多少位，原本固定的字符串长度不变（String(o[k].length)）的情况下，那么就留下多少个位。（p.s “00”相当于占位符，亦可用其他字符串“XX”代替无区别）
仍然觉得这段代码有不少的困难？我们尝试把月影的函数重写为可读性较强的代码，原理上趋于一致可是没那么多的技巧，相信这样可以节省大家的时间，回头再去看月影的代码也不迟。
date = { format: function(date, format){ date = new Date(date); // force con. date = { year : date.getFullYear() ,month : date.getMonth() + 1 // 月份， 月份从零算起 ,day : date.getDate() ,hour : date.getHours() ,minute : date.getMinutes() ,second : date.getSeconds() ,milute : date.getMilliseconds() }; var match ,reg = /(y+)|(Y+)|(M+)|d+|h+|m+|s+|u+/g; while((match = reg.exec(format)) != null){ match = match[0]; if(/y/i.test(match)){ format = format.replace(match, date.year); } if(match.indexOf('M') != -1){ format = format.replace(match, date.month); } if(match.indexOf('d') != -1){ format = format.replace(match, date.day); } if(match.indexOf('h') != -1){ format = format.replace(match, date.hour); } if(match.indexOf('m') != -1){ format = format.replace(match, date.minute); } if(match.indexOf('s') != -1){ format = format.replace(match, date.second); } if(match.indexOf('u') != -1){ format = format.replace(match, date.milute); } } return format; } };
2011--1-7:
从 ext 4.0 淘到的日期格式化的代码，怎么讲字符串转为 js 标准日期？看看新 ext 是怎么做的？
/** * 按照特定的格式模式格式化日期。 * Parse a value into a formatted date using the specified format pattern. * @param {String/Date} value 要格式化的值（字符串必须符合JavaScript日期对象的格式要求，参阅parse()）The value to format (Strings must conform to the format expected by the javascript * Date object's parse() method) * @param {String} format （可选的）任意的日期格式化字符串。（默认为'm/d/Y'）(optional) Any valid date format string (defaults to 'm/d/Y') * @return {String} 已格式化字符串。The formatted date string */ date: function(v, format) { if (!v) { return ""; } if (!Ext.isDate(v)) { v = new Date(Date.parse(v)); } return v.dateFormat(format || Ext.util.Format.defaultDateFormat); }
date 构造器还可以通过算出距离1970起为多久的毫秒数来确定日期？——的确，这样也行，——也就说，举一反三，从这个问题说明，js 日期最小的单位是毫秒。
最终版本：
/**
* 日期格式化。详见博客文章：http://blog.csdn.net/zhangxin09/archive/2011/01/01/6111294.aspx
* e.g: new Date().format("yyyy-MM-dd hh:mm:ss")
* @param {String} format
* @return {String}
*/
Date.prototype.format = function (format) {
var $1, o = {
"M+": this.getMonth() + 1, // 月份，从0开始算
"d+": this.getDate(), // 日期
"h+": this.getHours(), // 小时
"m+": this.getMinutes(), // 分钟
"s+": this.getSeconds(), // 秒钟
// 季度 quarter
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds() // 千秒
};
var key, value;
if (/(y+)/.test(format)) {
$1 = RegExp.$1,
format = format.replace($1, String(this.getFullYear()).substr(4 - $1));
}
for (key in o) { // 如果没有指定该参数，则子字符串将延续到 stringvar 的最后。
if (new RegExp("(" + key + ")").test(format)) {
$1 = RegExp.$1,
value = String(o[key]),
value = $1.length == 1 ? value : ("00" + value).substr(value.length),
format = format.replace($1, value);
}
}
return format;
}