對(duì)，就是實(shí)現(xiàn)日期格式化，在我們做業(yè)務(wù)開發(fā)的漫長(zhǎng)歲月里，會(huì)多次跟時(shí)間打交道，相信大多數(shù)小伙伴對(duì)都寫過類似倒計(jì)時(shí)的功能，那么對(duì)于日期格式化相信也并不陌生，這里簡(jiǎn)單記錄一下實(shí)現(xiàn)日期格式化的過程，以及一些拓展。

在實(shí)現(xiàn)之前可以先了解下Date，下面簡(jiǎn)單介紹一下Date對(duì)象包含的一些屬性和方法。

Date

Date作為JavaScript標(biāo)準(zhǔn)內(nèi)置對(duì)象，創(chuàng)建的唯一方法就是通過new操作符， 通過new Date()來顯示當(dāng)前時(shí)刻的日期和時(shí)間，否則會(huì)被當(dāng)做常規(guī)函數(shù)調(diào)用，返回一個(gè)字符串。

let timer = new Date() // Date()構(gòu)造函數(shù)
console.log("timer", typeof (timer)) // object

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

屬性

Date.prototype

可以為Date對(duì)象添加屬性，這個(gè)下面會(huì)詳細(xì)介紹

Date.length

Date.lenght的值為7。這是Date()構(gòu)造函數(shù)可以接受的參數(shù)個(gè)數(shù)，這7個(gè)參數(shù)分別為：century，year，month，day，hour，minute，second

方法

1.Date.now()

表示從1970-1-1 00:00:00 UTC(世界標(biāo)準(zhǔn)時(shí)間)至今所經(jīng)過的毫秒數(shù)，也就是當(dāng)前所在時(shí)間的毫秒數(shù)。

2.Date.parse()

解析日期字符串，獲取該字符串與1970-1-1 00:00:00之間所經(jīng)過的毫秒數(shù)。

3.Date.UTC()

與Date.parse()不同的是，該方法接受長(zhǎng)度最長(zhǎng)與Date()構(gòu)造函數(shù)參數(shù)長(zhǎng)度相同的參數(shù)，返回1970-1-1 00:00:00 UTC之間所經(jīng)過的毫秒數(shù)。

實(shí)例

上面說到Date.prototype屬性，在所有Date實(shí)例中都繼承自該屬性，修改Date構(gòu)造函數(shù)的原型對(duì)象會(huì)影響所有的Date實(shí)例。

注意：示例輸出參考時(shí)間節(jié)點(diǎn) 2023-05-24 18:21:31:12 周三

實(shí)例屬性

1.Date.prototype.constructor

返回創(chuàng)建了實(shí)例的構(gòu)造函數(shù)，默認(rèn)是 Date構(gòu)造函數(shù)。

let timer = new Date()

2.Date.prototype.getDay()

返回一周中的第幾天，默認(rèn)0星期天。

timer.getDay() // 3

3.Date.prototype.getFullYear()

返回當(dāng)前時(shí)間對(duì)應(yīng)的年。

timer.getFullYear()// 2023

4.Date.prototype.getMonth()

返回當(dāng)前時(shí)間所對(duì)應(yīng)的月，需要注意的是月份從0開始，表示一年中的第一個(gè)月。

timer.getMonth() + 1 // 5

5.Date.prototype.getDate()

返回當(dāng)前時(shí)間對(duì)應(yīng)的日。

timer.getDate() // 24

6.Date.prototype.getHours()

返回當(dāng)前時(shí)間對(duì)應(yīng)的小時(shí)(0-23)。

timer.getHours() // 18

7.Date.prototype.getMinutes()

返回當(dāng)前時(shí)間對(duì)應(yīng)的分鐘(0-59)。

timer.getMinutes() // 21

8.Date.prototype.getSeconds()

返回當(dāng)前時(shí)間對(duì)應(yīng)的秒(0-59)。

timer.getSeconds() // 31

