JavaScript將時間戳轉換為日期格式的多種轉換方法

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

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

1.時間戳簡介

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

2.轉換方法

方法 1：使用原生Date對象

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

// 毫秒時間戳
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);

// 默認本地化格式
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）調整格式。
- options 參數(shù)支持靈活定制。
注意：格式因瀏覽器和地區(qū)不同而異。

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

描述：編寫函數(shù)根據(jù)指定格式（如 YYYY-MM-DD）轉換時間戳。
適用場景：需要統(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

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

方法 4：使用 Moment.js 庫

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

// 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 已進入維護模式，推薦新項目使用 date-fns。

方法 5：使用 date-fns 庫

描述：date-fns 是現(xiàn)代、輕量的日期處理庫，模塊化設計。
適用場景：新項目，需輕量且現(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

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

方法 6：使用 jQuery（結合 DOM）

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

// HTML: <input type="text" id="timestamp" value="1630454400000"><button onclick="format()">轉換</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.綜合示例

以下是一個完整示例，展示多種轉換方法：

<!DOCTYPE html>
<html>
<head>
    <title>時間戳轉換</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()">轉換</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	功能強大，易用，支持本地化	體積大，維護模式
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ū)處理：
- 默認使用本地時區(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.總結

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

如果需要特定格式的實現(xiàn)（如 YYYY年MM月DD日）、時區(qū)處理，或其他 JavaScript 相關問題，請?zhí)峁└嗉毠?jié)，我可以進一步優(yōu)化回答！

以上就是JavaScript將時間戳轉換為日期格式的多種轉換方法的詳細內容，更多關于JavaScript時間戳轉為日期格式的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

div+css+js模擬tab切換效果事件綁定 IE,firefox兼容
div+css+js模擬tab,這個版本,理論上可以添加無限個tab,而且,你只要管內容的添加行了,不需要改JS
2009-12-12
js匿名函數(shù)使用&傳參(實例)
下面小編就為大家?guī)硪黄猨s匿名函數(shù)使用&傳參(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
JavaScript獲取select中text值的方法
這篇文章主要介紹了JavaScript獲取select中text值的方法,涉及javascript針對HTML頁面元素相關判斷與獲取操作技巧,需要的朋友可以參考下
2017-02-02
js限制input只能輸入有效的數(shù)字(第一個不能是小數(shù)點)
有時候我們需要限制input只能輸入有效的數(shù)字，有且只有一個小數(shù)點，第一個不能為小數(shù)點，那么就可以參考下面的函數(shù)來實現(xiàn)
2018-09-09
JavaScript運動框架多值運動(四)
這篇文章主要為大家詳細介紹了JavaScript運動框架第四部分，多值運動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript、C# URL編碼、解碼總結
這篇文章主要介紹了JavaScript、C# URL編碼總結,注意包括了encodeURI、decodeURI、encodeURIComponent、decodeURIComponent等使用需要的朋友可以參考下
2017-01-01
js在瀏覽器中的event loop事件隊列示例詳解
大家都知道js是單線程的腳本語言,在同一時間只能做同一件事,為了協(xié)調事件、用戶交互、腳本、UI渲染和網絡處理等行為,防止主線程阻塞,Event Loop方案應運而生,這篇文章主要給大家介紹了關于js在瀏覽器中的event loop事件隊列的相關資料,需要的朋友可以參考下
2021-11-11
JavaScript函數(shù)柯里化實現(xiàn)原理及過程
這篇文章主要介紹了JavaScript函數(shù)柯里化實現(xiàn)原理及過程,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-12-12
element中el-switch的v-model自定義值的實現(xiàn)
在el-switch中設置active-value和inactive-value屬性,接受Boolean, String或Number類型的值,本文就來介紹一下element中el-switch的v-model自定義值的實現(xiàn),感興趣的可以了解一下
2023-11-11
javascript 使td內容不換行不撐開
javascript 使td內容不換行不撐開如何實現(xiàn)，本文將詳細介紹，需要了解的朋友可以參考下
2012-11-11