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

简介: 最近还是在做那个练习的小项目,做完接收数据并渲染到页面上的时候,发现后端小伙伴又在给我找活干了欸,单纯的渲染这当然是小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 = '传入的新格式' || '默认的格式'

写在最后

如果喜欢我的文章,欢迎一键三连哦亲🐾
相关文章
|
9月前
|
JSON 小程序 算法
uniapp小程序封装常用工具函数
类似的工具函数还有很多,这里暂时不一一列举了,上面提到的银行卡校验,还可以使用阿里公开的一个校验接口cardNo=银行卡号码&cardBinCheck=true这个接口会返回对应的银行简称银行卡类型,如果想要显示对应的银行logo的话,可以联系我,由于JSON数据太大,没办法全部放在这里。
128 0
|
6月前
日期处理函数工具封装(持续更新中……)
日期处理函数工具封装(持续更新中……)
18 0
|
7月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》二十三、Date类:日期和时间处理(2)
带你读《现代Javascript高级教程》二十三、Date类:日期和时间处理(2)
|
10月前
|
存储 SQL 安全
【JavaSE专栏41】Java常用类 Date 解析,高效处理日期问题
【JavaSE专栏41】Java常用类 Date 解析,高效处理日期问题
|
10月前
|
存储 JavaScript 前端开发
《现代Javascript高级教程》Date类:日期和时间处理
Date类:日期和时间处理 引言 在JavaScript中,Date类是用于处理日期和时间的内置类。它提供了一系列属性和方法,使我们能够操作和管理日期、时间、时区等相关信息。本文将详细介绍Date类的属性、常用方法以及应用场景,并提供相应的代码示例。
61 0
|
前端开发 JavaScript API
封装库/工具库中重要概念之日期处理库
在前端开发中,日期处理是一个常见的需求。例如,在Web应用程序中,我们通常需要显示日期、计算日期差值、格式化日期等等操作。然而,JavaScript原生API对日期处理的支持相对较弱,因此在实际开发中,我们通常会使用一些封装库和工具库来简化日期处理。在本文中,我们将探讨前端中一些实用的日期处理库。
70 0
|
前端开发
前端项目实战202-日期函数动态得封装
前端项目实战202-日期函数动态得封装
48 0
代码优雅进阶——代码生成多个日期
代码优雅进阶——代码生成多个日期
【C++要笑着学】从零开始实现日期类 | 体会代码的复用 | 提供完整代码(二)
啊,朋友们好啊。我是柠檬叶子C,上一章我们讲解了运算符重载,本篇将手把手从零开始一步步实现一个Date类,将会对每个步骤进行详细的思考和解读。
72 0
【C++要笑着学】从零开始实现日期类 | 体会代码的复用 | 提供完整代码(二)
|
C++ 索引
一文详解C++运算符重载【自己动手封装一个xxx.h库】
一文详解C++运算符重载【自己动手封装一个xxx.h库】
215 0
一文详解C++运算符重载【自己动手封装一个xxx.h库】