1. 常用日期格式与方法
1.1 Date 对象的基础格式化能力
在 JavaScript 中，Date 对象负责表示时间点，提供基础的格式化能力。通过 new Date() 可以创建当前时间点，通过 toDateString、toLocaleDateString、toISOString 等方法输出不同风格的文本。
这类方法的结果受实现与浏览器本地化设置影响，尤其是 toLocaleDateString，它会依据 区域设置和 选项对象来决定格式。
const d = new Date();
console.log(d.toDateString()); // 如 "Tue Aug 20 2024"
console.log(d.toLocaleDateString()); // 本地化格式，可能因环境而异
console.log(d.toISOString()); // ISO 8601 格式，如 "2024-08-20T12:34:56.789Z"
通过这些方法可以快速获得可用的文本表示，其中 toISOString 总是以 UTC 时间给出标准化格式，便于跨系统传输。
1.2 常用格式函数：toLocaleDateString、toDateString、toISOString、toUTCString
除了基础方法，toLocaleDateString、toDateString、toISOString、toUTCString 也常用来实现不同场景的文本输出。组合使用可以覆盖需要的格式风格。
下面给出一个常见的组合示例，其中包含本地化日期和 ISO 输出以供对比。
const now = new Date();
console.log(now.toDateString()); // 例如 "Wed Aug 21 2024"
console.log(now.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }));
console.log(now.toISOString()); // 全局标准格式
console.log(now.toUTCString()); // UTC 时区字符串
2. 使用 Intl.DateTimeFormat 进行本地化格式化
2.1 基本使用方式
Intl.DateTimeFormat 是实现本地化日期格式的核心 API，支持指定 区域设置和 格式选项，从而得到一致的文本输出。
通过构造函数 new Intl.DateTimeFormat()，你可以把格式化逻辑与数据分离，便于维护与复用。
const d = new Date();
const fmtCN = new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
console.log(fmtCN.format(d)); // 如 "2024年8月21日"
如果需要固定的语言环境而忽略客户端语言，locales 可以设为一个固定值，例如 'en-US'。
const d = new Date();
const fmtUS = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
console.log(fmtUS.format(d)); // 例如 "08/21/2024"
2.2 时区与数字格式选项
通过组合日期和时间字段，可以得到包含小时、分、秒的格式化结果，这对日志和报告非常有用。
timeZone 选项让你在不改变本地时间的情况下以指定时区进行格式化，常见取值包括 'UTC'、'Asia/Shanghai' 等。
const d = new Date();
const tz = new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit', day: '2-digit',hour: '2-digit', minute: '2-digit', second: '2-digit',timeZone: 'UTC'
});
console.log(tz.format(d)); // 例如 "08/21/2024, 16:30:45"（UTC 时间）
3. 自定义日期格式化方法
3.1 自定义格式模板的设计
在实际项目中，自定义格式模板往往比标准化字符串更灵活，常见模板包括 yyyy-MM-dd、MM/dd/yyyy、HH:mm:ss 等组合。
设计一个轻量级模板系统时，应将日期字段与模板中的占位符一一映射，确保在不同浏览器中的行为一致性。
// 设计要点：占位符 -> 日期字段映射
// 常用占位符：yyyy, MM, dd, HH, mm, ss
3.2 实现一个通用的 formatDate 函数
下面给出一个简单且可扩展的实现，支持常见占位符并对单数字进行 零填充。
function pad(n){ return n < 10 ? '0' + n : '' + n; }function formatDate(date, fmt){const map = {'yyyy': date.getFullYear(),'MM': pad(date.getMonth() + 1),'dd': pad(date.getDate()),'HH': pad(date.getHours()),'mm': pad(date.getMinutes()),'ss': pad(date.getSeconds()),};return fmt.replace(/yyyy|MM|dd|HH|mm|ss/g, matched => map[matched]);
}// 使用示例
const d = new Date();
console.log(formatDate(d, 'yyyy-MM-dd HH:mm:ss'));
通过上述方法，自定义格式可以覆盖大多数前端展示需求，同时也便于未来扩展新的占位符。
4. 高级话题与兼容性
4.1 时区处理与跨浏览器兼容
在一些老旧浏览器中，Intl API 可能缺失，需要使用 polyfill 或者退回到自定义格式逻辑，确保用户端体验一致。
对大多数现代浏览器，优先使用 Intl.DateTimeFormat，再结合自定义格式方法充当兜底，避免跨区域显示错误。
// 简单降级策略示例
let formatted;
if (typeof Intl !== 'undefined' && typeof Intl.DateTimeFormat === 'function') {formatted = new Intl.DateTimeFormat('en-US', { year:'numeric', month:'2-digit', day:'2-digit' }).format(new Date());
} else {// 手动格式化（简化示例）const d = new Date();formatted = [d.getFullYear(),('0' + (d.getMonth() + 1)).slice(-2),('0' + d.getDate()).slice(-2)].join('-');
}
console.log(formatted);
4.2 使用第三方库的取舍
第三方库如 Day.js、date-fns、LUXON 提供丰富的时区、相对时间等功能，注意权衡体积和加载时机。
// Day.js 示例（需要引入 dayjs 库及插件）
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'));
