时间戳如何转换为时间字符串？附原理解读实现

时间戳如何转换为时间字符串

我们在开发过程中往往会遇到需要显示日期的情况，这个时候我们一般去服务器拉取数据，而服务器返回给我们的是一堆数字，也就是所谓的时间戳。比如在做评论模块时，需要显示评论时间等等。
这个时候我们该怎么处理时间戳变成正常的显示方式呢？
时间戳的数字计时从1970年1月1日0：00开始，现在基于我现在的时间最新数据为： 1606790769311。
这么大一串数字我们该如何转换呢？下方实现请慢慢揣摩。

源码实现

function formatDate(date, fmt) {
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
            }
        }
        return fmt;
    };

    function padLeftZero(str) {
        return ('00' + str).substr(str.length);
    };

测试

 var date = new Date(Date.now());
    var time = formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    console.log(time);

解读

相信大家大部分都能看懂，这里主要解读下实现核心思想吧。

function formatDate(date, fmt)

这个方法需要传入两个参数 一是转化为时间对象的时间戳 而是需要展示的样式
至于为什么要转化为时间对象是因为可以采用时间对象的内置api更好的获取我们想要的数据，比如获取年份，我们可以直接 date.getFullYear() 就可以得到。

 if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }

这里的用处是用正则验证来验证你传入的年份显示 yyyy 根据你传y的数量来显示年份，用substr来裁剪
substr一个参数时，即返回从 fmt 的开始位置到结尾的字串。
eg: yy 则显示 20 yyyy 则显示 2020 yyy则显示 020
RegExp.$1的作用是 与 regexp 中的第 1 子表达式相匹配的文本。简单理解就是匹配你传入的参数中的yyy部分。

采用replace方法来将处理后的年份数据与之前的y模块进行替换，这样就完成了年份的显示了。

let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
            }
        }
        return fmt;

定义一个o对象，添加属性 月份 日期 小时 分钟 秒数
这里月份是从0开始所以得加一

遍历o对象，将传入的字符样式与o的键key对应正则匹配，满足则将对应的数据拼接到str上
再判断传入的是否是一个值，是则不变，如果超过了一个则需要考虑 个位数值的转变的 1 应该显示 01
所以需要用另一方法去转变 padLeftZero 最后返回处理好的字符

 function padLeftZero(str) {
        return ('00' + str).substr(str.length);
    };

传值示范： 7 => ‘007’.subatr(1) => ‘07’
17 => ‘0017’.subatr(2) => ‘17’
173 => ‘00173’.subatr(3) => ‘73’
因为这里的最大值不会超过60 所以第三种情况不存在的，这样就完美解决了值的显示

over !