【javaScript】自定义格式化服务器端时间 --- 工具类

1. 格式化服务器端返回的时间

一般如果后端不做处理的话，我们拿到的响应中的服务端时间一般都是这样的：

然后直接拿去页面展示，当然是不好看的，所以我们封装一个格式化时间的通用型工具类，通用型指的是不一定要安装上图一样的格式时间，因为不同浏览器返回的时间字段也是不一样的，所以我们也是通杀；工具类也就是可以拿去给你项目直接使用，可以实现大部分展示的需求啦，话不多说看代码

2. 封装自定义时间格式工具类

2.1 时间格式代码

module.exports = (time,format) => {
  let dataFmt = format || 'yyyy-MM-dd hh:mm:ss'  // 需要格式化的规则

  time = typeof(time) == 'number' ? time : new Date(time)  // 处理传入的time

  let fmt = {
    'y+': time.getFullYear(),   // 年份
    'M+': time.getMonth() + 1,  // 月份
    'd+': time.getDate(),  // 日
    'h+': time.getHours(),  // 小时
    'm+': time.getMinutes(),  // 分钟
    's+': time.getSeconds()  // 秒
  }

  for(let i in fmt){
    if (new RegExp('(' + i + ')').test(dataFmt)){
      dataFmt = dataFmt .replace(RegExp.$1, fmt[i].toString().length <= 1 ? '0' + fmt[i] : fmt[i] )
    }
  }
  return dataFmt 
}

2.2 参数说明

参数名	参数类型	参数说明	是否必传
time	Number	需要格式化的时间，可以是经过new Date后的时间戳，也可以直接将未处理的时间传入	是
format	String	需要格式化的格式规则，例如： “yyyy-MM-dd hh:mm:ss”，遵循各字母代表的意义，不能自定义字母	否

2.3 调用方式

这里是一个工具类，所以写成了ES Modules的写法，需要使用时只需要通过import导入即可，如下：

import formatTime from '../../utils/format-time.js'  // 导入方式

formatTime(publishTime,'MM-dd yyyy hh:mm')  // 调用方式

2.4 测试结果

测试：

formatTime(publishTime,'MM-dd yyyy hh:mm')

formatTime(new Date(publishTime),'yyyy/MM/dd hh:mm:ss')

小伙伴可以自行去测试，只要年月日 时分秒对应的字母不要乱来就行，比如：年份对应是 字母y，就不要自己乱传一个 字母z

2.5 增加功能

拓展：

主要是学会如何加入一些功能到工具类，并且可以使用的

功能：

① 增加星期几

② 增加时间段 （上午/下午/凌晨）

说明：

使用 字母w 代表 星期几；
使用 字母z 代表 上午（6h - 12h）,下午（13h - 23h）,凌晨（0h - 5h）这个时间段可以按自己的想法自定义；
因为这些为拓展字段，所以默认值仍然为 年-月-日 时-分-秒 ， 需要展示的话就传入对应的字段即可

代码（修改）：

module.exports = (time, format) => {
  let data = format || 'yyyy-MM-dd hh:mm:ss' // 需要格式化的规则

  time = typeof(time) == 'number' ? time : new Date(time)

  let fmt = {
    'y+': time.getFullYear(), // 年份
    'M+': time.getMonth() + 1, // 月份
    'd+': time.getDate(), // 日
    'h+': time.getHours(), // 小时
    'm+': time.getMinutes(), // 分钟
    's+': time.getSeconds(), // 秒
    'w+': time.getDay(), // 星期（0为星期日）
    'z+': time.getHours(), // 上午/下午/凌晨
  }

  function tranWeek(week) {
    switch (week) {
      case 0:
        return "星期日";
      case 1:
        return "星期一";
      case 2:
        return "星期二";
      case 3:
        return "星期三";
      case 4:
        return "星期四";
      case 5:
        return "星期五";
      case 6:
        return "星期六";
        break;
    }
  }

  function timeSlot(hours) {
    let h;
    if (hours >= 6 && hours <= 12) {
      h = 0
    } else if (hours > 12 && hours <= 23) {
      h = 1
    } else {
      h = 2
    }
    switch (h) {
      case 0:
        return "上午";
      case 1:
        return "下午";
      case 2:
        return "凌晨";
        break;
    }
  }

  function transform(i) {
    if (i == 'w+') {
      return tranWeek(fmt[i])
    } else if (i == 'z+') {
      return timeSlot(fmt[i])
    } else {
      return fmt[i].toString().length <= 1 ? '0' + fmt[i] : fmt[i]
    }
  }

  for (let i in fmt) {
    if (new RegExp('(' + i + ')').test(data)) {
      data = data.replace(RegExp.$1, transform(i))
    }
  }
  return data
}

测试：

formatTime(publishTime, 'yy-MM-dd ww | zz hh:mm')

3. 结语

希望可以帮到你，个人小菜，如文中有不足之处，欢迎指点，如果觉得不错给个赞呗~

over~

————————————————
版权声明：本文为CSDN博主「@Umbrella」的原创文章，遵循 CC 4.0 BY-SA
版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Umbrella_Um/article/details/103197964
————————————————