JavaScript实现日期格式化

夜雨炊烟

已于 2023-08-11 09:47:09 修改

阅读量563

点赞数 2

文章标签： javascript 前端开发语言

于 2023-05-25 10:47:58 首次发布

本文链接：https://blog.csdn.net/anthony1021/article/details/130862522

版权

本文介绍了JavaScript中Date对象的使用，包括创建Date实例、属性和方法，如Date.now(),Date.parse()等。通过示例展示了如何将日期字符串转换为日期对象并进行格式化，同时讨论了时间戳的处理和日期到时间戳的转换。最后，提供了一个日期格式化的函数封装示例。

摘要由CSDN通过智能技术生成

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

在实现之前可以先了解下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

方法

Date.now()

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

Date.parse()

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

Date.UTC()

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

实例

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

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

实例属性

Date.prototype.constructor

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

let timer = new Date()

Date.prototype.getDay()

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

timer.getDay() // 3

Date.prototype.getFullYear()

返回当前时间对应的年。

timer.getFullYear()// 2023

Date.prototype.getMonth()

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

timer.getMonth() + 1 // 5

Date.prototype.getDate()

返回当前时间对应的日。

timer.getDate() // 24

Date.prototype.getHours()

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

timer.getHours() // 18

Date.prototype.getMinutes()

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

timer.getMinutes() // 21

Date.prototype.getSeconds()

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

timer.getSeconds() // 31

Date.prototype.getMilliseconds()

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

timer.getMilliseconds() // 12

Date.prototype.getTime()

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

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

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