前端日期格式化:Intl.DateTimeFormat 详解与替代方案
前端日期格式化主要介绍原生 API Intl.DateTimeFormat 的用法、参数及优缺点,对比了手动拼接、dayjs 和 moment.js 等替代方案。Intl.DateTimeFormat 性能优、无依赖且支持国际化,但配置繁琐且 IE 兼容性有限。dayjs 作为轻量级库平衡了功能与体积,适合大多数新项目。建议根据是否需要国际化、时区及相对时间功能选择合适的方案,并注意时区统一与实例复用优化性能。

前端日期格式化主要介绍原生 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