大家好,我是Ned👀,一个刚刚入门前端未满两年的大三小学生🌹未来路还长🎉, 一起努力加油吧❤~
前言
最近还是在做那个练习的小项目,做完接收数据并渲染到页面上的时候,发现后端小伙伴又在给我找活干了欸,单纯的渲染这当然是小kiss啦,可这个字段是个什么东西?
"createTime" : "2021-01-17T13:32:06.381Z",
"lastLoginTime" : "2021-01-17T13:32:06.381Z"
直接CV到百度,查出来这一串是一种时间格式,下面放上它的解释:
T表示分隔符,Z表示的是UTC.
UTC:世界标准时间,在标准时间上加上8小时,即东八区时间,也就是北京时间。另:还有别的时间格式和时间戳,想了解的小伙伴可以百度了解一下哦,免得跟我一样,看到了才想着去百度了解,事先了解一下,没坏处的。
了解完了,现在我应该做的,就是将这个时间变成我们大家看得懂的那种格式,并将它渲染到页面上。
开始上手
JavaScript中,处理日期和时间,当然要用到我们的Date对象,所以我们先来写出这个函数的雏形:
const formateDate = (value)=>{
let date = new Date(value)
}
下面要做的应该是定义日期的格式了,这里我用的是yyyy-MM-dd hh:mm:ss
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,那么就不用加。
var a = '6'
a.length = 1?'0'+a:a // '06'
再来说个略微比这个高级一点的:
我们需要两位,所以直接给字符串补上两个零,再用substr去分割一下字符串,就能得到我们想要的了。
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))
}
}
return fmt
}
在刷新一下网页,看看我们成功了没!
成功是成功了,但是我们发现,前面的年竟然被干掉了,他也变成了两位的样子,这可不行啊,我们定义的年份格式可是四位的。
但是别慌,这个只需要把年份单独的去做判断,不与其他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))
}
}
return fmt
}
看一下结果吧:
如果再严谨一点,可以再给函数加个参数,传递一个rule
,这样方便我们后期进行调整数据格式,在定义格式的时候用||
就好了。
let fmt = '传入的新格式' || '默认的格式'
写在最后
如果喜欢我的文章,欢迎一键三连哦亲🐾