JavaScript將時間戳轉(zhuǎn)換為日期格式的多種轉(zhuǎn)換方法

更新時間：2025年12月08日 09:42:33 作者：yingjuxia.com

在 JavaScript 中,將時間戳轉(zhuǎn)換為日期格式是一個常見需求,可以通過原生 Date 對象、日期格式化方法或第三方庫現(xiàn),以下是詳細(xì)的中文講解,介紹多種轉(zhuǎn)換方法,包含代碼示例、使用場景和注意事項,需要的朋友可以參考下

1.時間戳簡介

定義：時間戳是以 1970-01-01 00:00:00 UTC（Unix 紀(jì) 元）為起點的秒數(shù)或毫秒數(shù)。
- 毫秒時間戳：如 1630454400000（毫秒，JavaScript 默認(rèn)）。
- 秒時間戳：如 1630454400（需乘以 1000 轉(zhuǎn)為毫秒）。
目標(biāo)：將時間戳轉(zhuǎn)換為可讀格式，如 YYYY-MM-DD HH:mm:ss 或 2021-09-01 08:00:00。

2.轉(zhuǎn)換方法

方法 1：使用原生Date對象

描述：通過 new Date(timestamp) 創(chuàng)建日期對象，再提取年月日等部分。
適用場景：簡單轉(zhuǎn)換，適合不需要復(fù)雜格式化的場景。
代碼示例：

// 毫秒時間戳
const timestamp = 1630454400000; // 2021-09-01 00:00:00 UTC
const date = new Date(timestamp);

// 提取日期部分
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份從 0 開始，需 +1
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');

// 格式化
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
console.log(formattedDate); // 輸出: 2021-09-01 00:00:00

說明：
- padStart(2, '0') 確保月份、日期等為兩位數(shù)。
- 使用 UTC 方法（如 getUTCFullYear）可避免時區(qū)影響：

