JavaScript >> Javascript 文檔 >  >> Tags >> Date

了解 JavaScript 中的日期和時間

這篇文章最初是為 DigitalOcean 寫的。

簡介

日期和時間是我們日常生活的常規部分,因此在計算機編程中佔有重要地位。在 JavaScript 中,您可能必須創建一個帶有日曆、火車時刻表或設置約會界面的網站。這些應用程序需要根據用戶的當前時區顯示相關時間,或者圍繞到達和離開或開始和結束時間執行計算。此外,您可能需要使用 JavaScript 在每天的特定時間生成報告,或篩選當前營業的餐館和場所。

為了實現所有這些目標以及更多目標,JavaScript 帶有內置的 Date 對象和相關方法。本教程將介紹如何在 JavaScript 中格式化和使用日期和時間。

日期對象

Date object 是 JavaScript 中的一個內置對象,用於存儲日期和時間。它提供了許多用於格式化和管理數據的內置方法。

默認情況下,一個新的 Date 沒有提供參數的實例會創建一個對應於當前日期和時間的對象。這將根據當前計算機的系統設置創建。

演示 JavaScript 的 Date ,讓我們創建一個變量並將當前日期分配給它。本文於 10 月 18 日星期三在倫敦 (GMT) 撰寫,因此是當前日期、時間和時區,如下所示。

// Set variable to current date and time
const now = new Date()

// View the output
now
Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

查看輸出,我們有一個包含以下內容的日期字符串:

星期幾 年份 小時 分鐘 第二 時區
星期三 十月 18 2017 12 41 34 GMT+0000 (UTC)

日期和時間以我們人類可以理解的方式分解和打印。

然而,JavaScript 根據 時間戳 理解日期 源自 Unix 時間,它是一個值,由自 1970 年 1 月 1 日午夜以來經過的毫秒數組成。我們可以使用 getTime() 獲取時間戳 方法。

// Get the current timestamp
now.getTime()
1508330494000

當前時間戳的輸出中出現的大數字表示與上述相同的值,即 2017 年 10 月 18 日。

紀元時間 ,也稱為零時,由日期字符串01 January, 1970 00:00:00 Universal Time (UTC)表示 ,並由 0 時間戳。我們可以在瀏覽器中通過創建一個新變量並為其分配一個新的 Date 來測試它 基於 0 時間戳的實例 .

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0)

epochTime
01 January, 1970 00:00:00 Universal Time (UTC)

紀元時間在編程的早期被選為計算機測量時間的標準,它是 JavaScript 使用的方法。了解時間戳和日期字符串的概念很重要,因為兩者都可以根據應用程序的設置和用途使用。

到目前為止,我們學習瞭如何創建一個新的 Date 基於當前時間的實例,以及如何基於時間戳創建實例。總共有四種格式可以用來創建新的 Date 在 JavaScript 中。除了當前時間默認和時間戳,還可以使用日期字符串,或者指定特定的日期和時間。

日期創建 輸出
new Date() 當前日期和時間
new Date(timestamp) 根據紀元時間以來的毫秒數創建日期
new Date(date string) 根據日期字符串創建日期
new Date(year, month, day, hours, minutes, seconds, milliseconds) 根據指定的日期和時間創建日期

為了演示引用特定日期的不同方式,我們將創建新的 Date 以三種不同方式代表 1776 年 7 月 4 日下午 12:30 GMT 的對象。

// Timestamp method
new Date(-6106015800000)

// Date string method
new Date('July 4 1776 12:30')

// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0)

以上三個示例都創建了一個包含相同信息的日期。

你會注意到 timestamp 方法有一個負數;紀元時間之前的任何日期都將表示為負數。

在日期和時間方法中,我們的秒和毫秒設置為 0 .如果 Date 中缺少任何數字 創建時,它將默認為 0 .但是,順序不能更改,因此如果您決定省略某個數字,請記住這一點。您可能還注意到,7 月份由 6 表示 ,而不是通常的 7 .這是因為日期和時間數字從 0 開始 ,就像編程中的大多數計數一樣。有關更詳細的圖表,請參閱下一節。

使用 get 檢索日期

一旦有了日期,我們就可以使用各種內置方法訪問日期的所有組件。這些方法將返回相對於本地時區的日期的每一部分。這些方法中的每一個都以 get 開頭 , 並將返回相對數。下面是get的詳細表 Date 的方法 對象。

日期/時間 方法 範圍 示例
年份 getFullYear() YYYY 1970
getMonth() 0-11 0 =一月
(每月)天 getDate() 1-31 1 =每月 1 日
(星期幾) getDay() 0-6 0 =星期日
小時 getHours() 0-23 0 =午夜
分鐘 getMinutes() 0-59
第二 getSeconds() 0-59
毫秒 getMilliseconds() 0-999
時間戳 getTime() 自紀元時間以來的毫秒數

讓我們以 1980 年 7 月 31 日為基礎創建一個新日期,並將其分配給一個變量。

// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31)

現在我們可以使用我們所有的方法來獲取每個日期組件,從年到毫秒。

birthday.getFullYear() // 1980
birthday.getMonth() // 6
birthday.getDate() // 31
birthday.getDay() // 4
birthday.getHours() // 0
birthday.getMinutes() // 0
birthday.getSeconds() // 0
birthday.getMilliseconds() // 0
birthday.getTime() // 333849600000 (for GMT)

有時可能需要只提取日期的一部分,而內置的 get 方法是實現這一目標的工具。

例如,我們可以將當前日期與 10 月 3 日的日期和月份進行測試,看看是否是 10 月 3 日。

// Get today's date
const today = new Date()

// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
  console.log("It's October 3rd.")
} else {
  console.log("It's not October 3rd.")
}
It's not October 3rd.

由於在撰寫本文時不是 10 月 3 日,因此控制台反映了這一點。

內置 Dateget 開頭的方法 允許我們訪問返回與我們從實例化對像中檢索的內容相關聯的數字的日期組件。

使用 set 修改日期

對於所有 get 上面我們了解到的方法,有一個對應的set 方法。 get 用於從日期檢索特定組件,set 用於修改日期的組成部分。下面是set的詳細圖表 Date 的方法 對象。

日期/時間 方法 範圍 示例
年份 setFullYear() YYYY 1970
setMonth() 0-11 0 =一月
(每月)天 setDate() 1-31 1 =每月 1 日
(星期幾) setDay() 0-6 0 =星期日
小時 setHours() 0-23 0 =午夜
分鐘 setMinutes() 0-59
第二 setSeconds() 0-59
毫秒 setMilliseconds() 0-999
時間戳 setTime() 自紀元時間以來的毫秒數

我們可以使用這些set 修改日期的一個、多個或所有組件的方法。例如,我們可以更改 birthday 的年份 上面的變量是 1997 而不是 1980 .

// Change year of birthday date
birthday.setFullYear(1997)

birthday
Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

我們在上面的例子中看到,當我們調用 birthday 變量我們接收新年作為輸出的一部分。

set 開頭的內置方法 讓我們修改 Date 的不同部分 對象。

使用 UTC 的日期方法

get 上面討論的方法根據用戶的本地時區設置檢索日期組件。為了更好地控制日期和時間,您可以使用 getUTC 方法,與get完全相同 方法,但它們根據 UTC(協調世界時)標準計算時間。下面是 JavaScript Date 的 UTC 方法表 對象。

日期/時間 方法 範圍 示例
年份 getUTCFullYear() YYYY 1970
getUTCMonth() 0-11 0 =一月
(每月)天 getUTCDate() 1-31 1 =每月 1 日
(星期幾) getUTCDay() 0-6 0 =星期日
小時 getUTCHours() 0-23 0 =午夜
分鐘 getUTCMinutes() 0-59
第二 getUTCSeconds() 0-59
毫秒 getUTCMilliseconds() 0-999

測試本地和 UTC get 之間的差異 方法,我們可以運行下面的代碼。

// Assign current time to a variable
const now = new Date()

// Print local and UTC timezones
console.log(now.getHours())
console.log(now.getUTCHours())

運行此代碼將打印出當前小時和 UTC 時區的小時。如果您當前處於 UTC 時區,則運行上述程序輸出的數字將是相同的。

UTC 很有用,因為它提供了國際時間標準參考,因此如果適用於您正在開發的內容,它可以使您的代碼跨時區保持一致。

結論

在本教程中,我們學習瞭如何創建 Date 的實例 對象,並使用其內置方法訪問和修改特定日期的組件。如需更深入地了解 JavaScript 中的日期和時間,您可以閱讀 Mozilla Developer Network 上的日期參考。

了解如何處理日期對於 JavaScript 中的許多常見任務至關重要,因為這可以讓您做很多事情,從設置重複報告到在正確的時區顯示日期和時間表。


Tutorial JavaScript 教程
  1. 如何在有限的函數中執行這個結果

  2. RTMP 到 WebRTC 的遷移 – RTMP 正在消亡!

  3. 等待多個事件

  4. 小錯誤,大教訓

  5. 這個聖誕節的光標拖尾效果庫

  6. 父子組件之間的Angular雙向綁定

  7. 使用 Node.js 發出 HTTP 請求的 5 種不同方法

  1. 使用回車鍵阻止表單提交

  2. 使用 Express 處理 Websocket

  3. 使用 Deno 構建一個 Restful API(第 1 部分)

  4. 使用 RxJs 為 Ryan Cavanaugh 構建反應式微波

  5. 使用 HTTP 緩存:2022 指南

  6. 加速 Tesla.com - 第 2 部分:主要 CSS 拆分

  7. 緩存破壞 React 應用程序

  1. 第 92 天:

  2. 第 1 部分:設置 Snowpack

  3. React Virtual DOM 這不是火箭科學

  4. 用 Arduino 和...Angular 創建智能鎖?!