全面解析JavaScript中時間格式化API實戰(zhàn)指南

更新時間：2025年11月11日 08:24:46 作者：excel

時間與日期,是前端開發(fā)中最容易“踩坑”的部分,本文將系統(tǒng)解析 JavaScript 提供的時間格式化方法,幫你徹底搞懂它們的差異、用途與正確使用方式

時間與日期，是前端開發(fā)中最容易“踩坑”的部分。不同瀏覽器、不同區(qū)域、甚至不同系統(tǒng)語言，都會造成輸出不一致。本文將系統(tǒng)解析 JavaScript 提供的時間格式化方法，幫你徹底搞懂它們的差異、用途與正確使用方式。

一、背景：為什么會有這么多時間格式化方法

JavaScript 的時間系統(tǒng)基于 ECMAScript 時間標準，時間點以 UTC 為基準（Unix Epoch：1970-01-01 00:00:00 UTC）。
但由于前端代碼運行在不同地域的用戶設備中，所以：

一部分方法輸出國際標準格式（機器可讀）；
一部分方法輸出本地化格式（用戶可讀）；
一部分方法支持自定義區(qū)域、時區(qū)和格式。

二、核心 API 總覽表

方法	時區(qū)	是否本地化	是否可定制	輸出示例	主要用途
toString()	本地時間	否	否	"Tue Nov 11 2025 17:00:00 GMT+0800 (China Standard Time)"	調(diào)試/默認輸出
toUTCString()	UTC	否	否	"Tue, 11 Nov 2025 09:00:00 GMT"	標準化輸出（日志/HTTP）
toGMTString()	UTC	否	否	"Tue, 11 Nov 2025 09:00:00 GMT"	歷史遺留（不推薦）
toISOString()	UTC	否	否	"2025-11-11T09:00:00.000Z"	數(shù)據(jù)交換（JSON/HTTP）
toLocaleString()	本地時區(qū)	? 是	? 是	"2025/11/11 17:00:00"	用戶界面顯示
Intl.DateTimeFormat	任意指定	? 是	? 是	"11 November 2025, 17:00:00"	完全可控本地化輸出

三、逐個詳解與代碼示例

toUTCString()

用途：輸出 UTC 時間的 RFC1123 標準格式

語法：

date.toUTCString();

示例：

const d = new Date('2025-11-11T09:00:00Z');
console.log(d.toUTCString());
// "Tue, 11 Nov 2025 09:00:00 GMT"

特性：

輸出固定格式，不可配置；
常用于日志、HTTP Header；
不受系統(tǒng)區(qū)域影響。

適用場景：

// 設置 HTTP 響應頭
response.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());

toGMTString()（已廢棄）

用途：toUTCString() 的舊版本，早期 Netscape/IE 兼容接口。

語法：

date.toGMTString();

說明：

在現(xiàn)代瀏覽器中行為與 toUTCString() 相同；
ECMAScript 已標記為 deprecated；
不推薦使用，僅兼容老項目。

toLocaleString()

用途：輸出與用戶地區(qū)語言相符的本地化時間字符串。

語法：

date.toLocaleString([locales], [options]);

參數(shù)說明：

參數(shù)	類型	說明
locales	string 或 string[]	語言代碼（如 'zh-CN', 'en-US'）
options	object	格式化選項

常用選項：

{
  timeZone: 'Asia/Shanghai', // 指定時區(qū)
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false
}

示例：

