分享正则格式化时间戳的函数,代替Moment.js部分解析功能

474 阅读2分钟

下面给大家介绍我这个使用正则替换的方法,用于对时间戳进行自定义格式化。为了便于理解和减少代码量,以下代码基本使用ES6的语法。

一、需求:

后端一般返回时间戳让前端自主展示,如果每次都要引用一次时间类插件就过于麻烦,而且很多项目,特别是后台项目都要用到。因此需要一个好用的代码片段。

二、优势

  1. 体积小,不用引入任何插件,可直接使用;
  2. 代码可在本地随时修改,满足实际业务;
  3. 满足年份、月份、日期和时分秒等内容输出,且能最大限度自定义输出;
  4. 可以作为utils工具插件导出,在vue中还可以用于过滤器。
/**
 * 格式化时间戳
 * @param {String|Number} timestamp 毫秒时间戳
 * @param {String} [format = 'YYYY-MM-DD HH:mm:ss'] 格式化类型正则
 * @example
 * // return '2022年04月29日 17:03:21:332'
 * formatTime(1651223001332, 'YYYY年MM月DD日 HH:mm:ss:SSS');
 * @returns {String}
 */
const formatTime = (timestamp, format) => {
  // 设置默认格式,毫秒S/SS/SSS均显示三位数
  format = format ? format.replace(/S+/, 'S') : 'YYYY-MM-DD HH:mm:ss';
  let date = new Date(parseInt(timestamp));
  // 正则映射
  let data = {
    'M+': date.getMonth() + 1, //月
    'D+': date.getDate(), //日
    'H+': date.getHours(), //小时
    'm+': date.getMinutes(), //分
    's+': date.getSeconds(), //秒
    'q+': Math.floor((date.getMonth() + 3) / 3), //季度
    S: date.getMilliseconds(), //毫秒
  };

  // 实际年份字符串
  let yearStr = date.getFullYear() + '';
  // 匹配年份y+
  let [yearExp] = format.match(/Y+/) || [];
  if (yearExp) {
    let expLen = 4 - yearExp.length;
    // 年份由右往左截取
    let res = yearStr.substring(expLen);
    // 替换年份内容
    format = format.replace(yearExp, res);
  }

  // 遍历替换除了年份外的内容
  format = Object.keys(data).reduce((pre, cur) => {
    // 匹配的其他正则形式
    let [dataExp] = pre.match(cur) || [];
    // 匹配的其他时间字符串
    let dataCont = data[cur] + '';
    if (!dataExp) return pre;
    // 部分单位填充左侧的0字符
    let padding = dataCont.padStart(2, '0');
    // 一位数或毫秒直接输出
    let res = dataExp.length === 1 ? dataCont : padding;
    return pre.replace(dataExp, res);
  }, format);

  return format;
};

// console.log(formatTime(new Date().getTime(), 'YYYY年MM月DD日'));
// console.log(formatTime(new Date().getTime(), 'YYYY年第q季度'));
// console.log(formatTime(new Date().getTime(), 'YYYY-MM-DD HH:mm:ss'));
// console.log(formatTime(new Date().getTime(), 'HH时mm分ss秒'));
// console.log(formatTime(new Date().getTime(), 'HH:mm:sss:SS'));