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

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

Date

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

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實例。

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

實例屬性

1.Date.prototype.constructor

返回創(chuàng)建了實例的構造函數，默認是 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

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

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

還是以上面的時間節(jié)點為例：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秒

處理得到結果后，可以進一步優(yōu)化，進行復用，將這些方法封裝成一個函數進行調用

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() 構造函數進行處理成一個日期對象格式，才可以進行后續(xù)的操作。

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

日期轉換為時間戳

根據Date-MDN文檔，我們可以發(fā)現(xià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實現(xiàn)日期格式化的操作詳解的詳細內容，更多關于JavaScript日期格式化的資料請關注腳本之家其它相關文章！

最新評論