全面解析JavaScript中時(shí)間格式化API實(shí)戰(zhàn)指南
更新時(shí)間：2025年11月11日 08:24:46 作者：excel
時(shí)間與日期,是前端開(kāi)發(fā)中最容易“踩坑”的部分,本文將系統(tǒng)解析 JavaScript 提供的時(shí)間格式化方法,幫你徹底搞懂它們的差異、用途與正確使用方式
時(shí)間與日期，是前端開(kāi)發(fā)中最容易“踩坑”的部分。不同瀏覽器、不同區(qū)域、甚至不同系統(tǒng)語(yǔ)言，都會(huì)造成輸出不一致。本文將系統(tǒng)解析 JavaScript 提供的時(shí)間格式化方法，幫你徹底搞懂它們的差異、用途與正確使用方式。
一、背景：為什么會(huì)有這么多時(shí)間格式化方法
JavaScript 的時(shí)間系統(tǒng)基于 ECMAScript 時(shí)間標(biāo)準(zhǔn)，時(shí)間點(diǎn)以 UTC 為基準(zhǔn)（Unix Epoch：1970-01-01 00:00:00 UTC）。
但由于前端代碼運(yùn)行在不同地域的用戶設(shè)備中，所以：
- 一部分方法輸出國(guó)際標(biāo)準(zhǔn)格式（機(jī)器可讀）；
- 一部分方法輸出本地化格式（用戶可讀）；
- 一部分方法支持自定義區(qū)域、時(shí)區(qū)和格式。
二、核心 API 總覽表
| 方法 | 時(shí)區(qū) | 是否本地化 | 是否可定制 | 輸出示例 | 主要用途 |
|---|---|---|---|---|---|
| toString() | 本地時(shí)間 | 否 | 否 | "Tue Nov 11 2025 17:00:00 GMT+0800 (China Standard Time)" | 調(diào)試/默認(rèn)輸出 |
| toUTCString() | UTC | 否 | 否 | "Tue, 11 Nov 2025 09:00:00 GMT" | 標(biāo)準(zhǔn)化輸出（日志/HTTP） |
| toGMTString() | UTC | 否 | 否 | "Tue, 11 Nov 2025 09:00:00 GMT" | 歷史遺留（不推薦） |
| toISOString() | UTC | 否 | 否 | "2025-11-11T09:00:00.000Z" | 數(shù)據(jù)交換（JSON/HTTP） |
| toLocaleString() | 本地時(shí)區(qū) | ? 是 | ? 是 | "2025/11/11 17:00:00" | 用戶界面顯示 |
| Intl.DateTimeFormat | 任意指定 | ? 是 | ? 是 | "11 November 2025, 17:00:00" | 完全可控本地化輸出 |
三、逐個(gè)詳解與代碼示例
toUTCString()
用途：輸出 UTC 時(shí)間的 RFC1123 標(biāo)準(zhǔn)格式
語(yǔ)法：
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ū)域影響。
適用場(chǎng)景：
// 設(shè)置 HTTP 響應(yīng)頭
response.setHeader('Expires', new Date(Date.now() + 3600000).toUTCString());
toGMTString()（已廢棄）
用途：toUTCString() 的舊版本，早期 Netscape/IE 兼容接口。
語(yǔ)法：
date.toGMTString();
說(shuō)明：
- 在現(xiàn)代瀏覽器中行為與
toUTCString()相同； - ECMAScript 已標(biāo)記為 deprecated；
- 不推薦使用，僅兼容老項(xiàng)目。
toLocaleString()
用途：輸出與用戶地區(qū)語(yǔ)言相符的本地化時(shí)間字符串。
語(yǔ)法：
date.toLocaleString([locales], [options]);
參數(shù)說(shuō)明：
| 參數(shù) | 類型 | 說(shuō)明 |
|---|---|---|
| locales | string 或 string[] | 語(yǔ)言代碼（如 'zh-CN', 'en-US'） |
| options | object | 格式化選項(xiàng) |
常用選項(xiàng)：
{
timeZone: 'Asia/Shanghai', // 指定時(shí)區(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 標(biāo)準(zhǔn)的 UTC 時(shí)間字符串。
語(yǔ)法：
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
用途：提供強(qiáng)大的國(guó)際化時(shí)間格式化能力。
語(yǔ)法：
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"
更細(xì)粒度控制：
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"
支持：
- 時(shí)區(qū)切換；
- 多語(yǔ)言；
- 長(zhǎng)短日期格式；
- 星期顯示；
- 本地化數(shù)字。
四、對(duì)比實(shí)測(cè)：同一個(gè)時(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"
總結(jié)圖示：
| 方法 | 時(shí)區(qū) | 輸出可定制 | 推薦用途 |
|---|---|---|---|
| toUTCString() | UTC | ? | 機(jī)器可讀、HTTP Header |
| toGMTString() | UTC | ? | 已廢棄 |
| toLocaleString() | 本地時(shí)區(qū) | ? | 用戶界面展示 |
| toISOString() | UTC | ? | 數(shù)據(jù)序列化、存儲(chǔ) |
| Intl.DateTimeFormat | 任意 | ??? | 最強(qiáng)國(guó)際化控制 |
五、潛在問(wèn)題與實(shí)戰(zhàn)建議
| 問(wèn)題 | 說(shuō)明 | 建議 |
|---|---|---|
| 不同瀏覽器格式差異 | 特別是 toLocaleString() | 顯式指定 locale + timeZone |
| 服務(wù)器和客戶端時(shí)區(qū)不一致 | SSR 輸出 UTC、CSR 輸出本地 | 統(tǒng)一 timeZone（如 'UTC' 或 'Asia/Shanghai'） |
| 想統(tǒng)一格式輸出 | toUTCString() 太固定 | 改用 Intl.DateTimeFormat 或 dayjs |
| 移動(dòng)端差異 | ICU 版本不同 | 避免依賴系統(tǒng)默認(rèn)格式 |
六、實(shí)踐案例：統(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
七、結(jié)語(yǔ)：選擇建議總結(jié)
| 場(chǎng)景 | 推薦 API |
|---|---|
| 機(jī)器通信 / JSON / HTTP | toISOString() / toUTCString() |
| 用戶界面顯示（國(guó)際化） | toLocaleString() 或 Intl.DateTimeFormat |
| 跨區(qū)域一致性（前后端） | 固定使用 UTC + 格式化控制 |
| 需要靈活格式 | 使用 Intl.DateTimeFormat 或 dayjs |
一句話總結(jié)：
toUTCString()：標(biāo)準(zhǔn)化 UTC 文本輸出toLocaleString()：本地化用戶界面輸出toISOString()：數(shù)據(jù)傳輸標(biāo)準(zhǔn)輸出Intl.DateTimeFormat：國(guó)際化與自定義格式首選
到此這篇關(guān)于全面解析JavaScript中時(shí)間格式化API實(shí)戰(zhàn)指南的文章就介紹到這了,更多相關(guān)JavaScript時(shí)間格式化API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能
這篇文章主要介紹了帝國(guó)cms首頁(yè)列表頁(yè)實(shí)現(xiàn)點(diǎn)贊功能的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了js獲取url傳值的方法,實(shí)例分析了字符串分割與正則分析兩種方法,并補(bǔ)充了一個(gè)基于正則匹配實(shí)現(xiàn)的js獲取url的get傳值函數(shù),需要的朋友可以參考下2015-12-12
JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了四個(gè)JavaScript中檢測(cè)數(shù)據(jù)類型的常用方法，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-04-04
微信公眾號(hào)H5之微信分享常見(jiàn)錯(cuò)誤和問(wèn)題(小結(jié))
這篇文章主要介紹了微信公眾號(hào)H5之微信分享常見(jiàn)錯(cuò)誤和問(wèn)題(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法淺析
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱，這種功能怎么實(shí)現(xiàn)呢？本篇文章帶你探索2023-02-02
基于JavaScript實(shí)現(xiàn)瀑布流布局(二)
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)瀑布流布局的相關(guān)資料,實(shí)現(xiàn)鼠標(biāo)下拉圖片自動(dòng)加載效果，和百度圖片效果類似，需要的朋友可以參考下2016-01-01
js選取多個(gè)或單個(gè)元素的實(shí)現(xiàn)代碼（用class）
js選取多個(gè)或單個(gè)元素的實(shí)現(xiàn)代碼（用class），需要的朋友可以參考下2012-08-08
網(wǎng)頁(yè)和瀏覽器兼容性問(wèn)題匯總(draft1)
由于IE擴(kuò)展了許多私有的DOM、CSS等導(dǎo)致許多網(wǎng)頁(yè)的開(kāi)發(fā)者都根據(jù)IE開(kāi)發(fā)，才導(dǎo)致許多網(wǎng)頁(yè)的不規(guī)范，從而導(dǎo)致現(xiàn)在的瀏覽器瀏覽相同網(wǎng)頁(yè)效果不盡相同。2009-06-06![Array.prototype.concat不是通用方法反駁[譯]](http://img.jbzj.com/images/xgimg/bcimg8.png)
Array.prototype.concat不是通用方法反駁[譯]
ECMAScript 5.1規(guī)范中指出,數(shù)組方法concat是通用的(generic).本文反駁了這一結(jié)論,因?yàn)閷?shí)際上并不是這樣的2012-09-09
前端實(shí)現(xiàn)全局主題切換功能實(shí)例代碼
這篇文章主要介紹了如何使用ReactHook和Context實(shí)現(xiàn)全局主題切換的功能,通過(guò)創(chuàng)建一個(gè)Context對(duì)象和一個(gè)ThemeProvider組件,可以將當(dāng)前主題存儲(chǔ)在Context中,并提供一個(gè)切換主題的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-03-03