今天给大家分享的是“时间格式化”，那什么是时间格式化呢？

其实就是把一个时间格式的字符串转换为我们所需要的格式，假设一个实战场景：客户端通过Ajax或者JSONP从服务器获取一堆JSON格式的数据，其中某个属性的属性值是时间“2016-07-01 18:00:00”，但是需要我们呈现在界面上的格式是“2016年07月01日”或者“07-01 18:00”等，这样的话就需要我们把获取的时间字符串进行格式化。

解决这个需求有多种办法，目前大部分公司（包含BAT的一些部门）都是在采用“字符串先拆分，获取到每一项的数据后，在拼接成我们想要的格式”或者“首先把时间字符串转换为标准的时间对象，然后通过时间对象提供的一些方法获取到年月日等信息，最后在进行字符串的拼接”

方案一：字符串拆分+拼接

    String.prototype.formatTime = function () {
        var ary = this.split(" ");//->["2016-07-01", "18:00:00"]
        var str1 = ary[0];//->"2016-07-01"
        var str2 = ary[1];//->"18:00:00"
        var ary1 = str1.split("-");//->["2016", "07", "01"]
        var ary2 = str2.split(":");//->["18", "00", "00"]
        var res = "";
        res += ary1[0] + "年";
        res += ary1[1] + "月";
        res += ary1[2] + "日 ";
        return res;
    };
    var str = "2016-07-01 18:00:00";
    console.log(str.formatTime());

方案二：字符串转换为标准时间格式对象

    String.prototype.formatTime = function () {
        var str=this.replace(/-/g,"/");//->IE下不识别“2016-07-01”，可以识别“2016/07/01”
        var time = new Date(str),
            year = time.getFullYear(),
            month = time.getMonth() + 1,
            day = time.getDate();
        return year + "年" + month + "月" +day + "日";
    };
    var str = "2016-07-01 18:00:00";
    console.log(str.formatTime());

以上的两种方式虽然可以解决需求，但是如果我们需要格式化的时间格式变了，那么对应的代码也要随之修改，没有达到公用的效果，珠峰培训结合正则及字符串的replace方法，研发一套便于扩展和维护的方法。在编写方法之前，我们先复习一下replace结合正则表达式和回调函数使用的一些基础知识。

    //->replace:当第一个参数为正则,第二个参数为一个回调函数(cb)
    //1)cb执行几次取决于正则和字符串所匹配的次数，在下面的案例中，正则和字符串匹配2次，我们的cb执行两次
    //2)每一次执行cb都会给其传递对应的参数值，而且这个参数值和每一次执行exec获取到的结果一模一样:第一项都是当前大正则捕获的内容，后面包含的是小分组本次捕获的内容、开始的索引、原始的字符串...
    //3)每一次执行cb我们可能会返回一些内容(RETURN)，我们在cb中return的是啥，那么都相当于把当前大正则匹配的内容替换成啥
    var str = "zhufeng2015~~~zhufeng2016";
    var reg = /[a-zA-Z]+(\d+)/g;
    str = str.replace(reg, function () {
        //->arguments中记录了每一次捕获的结果,和exec捕获的内容相同
        return "@" + arguments[1];
    });
    console.log(str);//->"@2015~~~@2016"

好了接下里就看一下我们最后格式化时间字符串的完整代码吧~~

方案三：使用正则处理时间字符串

    ~function (pro) {
        //->formatTime:用来把指定的时间字符串按照既定的模板格式进行格式化
        function formatTime(template) {
            //->template:我们用来格式化时间的模板,不传递的话也有一套默认的模板
            template = template || "{0}年{1}月{2}日 {3}时{4}分{5}秒";

            //->this是我们要格式化的时间字符串
            //1)把我们需要格式化的时间字符串中的数字都获取到,并且保存在一个数组中
            var ary = this.match(/\d+/g);

            //2)到既定的模板中获取{n}和对应的数字n,并且到ary中通过n获取到对应的内容,用获取的内容把{n}替换掉即可
            return template.replace(/\{(\d+)\}/g, function () {
                var index = arguments[1],
                item = ary[index];
                !item ? item = "00" : null;
                item.length < 2 ? item = "0" + item : null;
                return item;
            });
        }

        //->把方法扩展到内置类的原型上
        pro.formatTime = formatTime;
    }(String.prototype);

    var str = "2016-7-1 18:00:00";

    str = str.formatTime();
    console.log(str);//->"2016年07月01日 18时00分00秒"

    str = str.formatTime("{0}年{1}月{2}日 {3}:{4}:{5}");
    console.log(str);//->"2016年07月01日 18:00:00"

    str = str.formatTime("{1}-{2} {3}:{4}");
    console.log(str);//->"07-01 18:00"

此方法目前已经被很多的大公司采用，如果想学习到更多实战的技巧，敬请关注珠峰培训技术资料。同时也欢迎大家参加珠峰培训JS+HTML5+NODE的一系列前端开发课程，在这里你能学到从基础到深入JS编程，也能学到当下最火的HTML5移动端开发、以及最前沿的框架和NODE...