利用JavaScript實現時間戳功能的5種方法詳解
前言
在前端開發(fā)中,時間戳是連接日期顯示與數據處理的核心橋梁,廣泛應用于訂單跟蹤、日志記錄、倒計時功能等場景。JavaScript通過Date對象提供了豐富的時間戳處理能力,但不同方法的精度差異、跨瀏覽器兼容性以及與后端的交互問題,常常成為開發(fā)中的"隱形坑"。本文將系統(tǒng)梳理時間戳的獲取技巧、格式轉換方案、核心知識體系及跨端適配策略,結合實戰(zhàn)案例提供可直接落地的解決方案。
一、精準獲?。?種JavaScript時間戳獲取方法全解析
JavaScript中時間戳通常指"距離1970年1月1日00:00:00 GMT的毫秒數",共13位數字。獲取時間戳的方法主要圍繞Date對象展開,不同方法在精度、語法簡潔度上各有側重。
1.1 靜態(tài)方法:Date.now()(推薦)
Date.now()是ES5引入的靜態(tài)方法,無需實例化Date對象即可直接獲取當前時間戳,語法簡潔且性能優(yōu)異,是獲取當前時間戳的首選方案。
// 直接調用靜態(tài)方法,返回13位毫秒級時間戳 const timestamp = Date.now(); console.log(timestamp); // 輸出示例:1726789254321
優(yōu)勢:無需創(chuàng)建Date實例,減少內存開銷;支持所有現代瀏覽器及IE9+。
適用場景:需要快速獲取當前時間戳的場景,如按鈕點擊時間記錄、接口請求時間戳參數。
1.2 實例方法:getTime()(兼容性首選)
getTime()是Date對象的原型方法,需通過實例調用,返回當前實例對應的毫秒級時間戳,兼容性覆蓋所有瀏覽器(包括IE6+)。
// 實例化Date對象后調用方法 const date = new Date(); const timestamp = date.getTime(); console.log(timestamp); // 輸出示例:1726789301234 // 簡化寫法(不創(chuàng)建變量引用) const timestampShort = new Date().getTime();
優(yōu)勢:兼容性無死角,精度與Date.now()一致;可通過自定義日期對象獲取指定時間的時間戳。
適用場景:需要兼容老舊瀏覽器的項目,或需獲取特定日期時間戳的場景。
1.3 實例方法:valueOf()(隱式轉換底層實現)
valueOf()是Object的通用方法,Date對象重寫了該方法以返回毫秒級時間戳,與getTime()功能完全一致。
const timestamp = new Date().valueOf(); console.log(timestamp); // 輸出示例:1726789356789
原理:當Date對象參與數值運算時,會自動調用valueOf()方法進行隱式轉換,例如:
// 隱式調用valueOf()獲取時間戳 const timestamp = +new Date(); console.log(timestamp); // 效果等同于new Date().valueOf()
1.4 靜態(tài)方法:Date.parse()(慎用,精度有限)
Date.parse()可解析日期字符串或Date對象并返回時間戳,但存在毫秒級精度丟失的問題,返回值的后三位固定為000。
// 解析Date對象(精度丟失)
const timestamp1 = Date.parse(new Date());
console.log(timestamp1); // 輸出示例:1726789400000(后三位為000)
// 解析日期字符串(支持格式有限)
const timestamp2 = Date.parse("2025-09-20 14:30:00");
console.log(timestamp2); // 輸出示例:1753026600000
注意事項:
- 僅支持
yyyy/MM/dd、yyyy-MM-ddTHH:mm:ss等標準格式字符串,解析yyyy-MM-dd HH:mm:ss可能在部分瀏覽器中失?。?/li> - 毫秒精度丟失,不適用于需要精確計時的場景(如秒殺倒計時)。
1.5 類型轉換:Number()(隱式轉換的顯式寫法)
通過Number()函數將Date對象強制轉換為數值類型,本質是調用valueOf()方法,精度與getTime()一致。
const date = new Date(); const timestamp = Number(date); console.log(timestamp); // 輸出示例:1726789452345
對比總結:
| 方法 | 語法簡潔度 | 精度 | 兼容性 | 推薦度 |
|---|---|---|---|---|
| Date.now() | ★★★★★ | 毫秒級 | IE9+ | ★★★★★ |
| new Date().getTime() | ★★★★☆ | 毫秒級 | 所有瀏覽器 | ★★★★★ |
| new Date().valueOf() | ★★★★☆ | 毫秒級 | 所有瀏覽器 | ★★★★☆ |
| Date.parse() | ★★★★☆ | 秒級(丟失毫秒) | 所有瀏覽器 | ★☆☆☆☆ |
| Number(new Date()) | ★★★☆☆ | 毫秒級 | 所有瀏覽器 | ★★★☆☆ |
二、格式轉換:時間戳與可讀日期的雙向轉換技巧
前端開發(fā)中常需將后端返回的時間戳轉換為用戶可讀的日期格式,或反之將用戶輸入的日期轉換為時間戳存儲。以下是覆蓋主流需求的轉換方案。
2.1 時間戳轉可讀日期:按需生成格式化字符串
根據業(yè)務場景不同,可讀日期格式主要分為"本地化格式"和"標準統(tǒng)一格式"兩類,前者適配不同地區(qū)顯示習慣,后者用于報表、日志等統(tǒng)一展示場景。
方案1:生成本地化格式(如"2025/9/20 下午2:45")
利用toLocaleString()方法自動適配系統(tǒng)區(qū)域設置,無需手動拼接,適合面向多地區(qū)用戶的產品。
/**
* 時間戳轉本地化日期時間(可自定義精度)
* @param {Number} timestamp - 13位毫秒級時間戳
* @param {Boolean} keepSeconds - 是否保留秒數
* @returns {String} 本地化日期時間字符串
*/
function toLocalDateTime(timestamp, keepSeconds = true) {
// 校驗并轉換時間戳類型(避免字符串類型導致的Invalid Date)
const date = new Date(Number(timestamp));
if (isNaN(date.getTime())) return "無效時間";
let result = date.toLocaleString();
// 移除秒數(如從"2025/9/20 14:45:30"變?yōu)?2025/9/20 14:45")
if (!keepSeconds) {
result = result.replace(/:\d{1,2}$/, "");
}
return result;
}
// 示例使用
console.log(toLocalDateTime(1726789530123)); // 輸出:2025/9/20 14:45:30(根據系統(tǒng)區(qū)域調整)
console.log(toLocalDateTime(1726789530123, false)); // 輸出:2025/9/20 14:45
方案2:生成標準統(tǒng)一格式(如"2025-09-20 14:45:30")
toLocaleString()存在瀏覽器兼容性差異(如IE返回"2025年9月20日"),需通過Date對象的獲取方法手動拼接,確??鐬g覽器一致性。
/**
* 時間戳轉標準格式(yyyy-MM-dd HH:mm:ss)
* @param {Number} timestamp - 13位毫秒級時間戳
* @returns {String} 標準日期時間字符串
*/
function toStandardDateTime(timestamp) {
const date = new Date(Number(timestamp));
if (isNaN(date.getTime())) return "無效時間";
// 獲取年、月、日(月份從0開始,需+1)
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); // 補零處理
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");
// 拼接格式
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 示例使用
console.log(toStandardDateTime(1726789530123)); // 輸出:2025-09-20 14:45:30
關鍵技巧:使用String.padStart(2, "0")確保月份、日期等字段始終為兩位數,避免出現"2025-9-5"等不規(guī)范格式。
2.2 可讀日期轉時間戳:解析與校驗并重
將用戶輸入或后端返回的日期字符串轉換為時間戳時,需先處理格式差異并校驗有效性,避免生成無效時間戳。
/**
* 日期字符串轉時間戳
* @param {String} dateStr - 日期字符串(支持yyyy-MM-dd、yyyy/MM/dd HH:mm等格式)
* @returns {Number|null} 13位毫秒級時間戳,無效時返回null
*/
function toTimestamp(dateStr) {
// 統(tǒng)一格式:將"-"替換為"/",適配Date.parse()解析規(guī)則
const normalizedStr = dateStr.replace(/-/g, "/");
const timestamp = Date.parse(normalizedStr);
// 校驗有效性(Date.parse()失敗時返回NaN)
if (isNaN(timestamp)) {
console.error("無效的日期字符串:", dateStr);
return null;
}
// Date.parse()返回秒級時間戳(后三位為0),需補全毫秒(此處取0)
return timestamp;
}
// 示例使用
console.log(toTimestamp("2025-09-20")); // 輸出:1726742400000
console.log(toTimestamp("2025/09/20 14:45")); // 輸出:1726789500000
console.log(toTimestamp("invalid-date")); // 輸出:null(控制臺報錯)
三、核心知識:Date對象全方位解析
時間戳的處理依賴Date對象的方法體系,深入理解其構造函數、核心方法及輸出格式,是解決復雜時間問題的基礎。
3.1 Date對象構造函數詳解
Date對象的構造函數支持多種參數形式,可靈活創(chuàng)建當前時間或指定時間的實例。
| 參數形式 | 說明 | 示例 |
|---|---|---|
| 無參數 | 創(chuàng)建當前時間的Date實例 | new Date() |
| 毫秒數(Number) | 根據時間戳創(chuàng)建實例(支持10位秒級或13位毫秒級) | new Date(1726789530123) |
| 日期字符串(String) | 解析字符串創(chuàng)建實例(推薦yyyy/MM/dd格式,兼容性優(yōu)于yyyy-MM-dd) | new Date("2025/09/20 14:45") |
| 年,月,…(多個參數) | 按年、月(0-11)、日、時、分、秒、毫秒順序創(chuàng)建實例 | new Date(2025, 8, 20, 14, 45, 30) |
注意事項:
- 月份參數為0-based(0代表1月,11代表12月),這是最易出錯的點;
- 當參數為兩位數年份(如
new Date(99, 8, 20)),會自動轉換為1999年。
3.2 常用Date對象方法分類
Date對象的方法按功能可分為"獲取類"、“設置類"和"格式化類”,以下是開發(fā)中高頻使用的方法清單。
(1)日期獲取類方法(本地時間)
| 方法名 | 說明 | 返回值范圍 |
|---|---|---|
| getFullYear() | 獲取四位數年份 | 如2025 |
| getMonth() | 獲取月份(0-11) | 0-11 |
| getDate() | 獲取月份中的日期(1-31) | 1-31 |
| getHours() | 獲取小時(0-23) | 0-23 |
| getMinutes() | 獲取分鐘(0-59) | 0-59 |
| getSeconds() | 獲取秒數(0-59) | 0-59 |
| getMilliseconds() | 獲取毫秒數(0-999) | 0-999 |
| getTime() | 獲取時間戳(毫秒級) | 13位數字 |
(2)格式化類方法(輸出字符串)
| 方法名 | 說明 | 輸出示例 |
|---|---|---|
| toLocaleDateString() | 本地化日期字符串 | “2025/9/20”(中文環(huán)境) |
| toLocaleTimeString() | 本地化時間字符串 | “14:45:30”(中文環(huán)境) |
| toDateString() | 簡化日期字符串(不含時間) | “Fri Sep 20 2025” |
| toTimeString() | 簡化時間字符串(含時區(qū)) | “14:45:30 GMT+0800 (中國標準時間)” |
| toUTCString() | UTC標準時間字符串 | “Fri, 20 Sep 2025 06:45:30 GMT” |
3.3 時間戳的本質與內部表示
JavaScript中Date對象的內部本質就是時間戳——一個表示毫秒數的64位浮點數。這種表示方式的優(yōu)勢在于:
- 便于日期的加減運算(直接通過時間戳差值計算);
- 避免時區(qū)差異導致的顯示混亂(存儲統(tǒng)一時間戳,展示時轉換為本地時間)。
例如,計算兩個日期之間的天數差:
/**
* 計算兩個日期的天數差
* @param {Number} timestamp1 - 起始時間戳
* @param {Number} timestamp2 - 結束時間戳
* @returns {Number} 天數差(絕對值)
*/
function getDayDiff(timestamp1, timestamp2) {
const msPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒數
return Math.abs(Math.floor((timestamp2 - timestamp1) / msPerDay));
}
// 示例:計算2025-09-20與2025-09-15的天數差
const diff = getDayDiff(1726742400000, 1726224000000);
console.log(diff); // 輸出:5
四、跨端適配:JavaScript與PHP時間戳轉換及兼容性處理
前端與后端交互時,最常見的問題是時間戳位數差異(JS為13位,PHP為10位),同時跨瀏覽器的解析差異也需特別處理。
4.1 JS與PHP時間戳雙向轉換
PHP的時間戳為"距離1970年1月1日的秒數"(10位),而JS為毫秒數(13位),轉換核心是乘以或除以1000。
(1)PHP時間戳(10位)轉JS時間戳(13位)
/**
* PHP時間戳轉JS時間戳
* @param {Number|String} phpTimestamp - 10位秒級時間戳
* @returns {Number} 13位毫秒級時間戳
*/
function phpToJsTimestamp(phpTimestamp) {
const num = Number(phpTimestamp);
if (isNaN(num) || String(num).length !== 10) {
console.error("無效的PHP時間戳:", phpTimestamp);
return null;
}
return num * 1000;
}
// 示例:PHP返回的10位時間戳轉JS可用格式
const jsTimestamp = phpToJsTimestamp("1726789530");
console.log(toStandardDateTime(jsTimestamp)); // 輸出:2025-09-20 14:45:30
(2)JS時間戳(13位)轉PHP時間戳(10位)
/**
* JS時間戳轉PHP時間戳
* @param {Number} jsTimestamp - 13位毫秒級時間戳
* @returns {Number} 10位秒級時間戳
*/
function jsToPhpTimestamp(jsTimestamp) {
if (isNaN(jsTimestamp) || String(jsTimestamp).length !== 13) {
console.error("無效的JS時間戳:", jsTimestamp);
return null;
}
return Math.floor(jsTimestamp / 1000);
}
// 示例:JS時間戳轉PHP可用格式
const phpTimestamp = jsToPhpTimestamp(1726789530123);
console.log(phpTimestamp); // 輸出:1726789530
(3)實戰(zhàn)場景:顯示"多久前"
結合PHP時間戳轉換,實現社交平臺常見的"XX秒前/分鐘前"功能:
/**
* 計算距離當前時間的差值描述
* @param {Number|String} phpTimestamp - PHP返回的10位時間戳
* @returns {String} 差值描述(如"2分鐘前")
*/
function formatTimeAgo(phpTimestamp) {
const jsNow = Date.now();
const jsTarget = phpToJsTimestamp(phpTimestamp);
if (!jsTarget) return "未知時間";
const secondsDiff = Math.floor((jsNow - jsTarget) / 1000);
// 按秒、分鐘、小時、天分級顯示
if (secondsDiff < 60) return `${secondsDiff}秒前`;
if (secondsDiff < 3600) return `${Math.floor(secondsDiff / 60)}分鐘前`;
if (secondsDiff < 86400) return `${Math.floor(secondsDiff / 3600)}小時前`;
return `${Math.floor(secondsDiff / 86400)}天前`;
}
// 示例使用
console.log(formatTimeAgo("1726789530")); // 輸出:2分鐘前(根據當前時間動態(tài)變化)
4.2 跨瀏覽器兼容性處理
不同瀏覽器對Date對象的解析存在差異,需針對性處理常見問題:
問題1:日期字符串解析差異
IE瀏覽器不支持yyyy-MM-dd格式的字符串解析,需統(tǒng)一轉換為yyyy/MM/dd格式:
// 兼容處理:統(tǒng)一日期字符串格式
function normalizeDateStr(dateStr) {
// 將"-"替換為"/",移除T分隔符(如ISO格式"2025-09-20T14:45")
return dateStr.replace(/-/g, "/").replace("T", " ");
}
// 修復IE解析問題
const date = new Date(normalizeDateStr("2025-09-20T14:45"));
問題2:toLocaleString()格式不一致
不同瀏覽器的toLocaleString()輸出格式不同,如需統(tǒng)一格式,建議使用本文2.1節(jié)的toStandardDateTime()方法手動拼接。
問題3:時間戳位數不規(guī)范
后端可能返回12位或其他位數的時間戳,需統(tǒng)一處理為13位:
/**
* 標準化時間戳為13位毫秒級
* @param {Number|String} timestamp - 任意位數的時間戳
* @returns {Number|null} 13位時間戳
*/
function normalizeTimestamp(timestamp) {
const str = String(timestamp).trim();
if (!/^\d+$/.test(str)) return null;
switch (str.length) {
case 10: return Number(str) * 1000; // 10位→13位
case 12: return Number(str.padEnd(13, "0")); // 12位→13位
case 13: return Number(str); // 正常13位
default: return null; // 不支持的位數
}
}
// 示例使用
console.log(normalizeTimestamp("1726789530")); // 1726789530000(10位→13位)
console.log(normalizeTimestamp("172678953012")); // 1726789530120(12位→13位)
五、總結
時間戳處理是前端開發(fā)的基礎技能,掌握正確的方法和避坑技巧能顯著提升開發(fā)效率。以下是核心總結:
獲取時間戳首選方案:
- 現代項目:優(yōu)先使用
Date.now(),語法簡潔且性能優(yōu); - 老舊瀏覽器兼容:使用
new Date().getTime(),覆蓋所有IE版本。
- 現代項目:優(yōu)先使用
格式轉換原則:
- 本地化顯示:使用
toLocaleString(),適配用戶區(qū)域設置; - 統(tǒng)一格式需求:手動拼接
getFullYear()等方法的返回值,避免瀏覽器差異; - 必做校驗:轉換前通過
isNaN(date.getTime())判斷時間有效性。
- 本地化顯示:使用
跨端交互關鍵:
- 明確位數:JS用13位毫秒級,PHP用10位秒級,轉換時務必乘除1000;
- 格式統(tǒng)一:后端返回日期字符串時,優(yōu)先使用
yyyy/MM/dd HH:mm:ss格式。
性能與兼容性平衡:
- 避免頻繁創(chuàng)建
Date實例:可緩存當前時間戳減少性能開銷; - 復雜場景推薦庫:如
dayjs、moment.js(輕量級優(yōu)先選dayjs),封裝了更完善的時間處理能力。
- 避免頻繁創(chuàng)建
通過本文的方法與技巧,可輕松應對前端開發(fā)中90%以上的時間戳處理場景,從基礎的格式轉換到復雜的跨端適配,都能實現精準、高效的開發(fā)落地。
到此這篇關于利用JavaScript實現時間戳功能的5種方法的文章就介紹到這了,更多相關JS實現時間戳功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript用20行代碼實現虎年春節(jié)倒計時
春節(jié)將至,相信大家跟小編一樣很激動呀。為了迎接虎年春節(jié)到來,小編為大家準備了一個虎年春節(jié)倒計時,僅20行代碼用js就實現啦。感興趣的可以動手試一試2022-01-01
JavaScript事件循環(huán)及宏任務微任務原理解析
這篇文章主要介紹了JavaScript事件循環(huán)及宏任務微任務原理解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09

