封装一个日期格式化的工具函数

前言

最近还是在做那个练习的小项目，做完接收数据并渲染到页面上的时候，发现后端小伙伴又在给我找活干了，渲染这当然是小kiss啦，可这个字段是什么东西？

1 2	"createTime" : "2021-01-17T13:32:06.381Z", "lastLoginTime" : "2021-01-17T13:32:06.381Z"

直接CV到百度，查出来这一串是一种时间格式，下面放上它的解释：

T表示分隔符，Z表示的是UTC.
UTC：世界标准时间，在标准时间上加上8小时，即东八区时间，也就是北京时间。

另：还有别的时间格式和时间戳，想了解的小伙伴可以百度了解一下哦，免得跟我一样，看到了才想着去百度了解，事先了解一下，没坏处的。

了解完了，现在我应该做的，就是将这个时间变成我们大家看得懂的那种格式，并将它渲染到页面上。

开始上手

JavaScript中，处理日期和时间，当然要用到我们的Date对象，所以我们先来写出这个函数的雏形：

1
2
3

const formateDate = (value)=>{
	let date = new Date(value)
}

下面要做的应该是定义日期的格式了，这里我用的是yyyy-MM-dd hh:mm:ss

1	let fmt = 'yyyy-MM-dd hh:mm:ss'

因为年月日时分秒这里都是两位或者两位以上的，所以在获取的时候我是这样定义的：

const o = {
  'y+': date.getFullYear(),
  'M+': date.getMonth()+1,
  'd+': date.getDate(),
  'h+': date.getHours(),
  'm+': date.getMinutes(),
  's+': date.getSeconds()
}

首先先解释一下getMonth()+1，去查看Date文档就知道，这个函数的返回是0-11，我们正常月份都是1-12，所以加上1，才是正确的月份。

定义了规则之后，我们循环它，应该就可以得到我们想要的结果了吧。

for(let k in o ){
  if(new RegExp(`(${k})`).test(fmt)){
    const val = o[k] + ''
    fmt = fmt.replace(RegExp.$1,val)
  }
}

我们继续来解释一下代码，首先fmt.replace是代表我们要做一个替换，RegExp.$1就是获取到上面的值表达式内容，将这个内容，换成val中的值，之所以上面加了一个空字符串，是为了将val变成字符串的形式，以防再出纰漏。

我们渲染上去，看看结果如何？

秒未补零

日期被我们成功的转化为了，我们能看得懂的东西，但是我们可以看到，秒这里，只有一位，也就是说，在秒只有个位数的情况下，我们应该给予它一个补零的操作。

不光是秒，其他也应该是这个道理哦！

关于补零

补零的话，有两种方式，先来说说笨笨的这种吧：

我们去判断这个字符串的长度，如果是1，我们就加个零，如果不是1，那么就不用加。

1 2	var a = '6' a.length = 1?'0'+a:a // '06'

再来说个略微比这个高级一点的：

我们需要两位，所以直接给字符串补上两个零，再用substr去分割一下字符串，就能得到我们想要的了。

1 2	var b = '6' var result = ('00'+b).substr(b.length) // '06'

那么我们去改一下上面的代码，就得到了下面的函数：

const formateDate = (value)=>{
	let date = new Date(value)
	let fmt = 'yyyy-MM-dd hh:mm:ss'
	const o = {
      'y+': date.getFullYear(),
      '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)){
        const val = o[k] + ''
        fmt = fmt.replace(RegExp.$1,RegExp.$1.length==1?val:('00'+val).substr(val.length))
      }
    }
}

在刷新一下网页，看看我们成功了没！

补零结束

成功是成功了，但是我们发现，前面的年竟然被干掉了，他也变成了两位的样子，这可不行啊，我们定义的年份格式可是四位的。

但是别慌，这个只需要把年份单独的去做判断，不与其他2位的格式一起进行操作就能解决啦，所以我们最终的函数是这样的：

const formateDate = (value)=>{
	let date = new Date(value)
	let fmt = 'yyyy-MM-dd hh:mm:ss'
	if(/(y+)/.test(fmt)){
        fmt = fmt.replace(RegExp.$1,date.getFullYear())
    }
	const 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)){
        const val = o[k] + ''
        fmt = fmt.replace(RegExp.$1,RegExp.$1.length==1?val:('00'+val).substr(val.length))
      }
    }
}