JavaScript实现日期格式化的操作详解

对，就是实现日期格式化，在我们做业务开发的漫长岁月里，会多次跟时间打交道，相信大多数小伙伴对都写过类似倒计时的功能，那么对于日期格式化相信也并不陌生，这里简单记录一下实现日期格式化的过程，以及一些拓展。

在实现之前可以先了解下Date，下面简单介绍一下Date对象包含的一些属性和方法。

Date

Date作为JavaScript标准内置对象，创建的唯一方法就是通过new操作符， 通过new Date()来显示当前时刻的日期和时间，否则会被当做常规函数调用，返回一个字符串。

let timer = new Date() // Date()构造函数
console.log("timer", typeof (timer)) // object

let timer = Date()
console.log("timer", typeof (timer)) // string

属性

Date.prototype

可以为Date对象添加属性，这个下面会详细介绍

Date.length

Date.lenght的值为7。这是Date()构造函数可以接受的参数个数，这7个参数分别为：century，year，month，day，hour，minute，second

方法

1.Date.now()

表示从1970-1-1 00:00:00 UTC(世界标准时间)至今所经过的毫秒数，也就是当前所在时间的毫秒数。

2.Date.parse()

解析日期字符串，获取该字符串与1970-1-1 00:00:00之间所经过的毫秒数。

3.Date.UTC()

与Date.parse()不同的是，该方法接受长度最长与Date()构造函数参数长度相同的参数，返回1970-1-1 00:00:00 UTC之间所经过的毫秒数。

实例

上面说到Date.prototype属性，在所有Date实例中都继承自该属性，修改Date构造函数的原型对象会影响所有的Date实例。

注意：示例输出参考时间节点 2023-05-24 18:21:31:12 周三

实例属性

1.Date.prototype.constructor

返回创建了实例的构造函数，默认是 Date构造函数。

let timer = new Date()

2.Date.prototype.getDay()

返回一周中的第几天，默认0星期天。

timer.getDay() // 3

3.Date.prototype.getFullYear()

返回当前时间对应的年。

timer.getFullYear()// 2023

4.Date.prototype.getMonth()

返回当前时间所对应的月，需要注意的是月份从0开始，表示一年中的第一个月。

timer.getMonth() + 1 // 5

5.Date.prototype.getDate()

返回当前时间对应的日。

timer.getDate() // 24

6.Date.prototype.getHours()

返回当前时间对应的小时(0-23)。

timer.getHours() // 18

7.Date.prototype.getMinutes()

返回当前时间对应的分钟(0-59)。

timer.getMinutes() // 21

8.Date.prototype.getSeconds()

返回当前时间对应的秒(0-59)。

timer.getSeconds() // 31

9.Date.prototype.getMilliseconds()

返回当前时间对应的毫秒数(0-999)。

timer.getMilliseconds() // 12

10.Date.prototype.getTime()

返回当前时间对应的时间戳(毫秒数)，距离初始时间1970年01月01日00时00分00秒的间隔，小于这个时间会显示负数。

new Date(timer).getTime() // 1684923691012

11.Date.prototype.valueOf()

返回当前时间的时间戳，官方解释是：返回一个Date对象的原始值

newDate.valueOf() // 1684923691012

有了上面的这些基础知识就可以来实现日期格式化了，如果想要多了解的话可以参考Date-MDN

实现日期格式化

还是以上面的时间节点为例：2023-05-24 18:21:31:12

假如这是一个日期格式的字符串

let date = '2023-05-24 18:21:31:12'
let timer = new Date(date) // 转为日期对象
let year = timer.getFullYear()
let month = timer.getMonth() + 1
let day = timer.getDate()
let hour = timer.getHours()
let minutes = timer.getMinutes()
let seconds = timer.getSeconds()

console.log(`当前时间：${year}年${month}月${day}日 ${hour}时${minutes}分${seconds}秒`)
// 当前时间：2023年5月24日 18时21分31秒

处理得到结果后，可以进一步优化，进行复用，将这些方法封装成一个函数进行调用

let date = '2023-05-24 18:21:31:12'
getDate(date)
function getDate(date) {
  let timer = new Date(date) // 转为日期对象
  let year = getZero(timer.getFullYear())
  let month = getZero(timer.getMonth() + 1)
  let day = getZero(timer.getDate())
  let hour = getZero(timer.getHours())
  let minutes = getZero(timer.getMinutes())
  let seconds = getZero(timer.getSeconds())

  console.log(`当前时间：${year}年${month}月${day}日 ${hour}时${minutes}分${seconds}秒`)
  // 当前时间：2023年05月24日 18时21分31秒
}
// 如果小于10进行补零的参数，同样封装一个函数
function getZero(zero) {
  return zero < 10 ? '0' + zero : zero
}

到这里，日期格式化处理完成，下面是一些扩展的硬核知识

扩展

思考

我们注意的是在上述日期字符串中是一个标准的日期格式，这个时候你可能会有疑惑，如果是时间戳呢？如果是标准时间呢？

如果是标准时间跟上述日期字符串处理等同，如果是时间戳需要先转换为日期格式，转换方式可以先将时间戳翻入日期对象中，然后就可以正常进行格式化处理。

let dateTime = '1684979976140'
let newDate = new Date(+dateTime) // 如果时间戳是字符串的话使用 + 进行转换

不管什么时候字符串首先都需要通过Date() 构造函数进行处理成一个日期对象格式，才可以进行后续的操作。

需要注意的是时间戳如果是上述13位表明最终取到的是精确到秒的日期，如果大于13位就相当于取到毫秒级那么就需要在原来基础上 *1000

日期转换为时间戳

根据Date-MDN文档，我们可以发现有三种方式可以将日期转换为时间戳格式

let dateTime = '2023-05-24 18:21:31:12'
let newDate = new Date(dateTime)

newDate.getTime() // 1684923691012
newDate.valueOf() // 1684923691012
Date.parse(dateTime) // 1684923691012

以上就是JavaScript实现日期格式化的操作详解的详细内容，更多关于JavaScript日期格式化的资料请关注脚本之家其它相关文章！