JS将本地时间格式化为YYYY-MM-DD HH：mm：ss的代码实现

图标概览：JavaScript 本地时间解析与格式化流程

在 JavaScript 中将本地时间格式化为 YYYY-MM-DD HH:mm:ss，最稳妥、高效的原生解决路径是通过 Date 对象提供的本地时间分量方法（如 getFullYear()、getMonth()、getHours() 等）分别提取数值，结合 ECMAScript 标准方法 String.prototype.padStart(2, '0') 进行两位补零，最后按分隔符拼装成字符串。这一做法无需依赖体积庞大的第三方库，能精准遵循客户端本地时区，规避了 UTC 转换造成的跨日偏差。

一、核心实现：原生 padStart 格式化函数

在日常开发中，后台接口入参、表单回显、日志打点均广泛要求 24 小时制的 YYYY-MM-DD HH:mm:ss 字符串。以下是一个开箱即用且经过边界防范的精简实现：

/**
 * 将本地时间格式化为 YYYY-MM-DD HH:mm:ss
 * @param {Date|number|string} [inputTime=new Date()] 可选的日期对象、时间戳或可解析字符串
 * @returns {string} 格式化后的本地时间字符串，若输入非法则返回空字符串
 */
function formatLocalDateTime(inputTime = new Date()) {
  const d = inputTime instanceof Date ? inputTime : new Date(inputTime);
  
  // 校验日期合法性，防止 Invalid Date 报错
  if (isNaN(d.getTime())) {
    return '';
  }

  const pad = (n) => String(n).padStart(2, '0');

  const year = d.getFullYear();
  const month = pad(d.getMonth() + 1); // getMonth() 返回 0~11，需加 1
  const day = pad(d.getDate());        // 注意使用 getDate() 而非 getDay()
  const hours = pad(d.getHours());     // 24小时制本地时
  const minutes = pad(d.getMinutes());
  const seconds = pad(d.getSeconds());

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 示例调用：
console.log(formatLocalDateTime()); 
// 示例输出："2026-11-11 16:04:38"

console.log(formatLocalDateTime(1700000000000));
// 示例输出："2023-11-15 06:13:20" (基于您所在本地时区的对应时间)

该函数包含对参数的弹性处理：不仅支持不传参数（默认取当前时刻），也支持传入时间戳或日期字符串；同时通过 isNaN(d.getTime()) 排除了无法解析的无效日期，防止返回包含 NaN 的错误文本。

二、底层原理解析：各时间分量的提取与补零

理解这一实现的重点在于厘清 JavaScript 的 Date 实例内部机制。Date 实例在底层仅存储一个从 Unix 纪元（1970年1月1日 00:00:00 UTC）开始算起的毫秒时间戳。当调用以 get 开头而非 getUTC 开头的方法时，JavaScript 运行时会自动根据当前设备配置的宿主时区计算本地时间。

图 1：JavaScript Date 本地时间分量提取与格式位映射原理

在提取和转换过程中，有三个细节点需要特别注意：

• 月份计算的偏移（Month Offset）：d.getMonth() 的取值范围是 0 ~ 11，0 代表一月，11 代表十二月。因此在转换为人类习惯的 1~12 月时，必须先 + 1 再进行补零。
• 日与星期的区分（Date vs Day）：提取月中日期必须使用 d.getDate()（返回 1~31）。切勿误写为 d.getDay()，后者返回的是星期几（0 代表周日，1~6 代表周一至周六）。
• 两位对齐补零机制（Padding）：String(n).padStart(2, '0') 属于 ES2017 标准语法。当目标数字转换后的字符串长度不足 2 时，会在开头填补 '0'；若已有两位（如 10、11），则原样保留。相比老旧的三元表达式判断（如 n < 10 ? '0' + n : n），padStart 语义更加简洁统一。

三、标准操作流水线与执行步骤

将时间格式化任务工程化封装时，通常遵循清晰的“输入过滤、分量提取、对齐补齐、拼装输出”四步处理流程。清晰的分步不仅利于代码维护，也方便在遇到异常日期输入时进行单元测试和防错。

图 2：本地时间格式化四步执行流水线（操作与校验步骤）

在具体操作中，每个步骤的执行要领如下：

1. 第一步（准备与防御）：使用 new Date(input) 确保拿到 Date 实例，并立即读取其 getTime()。如果结果为 NaN，说明传入了无法解析的字符串，应当在此处阻断并返回降级值或空串。
2. 第二步（本地提取）：依次读取年、月（+1）、日、时、分、秒。这一步所有调用的都是环境本地接口，无需手动加减时区偏差毫秒数。
3. 第三步（规格化对齐）：通过辅助工具闭包 pad = n => String(n).padStart(2, '0')，批量将提取出来的数值转换为标准的两位格式。
4. 第四步（格式组装）：使用模板字符串以短横线 - 联结年月日，空格隔开，以冒号 : 联结时分秒。

四、警惕陷阱：为什么不能直接裁切 toISOString()

很多前端开发者在追求单行简短代码时，经常会看到或写出如下代码：

// ❌ 存在严重时区 BUG 的危险写法！
const badFormatted = new Date().toISOString().replace('T', ' ').slice(0, 19);

表面上看，这段代码同样输出了形如 YYYY-MM-DD HH:mm:ss 的字符串，但在实际生产中，它会引发严重的跨时区数据差错。

图 3：常见误区对比：使用 toISOString() 截取所引发的时区偏移陷阱（以东八区 UTC+8 为例）

五、进阶方案：通用动态模板格式化器与 Intl API

当业务需求不仅限于 YYYY-MM-DD HH:mm:ss，还可能需要支持 YYYY/MM/DD、YYYY年MM月DD日 HH时mm分 或 HH:mm:ss 时，可以封装一个基于正则的通用替换函数：

1. 正则模板替换器实现

/**
 * 通用模板时间格式化函数
 * @param {Date|number|string} date 目标时间
 * @param {string} format 目标模板，例如 'YYYY-MM-DD HH:mm:ss'
 * @returns {string}
 */
function formatDatePattern(date, format = 'YYYY-MM-DD HH:mm:ss') {
  const d = date instanceof Date ? date : new Date(date);
  if (isNaN(d.getTime())) return '';

  const pad = (n) => String(n).padStart(2, '0');
  
  const tokens = {
    YYYY: d.getFullYear(),
    YY: String(d.getFullYear()).slice(-2),
    MM: pad(d.getMonth() + 1),
    M: d.getMonth() + 1,
    DD: pad(d.getDate()),
    D: d.getDate(),
    HH: pad(d.getHours()),
    H: d.getHours(),
    mm: pad(d.getMinutes()),
    m: d.getMinutes(),
    ss: pad(d.getSeconds()),
    s: d.getSeconds()
  };

  return format.replace(/(YYYY|YY|MM|M|DD|D|HH|H|mm|m|ss|s)/g, (match) => tokens[match]);
}

// 示例调用：
console.log(formatDatePattern(new Date(), 'YYYY-MM-DD HH:mm:ss'));
// 示例输出："2026-11-11 16:04:38"

console.log(formatDatePattern(new Date(), 'YYYY/MM/DD HH:mm'));
// 示例输出："2026-11-11 16:04"

2. 使用标准 Intl.DateTimeFormat

现代浏览器还内置了国际化 API Intl.DateTimeFormat。利用其 formatToParts 方法，可以在不手动计算 getMonth() + 1 的前提下，提取出本地时间的结构化组件：

function formatWithIntl(date = new Date()) {
  const d = date instanceof Date ? date : new Date(date);
  if (isNaN(d.getTime())) return '';

  // 设定24小时制及两位数格式
  const formatter = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });

  const parts = formatter.formatToParts(d).reduce((acc, part) => {
    if (part.type !== 'literal') acc[part.type] = part.value;
    return acc;
  }, {});

  // 部分环境在 24 时可能将 24:00 识别为 24，确保两位对齐
  const hour = parts.hour === '24' ? '00' : parts.hour;

  return `${parts.year}-${parts.month}-${parts.day} ${hour}:${parts.minute}:${parts.second}`;
}

六、方案对比与选型建议

在实际项目落地时，三种方案在执行开销、灵活性及代码规模上各有取舍。下图梳理了在面对不同项目诉求时的选型决策树及维度对比：

图 4：本地时间格式化方案选型决策树与各维度特性综合对比

总结而言，对于“将本地时间格式化为 YYYY-MM-DD HH:mm:ss”这一明确需求，最推荐的方案始终是原生 padStart 提取拼接法。它简单直观、执行效率高，且从根本上隔离了时区转换陷阱，是前端开发中最稳健的基石代码。