一个实用的前端日期处理函数

前言

在前端开发中，日期时间的处理一直是个让人头疼的问题。不同格式的时间字符串让人眼花缭乱，如何统一格式化输出成了关键。今天就给大家分享一个实用的 JavaScript 日期格式化方法，让你的项目时间显示瞬间提升档次。

场景引入

想象一下，你在做一个前端项目，订单创建时间、支付时间、发货时间等等，各种时间戳充斥在页面各处。如果格式不统一，不仅影响用户体验，还可能让你在调试时抓耳挠腮。这时候，一个通用的日期格式化函数就显得尤为重要。

核心代码实现

首先，我们创建一个辅助函数 _formatNormailze，用于判断格式化参数并进行预处理。

ini 复制代码

function _formatNormailze(formatter) {
  if (typeof formatter === 'function') {
    return formatter;
  }
  if (typeof formatter !== 'string') {
    throw new TypeError('formatter is not string');
  }
  if (formatter === 'date') {
    formatter = 'yyyy-MM-dd';
  }
  if (formatter === 'datetime') {
    formatter = 'yyyy-MM-dd HH:mm:ss';
  }
  const formatterFunc = (dateInfo) => {
    const { yyyy, MM, dd, HH, mm, ss, ms } = dateInfo;
    let formatted = formatter
      .replace("yyyy", yyyy)
      .replaceAll("MM", MM)
      .replaceAll("dd", dd)
      .replace("HH", HH)
      .replace("mm", mm)
      .replace("ss", ss)
      .replace("ms", ms);
    return formatted;
  };
  return formatterFunc;
}

这个函数的作用是，根据传入的格式化参数，返回一个具体的格式化函数。如果传入的是 'date'，就转换为 'yyyy-MM-dd' 格式；如果是 'datetime'，就转换为 'yyyy-MM-dd HH:mm:ss' 格式。

接下来是主函数 formate，它接收日期、格式化参数和是否补零的参数。

scss 复制代码

function formate(date, formatter, isPad = false) {
  const formatFunc = _formatNormailze(formatter);
  const dateInfo = {
    yyyy: date.getFullYear().toString(),
    MM: (date.getMonth() + 1).toString(),
    dd: date.getDate().toString(),
    HH: date.getHours().toString(),
    mm: date.getMinutes().toString(),
    ss: date.getSeconds().toString(),
    ms: date.getMilliseconds().toString()
  };

  function _pad(prop, len) {
    dateInfo[prop] = dateInfo[prop].padStart(len, '0');
  }

  if (isPad) {
    _pad('yyyy', 4);
    _pad('MM', 2);
    _pad('dd', 2);
    _pad('HH', 2);
    _pad('mm', 2);
    _pad('ss', 2);
    _pad('ms', 3);
  }

  const result = formatFunc(dateInfo);
  return result;
}

这个函数首先调用 _formatNormailze 获取格式化函数，然后创建一个包含日期各部分信息的对象 dateInfo。接着，定义了一个 _pad 函数用于给时间部分补零。如果传入的 isPad 参数为 true，就对各时间部分进行补零操作。最后，调用格式化函数并返回结果。

使用示例

javascript 复制代码

const now = new Date();

// 示例 1：格式化为日期
console.log(formate(now, 'date')); // 输出类似 "2023-04-10"

// 示例 2：格式化为日期时间
console.log(formate(now, 'datetime')); // 输出类似 "2023-04-10 23:59:59"

// 示例 3：格式化为自定义格式，并补零
console.log(formate(now, 'yyyy/MM/dd HH:mm', true)); // 输出类似 "2023/04/10 23:59"

总结

通过这个自定义的日期格式化函数，我们可以在项目中轻松实现时间的统一格式化输出，无论是简单的日期格式，还是复杂的自定义格式都能轻松应对。而且，补零功能的加入，让时间显示更加规范美观。在实际开发中，可以根据项目需求进一步扩展这个函数，比如增加对时区的支持等。

希望这个小技巧能帮助你在前端开发中更好地处理日期时间问题，让项目的时间显示更加专业、优雅。