const d = new Date('2025-11-11T09:00:00Z');
console.log(d.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' }));
// "2025/11/11 17:00:00"

console.log(d.toLocaleString('en-US', { timeZone: 'America/New_York' }));
// "11/11/2025, 4:00:00 AM"

可本地化、可控、最靈活。

toISOString()

用途：輸出 ISO 8601 標準的 UTC 時間字符串。

語法：

date.toISOString();

輸出示例：

new Date('2025-11-11T09:00:00Z').toISOString();
// "2025-11-11T09:00:00.000Z"

特性：

輸出固定格式；
精確到毫秒；
常用于 JSON / 數(shù)據(jù)交換；
Node.js 和后端系統(tǒng)高度兼容。

示例：

JSON.stringify({ createdAt: new Date().toISOString() });

Intl.DateTimeFormat

用途：提供強大的國際化時間格式化能力。

語法：

new Intl.DateTimeFormat(locales, options).format(date);

示例：

const d = new Date('2025-11-11T09:00:00Z');
const fmt = new Intl.DateTimeFormat('en-GB', {
  timeZone: 'UTC',
  dateStyle: 'full',
  timeStyle: 'long'
});
console.log(fmt.format(d));
// "Tuesday, 11 November 2025 at 09:00:00 GMT"

更細粒度控制：

const custom = new Intl.DateTimeFormat('zh-CN', {
  timeZone: 'Asia/Shanghai',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long',
  hour: '2-digit',
  minute: '2-digit'
});
console.log(custom.format(d));
// "2025年11月11日星期二 17:00"

支持：

時區(qū)切換；
多語言；
長短日期格式；
星期顯示；
本地化數(shù)字。

四、對比實測：同一個時間，不同輸出

const d = new Date('2025-11-11T09:00:00Z');

console.log(d.toString());         // "Tue Nov 11 2025 17:00:00 GMT+0800 (China Standard Time)"
console.log(d.toUTCString());      // "Tue, 11 Nov 2025 09:00:00 GMT"
console.log(d.toISOString());      // "2025-11-11T09:00:00.000Z"
console.log(d.toLocaleString());   // "2025/11/11 17:00:00"
console.log(
  new Intl.DateTimeFormat('en-US', { timeZone: 'UTC' }).format(d)
);                                 // "11/11/2025"

總結圖示：

方法	時區(qū)	輸出可定制	推薦用途
toUTCString()	UTC	?	機器可讀、HTTP Header
toGMTString()	UTC	?	已廢棄
toLocaleString()	本地時區(qū)	?	用戶界面展示
toISOString()	UTC	?	數(shù)據(jù)序列化、存儲
Intl.DateTimeFormat	任意	???	最強國際化控制

五、潛在問題與實戰(zhàn)建議

問題	說明	建議
不同瀏覽器格式差異	特別是 toLocaleString()	顯式指定 locale + timeZone
服務器和客戶端時區(qū)不一致	SSR 輸出 UTC、CSR 輸出本地	統(tǒng)一 timeZone（如 'UTC' 或 'Asia/Shanghai'）
想統(tǒng)一格式輸出	toUTCString() 太固定	改用 Intl.DateTimeFormat 或 dayjs
移動端差異	ICU 版本不同	避免依賴系統(tǒng)默認格式

六、實踐案例：統(tǒng)一格式化函數(shù)封裝

function formatDate(date, opts = {}) {
  const {
    locale = 'zh-CN',
    timeZone = 'Asia/Shanghai',
    options = {}
  } = opts;

  const fmt = new Intl.DateTimeFormat(locale, {
    timeZone,
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
    ...options
  });
  return fmt.format(date);
}

console.log(formatDate(new Date(), { timeZone: 'UTC' }));
// 輸出如：2025/11/11 09:00:00

七、結語：選擇建議總結

場景	推薦 API
機器通信 / JSON / HTTP	toISOString() / toUTCString()
用戶界面顯示（國際化）	toLocaleString() 或 Intl.DateTimeFormat
跨區(qū)域一致性（前后端）	固定使用 UTC + 格式化控制
需要靈活格式	使用 Intl.DateTimeFormat 或 dayjs

一句話總結：

toUTCString()：標準化 UTC 文本輸出
toLocaleString()：本地化用戶界面輸出
toISOString()：數(shù)據(jù)傳輸標準輸出
Intl.DateTimeFormat：國際化與自定義格式首選

到此這篇關于全面解析JavaScript中時間格式化API實戰(zhàn)指南的文章就介紹到這了,更多相關JavaScript時間格式化API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

javascript 事件處理、鼠標拖動效果實現(xiàn)方法詳解
在經(jīng)歷了漫長的時期，終于下定了決心自己寫一個層的拖動。當然了，其它的拖動也是這樣的思路和做法，或者說，這樣的拖動適合所有的可見元素
2012-05-05
webpack4升級到webpack5的實戰(zhàn)經(jīng)驗總結
有些老項目的包長時間沒有更新,導致項目中有些性能問題,在項目迭代中考慮升級包,下面這篇文章主要給大家介紹了關于webpack4升級到webpack5的實戰(zhàn)經(jīng)驗,需要的朋友可以參考下
2022-08-08
關于JS與jQuery中的文檔加載問題
本文通過實例代碼給大家講解了js和jquery中的文檔加載問題，感興趣的的朋友一起看看吧
2017-08-08
JavaScript如何識別純血鴻蒙系統(tǒng)實例代碼
純血鴻蒙是對華為鴻蒙操作系統(tǒng)的一個特定稱呼,通常意味著在這個平臺上開發(fā)應用的過程比較純粹,或者說是充分利用和發(fā)揮鴻蒙系統(tǒng)的特性,這篇文章主要介紹了JavaScript如何識別純血鴻蒙系統(tǒng)的相關資料,需要的朋友可以參考下
2025-06-06
js類定義函數(shù)時用prototype與不用的區(qū)別示例介紹
沒有使用prototype的方法相當于類的靜態(tài)方法，相反，使用prototype的方法相當于類的實例方法，不許new后才能使用
2014-06-06
[換皮膚程序]一個比較使用的腳本程序
[換皮膚程序]一個比較使用的腳本程序...
2006-10-10
js和css寫一個可以自動隱藏的懸浮框
用js和css寫一個可以自動隱藏的懸浮框。css肯定是用來控制樣式的，js用來控制器顯示與隱藏的,需要的朋友可以參考下
2014-03-03
jser必看的破解javascript各種加密的反向思維方法
才發(fā)現(xiàn)的破解javascript各種加密的反向思維方法,大家有好的方法都跟帖啊最近發(fā)現(xiàn)了一個代碼，加密了5層左右，我將破解到最后一步，而且不用javascript解密程序
2007-04-04
javascript入門之數(shù)組[新手必看]
本文介紹了javascript 數(shù)組的定義和數(shù)組元素的操作，ECMAScript中的數(shù)組方法...希望對大家有所幫助
2016-11-11
帶左右箭頭圖片輪播的JS代碼
這篇文章主要介紹了帶左右箭頭圖片輪播的JS代碼，有需要的朋友可以參考一下
2013-12-12