1. 需求分析与设计原则
在 web 应用中，日期的展示需要稳定、灵活且可本地化，这就要求我们优先使用原生 JavaScript 的 Date 对象与字符串拼接逻辑，而非依赖第三方库。通过自定义日期格式显示，我们可以实现统一的展示风格，并且方便在不同区域（如中文、英文、日语等）进行格式切换。
如果你在寻找 如何用纯 JavaScript 实现自定义日期格式显示？告别 jQuery 依赖的实战指南，本节将帮助你梳理核心目标：实现一个可扩展的日期格式化函数，覆盖常见的日期组件（年、月、日、时、分、秒、毫秒、周等），并且具备良好的可维护性与浏览器兼容性。
1.1 设计目标与格式域
本节强调选用的格式域应具备稳定性且易于扩展，例如 YYYY、MM、DD、HH、mm、ss、SSS 等占位符。明确的占位符集合有助于后续扩展更多自定义模板，而不需要改动核心实现。
在设计时要考虑跨浏览器兼容性，尽量使用原生 API，避免对极老版本浏览器的特性做过多假设。努力让代码在现代浏览器中表现一致，同时保留对低版本浏览器的基本兼容性。
1.2 兼容性与边界情况
为了保证稳定性，需处理日期越界、时区差异等边界情况，例如月末日、夏令时变化等。一个健壮的实现应提供默认时区行为，并允许通过参数覆盖时区偏移。
在实现时，我们通常选择“本地时区”的格式化方式作为默认，同时提供一个可选参数用于输出严格的 UTC 字符串。这样可以兼顾日常展示与跨系统日志的需求。
2. 实现核心：自定义日期格式化函数
核心在于把日期分解成年、月、日、时、分、秒等组成部分，并按照给定模板组合输出，这一步要高效、可读且易于扩展。
在纯 JavaScript 场景下，避免引入 jQuery 等库，可以通过一个 map 结构将占位符映射到具体的数值，并通过正则对模板进行逐项替换。该思路直观、性能友好，且便于单元测试。
2.1 设计一个通用的日期格式化函数
下面的实现展示了一个简单而强大的 formatDate(date, fmt) 函数，它支持常见的占位符组合，并返回一个格式化后的字符串。你可以把它作为项目中的基础工具函数，按需扩展更多占位符。
function pad(n, z = 2) {return String(n).padStart(z, '0');
}
function formatDate(date, fmt) {const map = {'YYYY': date.getFullYear(),'YY': String(date.getFullYear()).slice(-2),'MM': pad(date.getMonth() + 1),'DD': pad(date.getDate()),'HH': pad(date.getHours()),'hh': pad((date.getHours() % 12) || 12),'mm': pad(date.getMinutes()),'ss': pad(date.getSeconds()),'SSS': pad(date.getMilliseconds(), 3),'ddd': ['日','一','二','三','四','五','六'][date.getDay()],'dddd': ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]};return fmt.replace(/YYYY|YY|MM|DD|HH|hh|mm|ss|SSS|ddd|dddd/g, token => map[token]);
}
2.2 支持常用 tokens 与 自定义分隔符
为了实现更灵活的输出格式，可以通过改变 fmt 参数来组合不同的分隔符和占位符，例如 YYYY/MM/DD、YYYY-MM-DD HH:mm、YYYY年MM月DD日 等模板。
下面的示例展示了几种常见的模板，并说明了如何在模板中混合使用文本与占位符。你可以在实际项目中按需创建一组常用模板，提升 UI 的一致性。
const now = new Date();console.log(formatDate(now, 'YYYY-MM-DD')); // 2025-12-07
console.log(formatDate(now, 'YYYY/MM/DD HH:mm')); // 2025/12/07 15:30
console.log(formatDate(now, 'YYYY年MM月DD日')); // 2025年12月07日
console.log(formatDate(now, 'dddd, YYYY-MM-DD')); // 星期日, 2025-12-07
3. 实例演示：常见日期格式输出
通过实际案例来演示如何在页面上展示自定义日期格式。纯 JavaScript 的实现避免了任何第三方依赖，适合嵌入前端模板渲染流程中。
在实际项目中，你可能需要将格式化后的日期绑定到 DOM 元素，或者将其用于日志记录、报表导出等场景。以下示例演示了将格式化日期输出到页面和控制台的两种常见用法。
3.1 将格式化结果渲染到页面
通过原生 DOM API，将日期文本注入到指定容器中，无需任何库即可完成渲染，实现简单、直观。
// 假设页面有一个
const el = document.getElementById('dateLabel');
const t = new Date();
el.textContent = formatDate(t, 'YYYY-MM-DD HH:mm:ss');
3.2 控制台输出与日志记录
在调试或记录日志时，使用统一模板输出日期，便于后续筛选与对齐。一致的模板有助于提升可读性。
const t = new Date();
console.log('LOG:', formatDate(t, 'YYYY-MM-DD HH:mm:ss'), '|','event=', 'user_login', 'id=', 12345);
4. 性能与浏览器兼容性考量
性能上，原生实现通常比引入小型日期库更轻量，因为没有额外的依赖加载和解析开销。只要模板数量不极端庞大，formatDate 的实现就能在常见场景下保持快速。
兼容性方面，以上实现基于 ES5 及浏览器原生 API，对现代浏览器友好，也适配大多数移动端浏览器。若要覆盖极老版本浏览器，可以添加简单的 polyfill 或限制某些新特性在默认模板中的使用。需要根据目标用户群体来决定是否开启 UTC 支持或时区强制调整。
