多方位詳解日期格式化

一、基本概念

日期格式化是指將日期類型轉換為字元串類型的過程，常見於前端頁面的數據展示。日期格式化通常需要指定日期的格式。在 JavaScript 中，可以使用 Date 對象來表示日期。

使用 Date 對象可以獲取當前時間、設置特定時間，以及獲得特定時間的年、月、日等各個部分。

// 獲取當前日期
var currentDate = new Date();

二、常見格式化方式

1. yyyy-MM-dd

這是最常見的日期格式，其中 yyyy 表示四位年份，MM 表示兩位月份，dd 表示兩位天數。

// 獲取當前日期並格式化為 yyyy-MM-dd
var currentDate = new Date();
var formattedDate = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate();

2. yyyy年MM月dd日

這種格式常見於中文網站或中文文檔的日期格式。

// 獲取當前日期並格式化為 yyyy年MM月dd日
var currentDate = new Date();
var formattedDate = currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月' + currentDate.getDate() + '日';

3. hh:mm:ss

這是最常見的時間格式，其中 hh 表示小時（範圍為 0 到 23），mm 表示分鐘（範圍為 0 到 59），ss 表示秒數（範圍為 0 到 59）。

// 獲取當前時間並格式化為 hh:mm:ss
var currentDate = new Date();
var formattedTime = currentDate.getHours() + ':' + currentDate.getMinutes() + ':' + currentDate.getSeconds();

4. yyyy-MM-dd hh:mm:ss

這是最常見的日期時間格式，其中 yyyy-MM-dd 表示日期，hh:mm:ss 表示時間。

// 獲取當前日期時間並格式化為 yyyy-MM-dd hh:mm:ss
var currentDate = new Date();
var formattedDateTime = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate() + ' ' + currentDate.getHours() + ':' + currentDate.getMinutes() + ':' + currentDate.getSeconds();

三、常見格式化庫

1. moment.js

moment.js 是一個輕量級的日期時間處理庫，使用它可以方便地進行日期格式化、日期計算等操作。

// 使用 moment.js 格式化日期為 yyyy年MM月dd日
var formattedDate = moment(new Date()).format('YYYY年MM月DD日');

2. date-fns

date-fns 是一個基於函數式編程原則的日期時間處理庫，具有可組合、可重用等特點。

// 使用 date-fns 格式化日期為 yyyy-MM-dd
var formattedDate = format(new Date(), 'yyyy-MM-dd');

四、本地化處理

在不同的語言環境下，日期格式可能會有所不同，需要進行本地化處理。

// 獲取當前日期並格式化為本地化日期格式
var currentDate = new Date();
var options = { year: 'numeric', month: 'long', day: 'numeric' };
var formattedDate = currentDate.toLocaleDateString('zh-CN', options); // 中文日期格式為「年月日」

五、總結

日期格式化是前端開發常見的任務之一，我們可以使用原生 JavaScript 方法、第三方庫等多種方式來進行格式化。在實際開發中，需要根據具體的需求選擇最適合的方法，並注意本地化處理。