如何用JavaScript格式化日期

在前端开发中，日期格式化是非常常见的需求，比如需要将后端返回的Timestamp或者Date对象转换成用户可读的"YYYY-MM-DD HH:mm:ss"等格式。JavaScript原生的Date对象虽然提供了一些基础方法，但并没有直接提供格式化功能，因此需要我们手动实现或者通过第三方库来完成。

原生JavaScript实现日期格式化

我们可以通过封装一个通用函数，利用Date对象的getFullYear、getMonth、getDate等方法获取日期的各个部分，再按照指定格式拼接字符串。下面是一个支持常见格式字符的格式化函数示例：

/**
 * JavaScript日期格式化函数
 * @param {Date} date - 需要格式化的Date对象
 * @param {string} format - 格式字符串，支持YYYY(年)、MM(月)、DD(日)、HH(时)、mm(分)、ss(秒)
 * @returns {string} 格式化后的日期字符串
 */
function formatDate(date, format) {
  if (!(date instanceof Date)) {
    throw new TypeError('第一个参数必须是Date对象');
  }
  const year = date.getFullYear();
  // 月份从0开始计数，需要+1
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 补零函数，确保数字不足两位时前面补0
  const padZero = (num) => num.toString().padStart(2, '0');

  return format
    .replace('YYYY', year)
    .replace('MM', padZero(month))
    .replace('DD', padZero(day))
    .replace('HH', padZero(hours))
    .replace('mm', padZero(minutes))
    .replace('ss', padZero(seconds));
}

// 使用示例
const now = new Date();
// 输出类似 2024-05-20 14:30:25
console.log(formatDate(now, 'YYYY-MM-DD HH:mm:ss'));
// 输出类似 2024年05月20日
console.log(formatDate(now, 'YYYY年MM月DD日'));

上面的函数首先校验传入的参数是否为Date对象，避免运行时错误。然后通过Date的实例方法获取年、月、日、时、分、秒的具体数值，其中月份因为从0开始计数，所以需要额外加1。补零函数使用padStart方法，确保月份、日期、时分秒等两位数值的场景下，不足两位时自动补前导0。最后通过字符串替换的方式，将格式字符串中的占位符替换为对应的日期数值，返回最终的格式化结果。

使用第三方库简化操作

如果项目中日期处理的需求比较复杂，比如需要支持多种时区、复杂的格式规则，手动封装的函数可能不够用，这时候可以选择成熟的第三方库。目前比较常用的是Day.js，它是一款轻量级的日期处理库，API设计和Moment.js类似，但是体积更小，性能更好。

首先需要在项目中引入Day.js，如果是通过CDN引入，可以添加如下代码：

<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>

引入之后就可以直接使用Day.js的格式化方法，示例如下：

// 使用Day.js格式化当前日期
const now = dayjs();
// 输出类似 2024-05-20 14:30:25
console.log(now.format('YYYY-MM-DD HH:mm:ss'));
// 输出类似 2024/05/20 14:30
console.log(now.format('YYYY/MM/DD HH:mm'));
// 解析指定日期字符串再格式化
const customDate = dayjs('2024-05-01');
console.log(customDate.format('YYYY年MM月DD日'));

Day.js的format方法支持的格式占位符和上面的自定义函数兼容，同时还能处理更多场景，比如相对时间、时区转换等，不需要我们自己额外扩展功能，非常适合在复杂项目中使用。

两种方式的对比

我们可以根据实际需求选择日期格式化的实现方式，两者的对比如下：

注意事项

• 使用原生Date对象时，要注意getMonth方法返回的月份是从0开始的，使用时需要加1，否则会出现月份偏差。
• 如果处理的时间涉及用户输入或者跨时区场景，建议优先使用第三方库，避免手动处理时区带来的问题。
• 自定义格式化函数时，建议做好参数校验，避免传入非Date对象导致运行时错误。

JavaScript日期格式化formatDateDay.js原生JS实现日期处理