JS-13: Date全解析

更新 發佈閱讀 4 分鐘

本章節你將了解 日期物件,包括處理日期的方法以及如何設定日期格式。

Date 物件是 JS 中的內置對象,可用於處理日期和時間,以下是如何創建它的語法:

const now = new Date();
  • new關鍵字用於創建 Date 的新實例

現在你可以將其輸出到主控台。

const now = new Date();
console.log(now);

輸出:

raw-image

我們可以獲取更細部的資訊:

const now = new Date();
console.log(now);

const year = now.getFullYear();
console.log(year);

const month = now.getMonth(); // 0-11,0 表示 1 月
console.log(month + 1); // 轉為 1-12

const date = now.getDate(); // 當月中的第幾天
console.log(date);

const day = now.getDay(); // 0 表示星期日,6 表示星期六
console.log(day);

const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
console.log(`${hours}:${minutes}:${seconds}`);
raw-image

我們也可以提供日期和時間當作參數,格式化日期物件。

const specificDate = new Date("July 4, 1776 12:00:00")
console.log(specificDate)

輸出:

raw-image

另外,Date.now() 回傳自 1970/01/01 00:00:00 UTC 起經過的毫秒數,以下示範:

const timeElapsed = Date.now();
const today = new Date(timeElapsed);
console.log(timeElapsed);
console.log(today);

輸出:

raw-image

好,接下來介紹格式化日期的不同方法。以下示範:

const now = new Date();
console.log(now.toISOString()); // 台灣是 UTC+8 時區,所以12:38:59(UTC) + 8 小時 = 20:38:59(當地時間)。
console.log(now.toLocaleDateString('zh-TW')); // 參數可選
console.log(now.toLocaleTimeString('zh-TW')); // 參數可選
console.log(now.toDateString());
console.log(now.toTimeString());

輸出:

raw-image

好,最後,我們可以計算兩個日期的差異,這常見於部落格的文章中,通常有些網站會標記文章距離發布至今過了幾天。

const specificDate = new Date("January 31, 2025 12:00:00")
const now = new Date();

console.log(specificDate);
console.log(now);
const diff = specificDate - now; // 毫秒數
const days = Math.floor(diff / (1000 * 60 * 60 * 24)); //計算完整經過的天數,忽略未滿一天的部分。
//const days = Math.floor(diff / (1000 * 60 * 60 * 24)); //哪怕只有部分天數經過,也應該算進整天。用於計算「截止日期」。
console.log(days);

輸出:

raw-image
留言
avatar-img
留言分享你的想法!
avatar-img
電資鼠 - 您的學習好夥伴
16會員
242內容數
在當今數位時代,電資領域人才需求爆發式成長,不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合,這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程,正是進入這個高薪、高需求產業的關鍵!
2025/03/03
表單驗證是一個在用戶輸入資料時確保其正確性、完整性及格式符合要求的重要功能,它可以在用戶提交表單之前進行檢查,防止錯誤資料的傳輸。本章節將帶你初步了解其原理與使用。
2025/03/03
表單驗證是一個在用戶輸入資料時確保其正確性、完整性及格式符合要求的重要功能,它可以在用戶提交表單之前進行檢查,防止錯誤資料的傳輸。本章節將帶你初步了解其原理與使用。
2025/03/03
本篇文章深入淺出地介紹 JavaScript 正規表達式,從基本語法、常用符號、方法應用到進階的捕獲群組、斷言等,並搭配豐富的範例程式碼,幫助讀者快速掌握正規表達式的使用技巧。
2025/03/03
本篇文章深入淺出地介紹 JavaScript 正規表達式,從基本語法、常用符號、方法應用到進階的捕獲群組、斷言等,並搭配豐富的範例程式碼,幫助讀者快速掌握正規表達式的使用技巧。
2025/03/03
了解常見的錯誤消息將幫助您更有效的調試程式碼,本章將介紹 JavaScript 錯誤處理機制 (Error Handling),學習如何有效地偵測、處理與預防錯誤,提高程式的穩定性與可維護性。
Thumbnail
2025/03/03
了解常見的錯誤消息將幫助您更有效的調試程式碼,本章將介紹 JavaScript 錯誤處理機制 (Error Handling),學習如何有效地偵測、處理與預防錯誤,提高程式的穩定性與可維護性。
Thumbnail
看更多
你可能也想看
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
還在煩惱平凡日常該如何增添一點小驚喜嗎?全家便利商店這次聯手超萌的馬來貘,推出黑白配色的馬來貘雪糕,不僅外觀吸睛,層次豐富的雙層口味更是讓人一口接一口!本文將帶你探索馬來貘雪糕的多種創意吃法,從簡單的豆漿燕麥碗、藍莓果昔,到大人系的奇亞籽布丁下午茶,讓可愛的馬來貘陪你度過每一餐,增添生活中的小確幸!
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
JSDoc 全名是 JavaScript Documentation,顧名思義是為 JavaScript 所使用的 API 文件,在程式碼內透過註解的方式撰寫,運行後 JSDoc 會自動掃描註解內容,並生成一份網頁版的文件,對於沒有使用 Typescript 開發的專案,也
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
此章節旨在介紹Java的基本語法、註解和變數的使用。透過學習,讀者將了解Java程式的基本結構、程式進入點的定義、如何撰寫單行和多行註解,以及如何宣告和初始化變數。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言,應用範圍廣泛,包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 今天才發現可以不用看著影片一步一步寫,可以自己先寫寫看😛 第二個挑戰是用 JS + CSS 寫一個時鐘,不過其實檔案裡面 HTML 跟 CSS 都已經寫好了,三個指針也都放好了,Go Live 起來就長
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News