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

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

Date

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

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對象添加屬性，這個下面會詳細(xì)介紹

Date.length

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

方法

1.Date.now()

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

2.Date.parse()

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

3.Date.UTC()

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

實(shí)例

上面說到Date.prototype屬性，在所有Date實(shí)例中都繼承自該屬性，修改Date構(gòu)造函數(shù)的原型對象會影響所有的Date實(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)前時間對應(yīng)的年。

timer.getFullYear()// 2023

4.Date.prototype.getMonth()

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

timer.getMonth() + 1 // 5

5.Date.prototype.getDate()

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

timer.getDate() // 24

6.Date.prototype.getHours()

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

timer.getHours() // 18

7.Date.prototype.getMinutes()

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

timer.getMinutes() // 21

8.Date.prototype.getSeconds()

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

timer.getSeconds() // 31

9.Date.prototype.getMilliseconds()

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

timer.getMilliseconds() // 12

10.Date.prototype.getTime()

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

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

11.Date.prototype.valueOf()

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

newDate.valueOf() // 1684923691012

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

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

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

假如這是一個日期格式的字符串

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

處理得到結(jié)果后，可以進(jìn)一步優(yōu)化，進(jìn)行復(fù)用，將這些方法封裝成一個函數(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)為日期對象
  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)前時間：${year}年${month}月${day}日 ${hour}時${minutes}分${seconds}秒`)
  // 當(dāng)前時間：2023年05月24日 18時21分31秒
}
// 如果小于10進(jìn)行補(bǔ)零的參數(shù)，同樣封裝一個函數(shù)
function getZero(zero) {
  return zero < 10 ? '0' + zero : zero
}

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

擴(kuò)展

思考

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

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

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

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

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

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

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

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日期格式化的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論