后端返回的时间前端格式化

在做项目中最近常有遇到后端返回时间字符串或是时间戳,前端根据需求展示成不同的文字,比如yyyy年MM月dd日,yyyy年MM月dd日 hh时mm分,yyyy-MM-dd hh:mm等不同格式,有如下格式化方法:

js 复制代码
function formatTime(time, fmt = 'yyyy年MM月dd日 hh时mm分') {
    if (!time) return ''

    let dt;
    if (typeof time === 'string') {
        dt = new Date(Date.parse(time)) || 0
    } else if (typeof time === 'number') {
        dt = new Date(time) || 0
    }

    const o = {
        'M+': dt.getMonth() + 1,
        'd+': dt.getDate(),
        'h+': dt.getHours(),
        'm+': dt.getMinutes(),
        's+': dt.getSeconds(),
        'q+': Math.floor((dt.getMonth() + 3) / 3),
        S: dt.getMilliseconds()
    }
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (dt.getFullYear() + '').substring(4 - RegExp.$1.length))
    }
    for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substring(('' + o[k]).length)
            )
        }
    }
    return fmt
}

let originStr = '2024-04-02 08:34'
let strRes = formatTime(originStr, 'MM月dd日 hh时mm分')
console.log(strRes) // 04月02日 08时34分

let originStamp = 1712018040000
let stampRes = formatTime(originStamp, 'yyyy-MM-dd hh:mm:ss')
console.log(stampRes) // 2024-04-02 08:34:00

第6 行 Date.parse() 方法解析一个表示某个日期的字符串,并返回从 1970-1-1 00:00:00 UTC 到该日期对象(该日期对象的 UTC 时间)的毫秒数,如果该字符串无法识别,或者一些情况下,包含了不合法的日期数值(如:2015-02-31),则返回值为 NaN。

第12 ~18 行在对象o 上依次存入了传入的时间字符串或是时间戳表示的月、日、时、分、秒、季度、毫秒 数字信息。

第20 ~22 行处理年信息。第23 ~30 行先遍历对象o,如果给定的返回字符串模板中有年、月、日、时、分、秒、季度、毫秒中的项,就用对应的值替换掉字符串模板上的字符串,最后返回替换后的字符串。

还有一个点,两处if语句的判断条件分别是/(y+)/.test(fmt)和new RegExp('(' + k + ')').test(fmt),这两个其中的.test()前面的正则都有一个捕获分组(),捕获分组 ()会把每个分组里匹配的值保存起来,因此在if语句内的RegExp.$1才能取得捕获分组()内匹配到的值。

使用这个formatTime方法时,传入的第一个参数需要在方法外处理好或者直接在方法内处理,第二个参数要按照o 对象中存年、月、日、时、分、秒、季度、毫秒的key一样给定字符串模板。

相关推荐
panxianren1 小时前
Bun 1.4 的 bun test --parallel 将 4 秒的测试套件缩短到约 1 秒
java·javascript
可乐鸡翅yeah_4 小时前
FFmpeg 生成 HLS 独立分片 independent‑segments 参数到底有什么用
javascript·ffmpeg·音视频·safari·m3u8
福兮说4 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
Ai-_Man5 小时前
您您这可以把Grok的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
liangshanbo12156 小时前
JavaScript 异步核心主线
javascript·事件循环·异步操作
传人once7 小时前
悬停旋转放大和位移效果如何写
javascript·css·动画
默_笙9 小时前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript
Dovis(誓平步青云)10 小时前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
xieter10 小时前
【技术精选】TypeScript 高级类型体操:条件类型与模板字面量深度剖析 (2026-10-06)
javascript
ss27310 小时前
AI全栈实战 | 3.3-02 Python 并发:有 GIL 为什么还用多线程,asyncio 和 JS 事件循环同源不同味
开发语言·javascript·python