const utcDate = `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
console.log(utcDate); // 輸出: 2021-09-01

方法 2：使用toLocaleString()

描述：Date 對象的 toLocaleString() 方法提供本地化格式，支持自定義選項。
適用場景：需要本地化日期格式或簡單格式化。
代碼示例：

const timestamp = 1630454400000;
const date = new Date(timestamp);

// 默認(rèn)本地化格式
console.log(date.toLocaleString('zh-CN')); // 輸出: 2021/9/1 08:00:00（中國時區(qū)）

// 自定義格式
const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
};
console.log(date.toLocaleString('zh-CN', options)); // 輸出: 2021-09-01 08:00:00

說明：
- toLocaleString 根據(jù)地區(qū)（zh-CN、en-US）調(diào)整格式。
- options 參數(shù)支持靈活定制。
注意：格式因瀏覽器和地區(qū)不同而異。

方法 3：自定義格式化函數(shù)

描述：編寫函數(shù)根據(jù)指定格式（如 YYYY-MM-DD）轉(zhuǎn)換時間戳。
適用場景：需要統(tǒng)一、可控的日期格式。
代碼示例：

function formatDate(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
    const date = new Date(timestamp);
    const map = {
        'YYYY': date.getFullYear(),
        'MM': String(date.getMonth() + 1).padStart(2, '0'),
        'DD': String(date.getDate()).padStart(2, '0'),
        'HH': String(date.getHours()).padStart(2, '0'),
        'mm': String(date.getMinutes()).padStart(2, '0'),
        'ss': String(date.getSeconds()).padStart(2, '0')
    };
    return format.replace(/YYYY|MM|DD|HH|mm|ss/g, match => map[match]);
}

const timestamp = 1630454400000;
console.log(formatDate(timestamp)); // 輸出: 2021-09-01 00:00:00
console.log(formatDate(timestamp, 'YYYY/MM/DD')); // 輸出: 2021/09/01

說明：
- 支持自定義格式，靈活性高。
- 可擴(kuò)展支持更多格式（如 YYYY年MM月DD日）。

方法 4：使用 Moment.js 庫

描述：Moment.js 是一個強大的日期處理庫，支持豐富的格式化選項。
適用場景：復(fù)雜日期操作或需要兼容舊項目。
代碼示例：

// HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
const timestamp = 1630454400000;
const formatted = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
console.log(formatted); // 輸出: 2021-09-01 00:00:00

// 本地化
moment.locale('zh-cn');
console.log(moment(timestamp).format('LLL')); // 輸出: 2021年9月1日 08:00

說明：
- 需要引入 Moment.js（CDN 或 NPM：npm install moment）。
- 支持多種格式和本地化，但庫體積較大（約 70KB 壓縮版）。
注意：Moment.js 已進(jìn)入維護(hù)模式，推薦新項目使用 date-fns。

方法 5：使用 date-fns 庫

描述：date-fns 是現(xiàn)代、輕量的日期處理庫，模塊化設(shè)計。
適用場景：新項目，需輕量且現(xiàn)代化的日期處理。
代碼示例：

// NPM: npm install date-fns
import { format } from 'date-fns';

const timestamp = 1630454400000;
const formatted = format(new Date(timestamp), 'yyyy-MM-dd HH:mm:ss');
console.log(formatted); // 輸出: 2021-09-01 00:00:00

說明：
- 按需導(dǎo)入，體積?。▋H導(dǎo)入所需函數(shù)）。
- 支持豐富的格式化選項，類似 Moment.js 但更輕量。

方法 6：使用 jQuery（結(jié)合 DOM）

描述：結(jié)合 jQuery 從 DOM 獲取時間戳并轉(zhuǎn)換。
適用場景：項目已使用 jQuery，需處理用戶輸入的時間戳。
代碼示例：

// HTML: <input type="text" id="timestamp" value="1630454400000"><button onclick="format()">轉(zhuǎn)換</button>
$(document).ready(function() {
    window.format = function() {
        const timestamp = $('#timestamp').val();
        const date = new Date(Number(timestamp));
        const formatted = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        console.log(formatted); // 輸出: 2021-09-01
    };
});

說明：需引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3.綜合示例

以下是一個完整示例，展示多種轉(zhuǎn)換方法：

<!DOCTYPE html>
<html>
<head>
    <title>時間戳轉(zhuǎn)換</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/date-fns@2.30.0/dist/date-fns.min.js"></script>
    <style>
        body { font-family: Arial; padding: 20px; }
        input, button { margin: 10px; padding: 8px; }
    </style>
</head>
<body>
    <input type="text" id="timestamp" value="1630454400000" placeholder="輸入時間戳">
    <button onclick="convert()">轉(zhuǎn)換</button>
    <div id="output"></div>

    <script>
        function formatDate(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
            const date = new Date(timestamp);
            const map = {
                'YYYY': date.getFullYear(),
                'MM': String(date.getMonth() + 1).padStart(2, '0'),
                'DD': String(date.getDate()).padStart(2, '0'),
                'HH': String(date.getHours()).padStart(2, '0'),
                'mm': String(date.getMinutes()).padStart(2, '0'),
                'ss': String(date.getSeconds()).padStart(2, '0')
            };
            return format.replace(/YYYY|MM|DD|HH|mm|ss/g, match => map[match]);
        }

        function convert() {
            const timestamp = Number(document.getElementById('timestamp').value);
            if (isNaN(timestamp)) {
                alert('請輸入有效時間戳！');
                return;
            }

            const date = new Date(timestamp);
            const output = `
                <p>原生 Date: ${formatDate(timestamp)}</p>
                <p>toLocaleString: ${date.toLocaleString('zh-CN')}</p>
                <p>Moment.js: ${moment(timestamp).format('YYYY-MM-DD HH:mm:ss')}</p>
                <p>date-fns: ${format(new Date(timestamp), 'yyyy-MM-dd HH:mm:ss')}</p>
            `;
            document.getElementById('output').innerHTML = output;
        }
    </script>
</body>
</html>

4.方法對比

方法	依賴	優(yōu)點	缺點
原生 `Date`	無	無依賴，簡單實現(xiàn)	需手動格式化，代碼稍長
`toLocaleString()`	無	本地化支持，靈活選項	格式因瀏覽器/地區(qū)不同
自定義格式化	無	完全控制格式，靈活	需編寫額外代碼
Moment.js	Moment.js	功能強大，易用，支持本地化	體積大，維護(hù)模式
date-fns	date-fns	輕量，模塊化，現(xiàn)代	需額外引入庫
jQuery	jQuery	適合 jQuery 項目，簡潔 DOM 操作	需引入 jQuery，增加依賴

5.注意事項

時間戳單位：
- JavaScript Date 接受毫秒時間戳，秒時間戳需乘以 1000：

const seconds = 1630454400;
const date = new Date(seconds * 1000);

時區(qū)處理：
- 默認(rèn)使用本地時區(qū)，需用 UTC 方法（如 getUTCFullYear）處理 UTC 時間。
- 庫如 Moment.js/date-fns 支持時區(qū)插件。
輸入驗證：
- 檢查時間戳是否有效：

if (isNaN(timestamp) || timestamp < 0) {
    throw new Error('無效時間戳');
}

性能：
- 原生方法最輕量，適合簡單場景。
- Moment.js 體積大，date-fns 更適合新項目。
瀏覽器兼容性：
- Date 和 toLocaleString 廣泛支持。
- padStart 是 ES2017，IE 不支持，需 polyfill。
安全性：
- 用戶輸入時間戳需驗證，防止異常值或惡意輸入。

6.總結(jié)

首選方法：原生 Date + 自定義格式化，簡單無依賴。
復(fù)雜場景：使用 date-fns（輕量現(xiàn)代）或 Moment.js（功能全面）。
jQuery 項目：結(jié)合 jQuery 處理 DOM 輸入。
選擇依據(jù)：
- 無依賴：原生 Date 或 toLocaleString。
- 復(fù)雜格式：自定義函數(shù)或 date-fns。
- 本地化：toLocaleString 或 Moment.js。
測試：驗證不同時間戳（毫秒/秒）、時區(qū)和格式。