時間格式化函數之詳解

時間格式化在前端開發過程中是非常常見的操作，本文將詳細介紹常用的時間格式化函數，主要包括 Date()、toLocaleString()、moment.js 等。

一、Date()函數

Date()是JavaScript中內置的一個全局對象，代表了時間戳，使用 new Date() 可以創建一個當前時間的實例。可以通過該實例將時間戳轉化為不同的格式。

const date = new Date()
const localTime = date.toLocaleTimeString() // 獲取本地時間字元串，例如「22:54:31」
const isoTime = date.toISOString() // 獲取ISO格式的時間字元串，例如「2022-02-20T14:54:31.050Z」
const timestamp = date.getTime() // 獲取時間戳，例如 「1645403644429」

上面的代碼演示了如何使用 Date() 函數，其中 toLocaleTimeString() 和 toISOString() 都是Date() 對象的內置方法，分別返回本地時間字元串和ISO時間格式字元串。getTime() 方法返回時間戳。

二、toLocaleString()函數

toLocaleString()函數是JavaScript中Date() 對象的另一個內置方法。它返回本地日期和時間的字元串表示形式，支持多種格式化選項，例如：

const date = new Date()
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
const localDate = date.toLocaleDateString('en-US', options) // 獲取本地日期字元串，例如「Sunday, February 20, 2022」

上面的代碼演示了如何使用 toLocaleDateString() 方法來獲取本地日期字元串，其中第一個參數是指定地區的語言選項，第二個參數是一個對象，包含多種格式化選項，例如這裡用長格式顯示星期幾（weekday）、年份（year）、月份（month）、日期（day）。

三、moment.js 庫

moment.js 庫是 JavaScript 中用於管理日期和時間的流行庫之一，它優美的 API 和處理良好的時區支持為 Web 開發人員簡化了時間格式化。與 Date() 相比，moment.js 提供更完整的 API，容易使用和理解。

安裝moment.js庫：

npm install moment

使用moment.js庫：

const moment = require('moment')
const date = new Date()
const localTime = moment(date).format('MMMM Do YYYY, h:mm:ss a') // 根據指定的字元串格式化時間
const fromNowTime = moment(date).fromNow() // 例如... 2 minutes ago

上面的代碼演示了如何使用moment.js庫，其中format() 方法將Date() 對象轉換為指定格式的字元串，包含了日期、年份、月份、時間等元素的顯示。fromNow()方法返回相對時間。例如，如果是 5 分鐘前，則返回「5 minutes ago」。

四、時區轉換

時間格式化還涉及一個重要的問題，就是時區轉換。在 Web 應用程序中，經常需要將日期和時間從一個時區轉換為另一個時區。

moment.js 庫可以很好的支持時區轉換：

// 使用TimeZone庫來設置目標時間區域
const targetZone = 'America/Los_Angeles'
moment(date).tz(targetZone).format()

上面的代碼演示了如何使用moment.js庫進行時區轉換，其中 tz() 方法設置目標時區，然後使用 format() 方法按指定格式顯示目標時間。

五、總結

本文介紹了JavaScript中的時間格式化函數，包括 Date()、toLocaleString()、moment.js 庫等常用功能。

無論是 Date() 還是 moment.js 庫，對於時間格式化的需求，我們都可以使用這些函數進行處理。而在 Web 應用程序中，時區轉換也是一個重要的問題，通過這些函數可以輕鬆地解決這個問題。