js实现通用时间格式转换方法

原创 Dean 程序相关 二维码阅读
2019-04-10 17:59

我们在平常写代码的过程中,经常会遇到格式化时间的需求,而且每次显示时间的格式还不一样,有的需要显示当前的时分,有的需要只需要显示年月日,就算只显示年月日,中间的间隔符还可能不一致,比如2019/04/08,2019-04-08,单位数是否要补0?年份显示在前面还是显示在后面?一个简单的时间格式化充满了太多种可能,我们不可能为每一种格式的显示方式单独定义一个函数,那么我们就需要考虑定制一个通用的时间格式化函数,不管格式怎么变化,都能很好的支持,该怎么做呢?

开始之前,我们先看一个小函数:

const template = (template, data= {}) => {
  return template.replace(/<%=([^%]*)%>/g, function(s, m) {
    return data[m];
  });
};

上面定义了一个模板函数,代码很简单,也不难理解,主要就是利用正则表达式替换了一些特定标志位的值,但是他有什么用呢?比如我们要发起一个请求,但是每次请求的URL部分参数值不太一样,比如:

getList?page=1
getList?page=2

那么我们可以定义API模板为:

const API = 'getList?page=<%=page%>';

我们需要使用拿到真实的api的时候只需要调用:

const url = template(API, {
   page: 2
});

这种模板替换的方式应用还是挺广泛的,比如对于页面中需要动态插入的HTML,我们可以预先定义好待插入的HTML模板,每次插入前通过模板函数替换变化的值然后再插入就好,这样代码比较清晰,也比较好维护,再比如说POST请求中的变化URL也可以通过模板函数的方式实现。

在看完了模板函数后,我们可以按照同样的思维方式定义需动态替换的年月日时分秒的标志位,然后通过正则去动态替换这些特定的标志位就好了。实现的代码如下:

const format = (time, format = 'yyyy-mm-dd') => {
  const d = time ? new Date(time) : new Date();
  const t = (i) => { return (i < 10 ? '0' : '') + i };

  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const day = d.getDate();
  const hour = d.getHours();
  const minutes = d.getMinutes();
  const seconds = d.getSeconds();
  const weekday = d.getDay();

  return format.replace(/(yy){1,2}|m{1,2}|d{1,2}|h{1,2}|i{1,2}|s{1,2}|w{1,2}/gi, function(r) {
    switch (r.toUpperCase()) {
      case 'YY':
        return ('' + year).substr(2);
      case 'YYYY':
        return year;
      case 'M':
        return month;
      case 'MM':
        return t(month);
      case 'D':
        return day;
      case 'DD':
        return t(day);
      case 'H':
        return hour;
      case 'HH':
        return t(hour);
      case 'I':
        return minutes;
      case 'II':
        return t(minutes);
      case 'S':
        return seconds;
      case 'SS':
        return t(seconds);
      case 'W':
        return `星期${['日', '一', '二', '三', '四', '五', '六'][weekday]}`;
      case 'WW':
        return ['Sunday', 'Monday', 'TuesDay', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][weekday];
    }
  });
}

函数中 y代表的是年份 m代表的是月份 d 带边的是天 h代表的是小时 m代表的是分 s代表的是秒 w代表的是周 不同的个数控制显示的格式,比如5是都要显示成05。

调用方式:

format(1554889542170); // 2019-04-10
format(1554889542170, 'yyyy/mm/dd hh:ii:ss'); // 2019/04/10 17:45:42
format(1554889542170, 'yy/m/d hh:ii:ss'); // 19/4/10 17:45:42
format(1554889542170, 'yyyy/mm/dd w'); // 2019/04/10 星期三
format(1554889542170, 'mm/dd/yyyy'); // 04/10/2019

本文地址:https://www.deanhan.cn/js-date-format.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信