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

在前端渲染页面（或列表）中，常常会涉及到时间的显示。通常做法是直接输出时间字段，如："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：记录一年半之前，小剧经历的一个销魂的夜晚！