前端日期格式化主要介绍原生 API Intl.DateTimeFormat 的用法、参数及优缺点，对比了手动拼接、dayjs 和 moment.js 等替代方案。Intl.DateTimeFormat 性能优、无依赖且支持国际化，但配置繁琐且 IE 兼容性有限。dayjs 作为轻量级库平衡了功能与体积，适合大多数新项目。建议根据是否需要国际化、时区及相对时间功能选择合适的方案，并注意时区统一与实例复用优化性能。
Intl.DateTimeFormat 是 ES6 新增的原生国际化 API，专门用于语言敏感的日期和时间格式化，由浏览器原生实现，无需引入第三方库，是前端处理多语言日期格式化的首选方案。
new Intl.DateTimeFormat(locales, options)
locales：字符串 / 字符串数组，指定语言 / 地区（如 zh-CN、en-US、ja-JP），支持 BCP 47 语言标签。
options：配置对象，控制日期 / 时间的显示格式（可选）。
基础参数
日期时间组件参数
格式参数
// 当前时间，默认语言（浏览器语言），默认格式
const date = new Date(2026, 0, 8, 14, 30, 5); // 2026-01-08 14:30:05
const formatter = new Intl.DateTimeFormat();
console.log(formatter.format(date)); // 输出（zh-CN 环境）：2026/1/8
const date = new Date(2026, 0, 8); // 中文（完整格式）
const cnFormatter = new Intl.DateTimeFormat('zh-CN', {year:'numeric', month:'long', day:'numeric', weekday:'long'});
console.log(cnFormatter.format(date)); // 2026 年 1 月 8 日星期四
// 英文（美式）
const enFormatter = new Intl.DateTimeFormat('en-US', {year:'numeric', month:'short', day:'2-digit', weekday:'short'});
console.log(enFormatter.format(date)); // Thu, Jan 08, 2026
const date = new Date(2026, 0, 8, 14, 30, 5); // 北京时间（东八区）+ 12 小时制
const beijingFormatter = new Intl.DateTimeFormat('zh-CN', {timeZone:'Asia/Shanghai', hour12:true, year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit', second:'2-digit'});
console.log(beijingFormatter.format(date)); // 2026/01/08 下午 02:30:05
// UTC 时区
const utcFormatter = new Intl.DateTimeFormat('en-US', {timeZone:'UTC', hour12:false, hour:'2-digit', minute:'2-digit'});
console.log(utcFormatter.format(date)); // 06:30（UTC 比北京时间慢 8 小时）
const date = new Date(2026, 0, 8);
const formatter = new Intl.DateTimeFormat('zh-CN', { year:'numeric', month:'long', day:'numeric'});
// 拆分格式化后的各个部分（便于自定义拼接）
const parts = formatter.formatToParts(date);
console.log(parts); // 输出：// [// { type: 'year', value: '2026' },// { type: 'literal', value: '年' },// { type: 'month', value: '1 月' },// { type: 'literal', value: '' },// { type: 'day', value: '8 日' }// ]
// 自定义拼接：2026-01-08
const customFormat = parts.reduce((res, part)=>{
if(part.type ==='year') res += part.value;
if(part.type ==='month') res +='-'+ part.value.replace('月','').padStart(2,'0');
if(part.type ==='day') res +='-'+ part.value.replace('日','').padStart(2,);
res;},);
.(customFormat);
优点
缺点
适用场景：简单格式、无需国际化、兼容老旧浏览器
function formatDate(date){
const year = date.getFullYear();
const month = String(date.getMonth()+1).padStart(2,'0'); // 补零
const day = String(date.getDate()).padStart(2,'0');
const hour = String(date.getHours()).padStart(2,'0');
const minute = String(date.getMinutes()).padStart(2,'0');
return `${year}-${month}-${day} ${hour}:${minute}`;
}
console.log(formatDate(new Date(2026, 0, 8, 14, 30))); // 2026-01-08 14:30
优缺点：简单灵活，但不支持国际化、时区，需手动处理补零 / 时区偏移，代码冗余。
简介：替代 moment.js 的轻量库（体积～2KB），API 简洁，支持插件扩展。
安装：
npm install dayjs
示例：
import dayjs from 'dayjs';
// 引入国际化插件
import 'dayjs/locale/zh-cn';
// 引入时区插件
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.locale('zh-cn'); // 设置中文
// 基础格式化
console.log(dayjs('2026-01-08').format('YYYY-MM-DD HH:mm:ss')); // 2026-01-08 00:00:00
// 时区格式化
console.log(dayjs('2026-01-08 14:30').tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm')); // 2026-01-08 14:30
console.log(dayjs('2026-01-08 14:30').tz('UTC').format('YYYY-MM-DD HH:mm')); // 2026-01-08 06:30
// 相对时间
console.log(dayjs('2026-01-08').fromNow()); // （根据当前时间）X 天后
优缺点：体积小、API 友好、支持国际化 / 时区 / 相对时间；需引入第三方库，增加包体积（但远小于 moment.js）。
简介：老牌日期处理库，功能全面，但体积大（~200KB），已进入维护模式（不再新增功能）。
示例：
import moment from 'moment';
import 'moment-timezone';
// 格式化
console.log(moment('2026-01-08').format('YYYY 年 MM 月 DD 日')); // 2026 年 01 月 08 日
// 时区
console.log(moment.tz('2026-01-08 14:30','Asia/Shanghai').utc().format('YYYY-MM-DD HH:mm')); // 2026-01-08 06:30
优缺点：功能最全、文档丰富；体积大、性能一般、已停止维护，不建议新项目使用。
总结
建议
新项目优先选择：
兼容性处理：
性能优化：
避坑提醒：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online