手把手教你封装一个日期格式化的工具函数

简介: 最近还是在做那个练习的小项目,做完接收数据并渲染到页面上的时候,发现后端小伙伴又在给我找活干了欸,单纯的渲染这当然是小kiss啦,可这个字段是个什么东西?"createTime" : "2021-01-17T13:32:06.381Z","lastLoginTime" : "2021-01-17T13:32:06.381Z"
大家好,我是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.png

我们渲染上去,看看结果如何?

秒未补零.png

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

不光是秒,其他也应该是这个道理哦!

关于补零

补零的话,有两种方式,先来说说笨笨的这种吧:

我们去判断这个字符串的长度,如果是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
}

在刷新一下网页,看看我们成功了没!

补零结束.png

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

这可咋整.webp

但是别慌,这个只需要把年份单独的去做判断,不与其他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
}

看一下结果吧:

image.png

如果再严谨一点,可以再给函数加个参数,传递一个rule,这样方便我们后期进行调整数据格式,在定义格式的时候用||就好了。

let fmt = '传入的新格式' || '默认的格式'

写在最后

如果喜欢我的文章,欢迎一键三连哦亲🐾
相关文章
|
12月前
|
JSON 小程序 算法
uniapp小程序封装常用工具函数
类似的工具函数还有很多,这里暂时不一一列举了,上面提到的银行卡校验,还可以使用阿里公开的一个校验接口cardNo=银行卡号码&cardBinCheck=true这个接口会返回对应的银行简称银行卡类型,如果想要显示对应的银行logo的话,可以联系我,由于JSON数据太大,没办法全部放在这里。
168 0
|
2月前
|
SQL JSON 数据库
技术笔记:mysqlidb类的使用方法汇总
技术笔记:mysqlidb类的使用方法汇总
13 0
|
3月前
|
搜索推荐 开发工具 Python
2024年最新【Python 基础教程】对时间日期对象的侃侃而谈,面试必考题
2024年最新【Python 基础教程】对时间日期对象的侃侃而谈,面试必考题
2024年最新【Python 基础教程】对时间日期对象的侃侃而谈,面试必考题
|
3月前
|
算法 编译器 C++
【C++入门到精通】新的类功能 | 可变参数模板 C++11 [ C++入门 ]
【C++入门到精通】新的类功能 | 可变参数模板 C++11 [ C++入门 ]
38 1
|
3月前
|
PHP 开发者
【PHP开发专栏】PHP函数定义与调用技巧
【4月更文挑战第29天】本文深入探讨了PHP函数的使用技巧,涵盖函数定义、参数传递、调用方式及高级技巧。PHP函数通过`function`关键字定义,支持默认参数值和可变参数。参数传递分为值传递(默认)和引用传递。函数调用包括普通调用、静态方法调用和匿名函数。高级技巧包括函数回调、模拟函数重载和递归调用。理解并熟练应用这些技巧能提升PHP开发效率和代码质量。
26 0
|
10月前
|
存储 JavaScript 前端开发
带你读《现代Javascript高级教程》二十三、Date类:日期和时间处理(1)
带你读《现代Javascript高级教程》二十三、Date类:日期和时间处理(1)
|
10月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》二十三、Date类:日期和时间处理(2)
带你读《现代Javascript高级教程》二十三、Date类:日期和时间处理(2)
|
9月前
日期处理函数工具封装(持续更新中……)
日期处理函数工具封装(持续更新中……)
26 0
|
存储 SQL 安全
【JavaSE专栏41】Java常用类 Date 解析,高效处理日期问题
【JavaSE专栏41】Java常用类 Date 解析,高效处理日期问题
156 0
|
前端开发 JavaScript API
封装库/工具库中重要概念之日期处理库
在前端开发中,日期处理是一个常见的需求。例如,在Web应用程序中,我们通常需要显示日期、计算日期差值、格式化日期等等操作。然而,JavaScript原生API对日期处理的支持相对较弱,因此在实际开发中,我们通常会使用一些封装库和工具库来简化日期处理。在本文中,我们将探讨前端中一些实用的日期处理库。
90 0