9.Date.prototype.getMilliseconds()

返回當(dāng)前時(shí)間對(duì)應(yīng)的毫秒數(shù)(0-999)。

timer.getMilliseconds() // 12

10.Date.prototype.getTime()

返回當(dāng)前時(shí)間對(duì)應(yīng)的時(shí)間戳(毫秒數(shù))，距離初始時(shí)間1970年01月01日00時(shí)00分00秒的間隔，小于這個(gè)時(shí)間會(huì)顯示負(fù)數(shù)。

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

11.Date.prototype.valueOf()

返回當(dāng)前時(shí)間的時(shí)間戳，官方解釋是：返回一個(gè)Date對(duì)象的原始值

newDate.valueOf() // 1684923691012

有了上面的這些基礎(chǔ)知識(shí)就可以來實(shí)現(xiàn)日期格式化了，如果想要多了解的話可以參考Date-MDN

實(shí)現(xiàn)日期格式化

還是以上面的時(shí)間節(jié)點(diǎn)為例：2023-05-24 18:21:31:12

假如這是一個(gè)日期格式的字符串

let date = '2023-05-24 18:21:31:12'
let timer = new Date(date) // 轉(zhuǎn)為日期對(duì)象
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(`當(dāng)前時(shí)間：${year}年${month}月${day}日 ${hour}時(shí)${minutes}分${seconds}秒`)
// 當(dāng)前時(shí)間：2023年5月24日 18時(shí)21分31秒

處理得到結(jié)果后，可以進(jìn)一步優(yōu)化，進(jìn)行復(fù)用，將這些方法封裝成一個(gè)函數(shù)進(jìn)行調(diào)用

let date = '2023-05-24 18:21:31:12'
getDate(date)
function getDate(date) {
  let timer = new Date(date) // 轉(zhuǎn)為日期對(duì)象
  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(`當(dāng)前時(shí)間：${year}年${month}月${day}日 ${hour}時(shí)${minutes}分${seconds}秒`)
  // 當(dāng)前時(shí)間：2023年05月24日 18時(shí)21分31秒
}
// 如果小于10進(jìn)行補(bǔ)零的參數(shù)，同樣封裝一個(gè)函數(shù)
function getZero(zero) {
  return zero < 10 ? '0' + zero : zero
}

到這里，日期格式化處理完成，下面是一些擴(kuò)展的硬核知識(shí)

擴(kuò)展

思考

我們注意的是在上述日期字符串中是一個(gè)標(biāo)準(zhǔn)的日期格式，這個(gè)時(shí)候你可能會(huì)有疑惑，如果是時(shí)間戳呢？如果是標(biāo)準(zhǔn)時(shí)間呢？

如果是標(biāo)準(zhǔn)時(shí)間跟上述日期字符串處理等同，如果是時(shí)間戳需要先轉(zhuǎn)換為日期格式，轉(zhuǎn)換方式可以先將時(shí)間戳翻入日期對(duì)象中，然后就可以正常進(jìn)行格式化處理。

let dateTime = '1684979976140'
let newDate = new Date(+dateTime) // 如果時(shí)間戳是字符串的話使用 + 進(jìn)行轉(zhuǎn)換

不管什么時(shí)候字符串首先都需要通過Date() 構(gòu)造函數(shù)進(jìn)行處理成一個(gè)日期對(duì)象格式，才可以進(jìn)行后續(xù)的操作。

需要注意的是時(shí)間戳如果是上述13位表明最終取到的是精確到秒的日期，如果大于13位就相當(dāng)于取到毫秒級(jí)那么就需要在原來基礎(chǔ)上 *1000

日期轉(zhuǎn)換為時(shí)間戳

根據(jù)Date-MDN文檔，我們可以發(fā)現(xiàn)有三種方式可以將日期轉(zhuǎn)換為時(shí)間戳格式

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實(shí)現(xiàn)日期格式化的操作詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript日期格式化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論