一步步实现JS时间格式化方法

时间:2015年03月9日 作者:剧中人

在前端渲染页面(或列表)中,常常会涉及到时间的显示。通常做法是直接输出时间字段,如:"2015-03-09 13:30:57"。

然而实际项目却是,同一个ajax请求会有不同的脚本会去调用,不同的页面的展示形式也不尽相同,比如会有这样:"13:30 2015年3月9日"。

于是精明的后端小伙伴在将时间以这种方式传递过来:1425879057705。相信这个玩意儿大伙儿都知道,叫时间戳。单纯的表示时间,不包含任何显示样式。

前端童鞋们见到后端小伙伴这么热心的提供时间戳,于是殷勤地献上了菊花,哦不,是代码。

/**
 * 这里演示的是一个列表中的某一项(item),时间以time为字段传递过来
 * 显示字段为screen_time,样式为 13:30 2015年3月9日
 **/
var date = new Date(item.time);
item.screen_time = date.getHours() + ':' + date.getMinutes() + ' ' + (date.getYear()+1900) + '年' + (date.getMonth()+1) + '月' + date.getDate() + '日';

很开森有木有,接着,有个处女座小伙伴提了个建议,列表内容比较多,而且时间这个字段并不是很重要,能不能给它弱化一点捏?

这个简单简单,最终大伙儿决定将时间改为这样:2015年03月09日 13:30。哈哈,这难不倒我小前端,调下代码分分钟的事儿。

var date = new Date(item.time);
item.screen_time = (date.getYear()+1900) + '-' + (date.getMonth()+1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();

貌似有个小细节没有实现,要求显示:2015年03月09日 13:30,但这段代码却输出为:2015年3月9日 13:30。小姑娘又在叫啦,伦家要的不是介个样纸嘛!

莫急莫急,我再给每个数字加个长度判断。

var date = new Date(item.time);
function adaptLength(input){
 return parseInt(input) < 10 ? '0' + input : input;
}
item.screen_time = (date.getYear()+1900) + '-' + adaptLength(date.getMonth()+1) + '-' + adaptLength(date.getDate()) + ' ' + adaptLength(date.getHours()) + ':' + adaptLength(date.getMinutes());

小姑娘开森啦,小前端却被绕成狗了,谁能告诉我代码怎么被写成这个样纸了,这一坨代码,如果没有注释,谁TMD知道显示结果是啥样的。

不行不行,我要给优化优化。终于在众屌拥抱硬盘的夜晚,小前端独自完成了这个简单的时间格式化的方法,为以后撸其他代码节省了一大把时间。刷牙睡觉,睡觉。

最终形成的代码

很简单,仅仅是一个function而已,只需要传入一个时间参数(时间戳 or Date对象)、一个显示模版即可渲染出对应的时间样式。

显示模版中,变量重复,表示使用两字节长度显示,如:2015年03月09日 。

/**
 * @param (timestamp/Date,'{y}-{m}-{d} {h}:{i}:{s}')
 * @param (timestamp/Date,'{y}-{mm}-{dd} {hh}:{ii}:{ss}')
 * 
 * y:year
 * m:months
 * d:date
 * h:hour
 * i:minutes
 * s:second
 * a:day
 */
function parseTime(time,format){
 if(arguments.length==0){
 return null;
 }
 var format = format ||'{y}-{m}-{d} {h}:{i}:{s}';
 if(typeof(time) == "object"){
 var date = time;
 }else{
 var date = new Date(parseInt(time));
 }
 var formatObj = {
 y : date.getYear()+1900,
 m : date.getMonth()+1,
 d : date.getDate(),
 h : date.getHours(),
 i : date.getMinutes(),
 s : date.getSeconds(),
 a : date.getDay(),
 };
 var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g,function(result,key){
 var value = formatObj[key];
 if(result.length > 3 && value < 10){
 value = '0' + value;
 }
 return value || 0;
 });
 return time_str;
}

PS:代码很简单,也可能你有更精妙的实现方法,这都不重要。

重要的是这里的小前端,面对新事物和反复的小纠结,充满兴趣,从不抱怨。

PPS:记录一年半之前,小剧经历的一个销魂的夜晚!