JavaScript实战笔记(六) 日期格式化

简介: JavaScript实战笔记(六) 日期格式化

我们知道,在 JavaScript 中没有日期格式化的相关接口,因此使用起来很不方便

下面我们自己来封装一个函数,整体逻辑也很简单,就是使用正则表达式去替换

/**
 * 格式化日期
 * @param { Date }    date    待转换日期
 * @param { String }  pattern 格式字符串
 *  %y 两位数的年份表示
 *  %Y 四位数的年份表示
 *  %m 月份
 *  %d 天数
 *  %H 24 小时制小时数
 *  %I 12 小时制小时数
 *  %M 分钟数
 *  %S 秒数
 *  %a 简化的星期名称
 *  %A 完整的星期名称
 *  %b 简化的月份名称
 *  %B 完整的月份名称
 * @param { Boolean } padding 是否要补齐
 */
const formatDate = (date, pattern = '%Y-%m-%d %H:%M:%S', padding = true) => {
    if (!(date instanceof Date)) return ''
    const week = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    const month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    const paddingZero = (num, cnt, flag) => {
        if (!flag) return num
        let str = num + ''
        let len = str.length
        return (cnt <= len) ? num : Array(cnt - len + 1).join('0') + str
    }
    return pattern
        .replace(/%y/g, paddingZero(date.getFullYear() % 100, 2, padding))
        .replace(/%Y/g, paddingZero(date.getFullYear(), 4, padding))
        .replace(/%m/g, paddingZero(date.getMonth() + 1, 2, padding))
        .replace(/%d/g, paddingZero(date.getDate(), 2, padding))
        .replace(/%H/g, paddingZero(date.getHours(), 2, padding))
        .replace(/%I/g, paddingZero(date.getHours() % 12, 2, padding))
        .replace(/%M/g, paddingZero(date.getMinutes(), 2, padding))
        .replace(/%S/g, paddingZero(date.getSeconds(), 2, padding))
        .replace(/%a/g, week[date.getDay() - 1].slice(0, 3))
        .replace(/%A/g, week[date.getDay() - 1])
        .replace(/%b/g, month[date.getMonth()].slice(0, 3))
        .replace(/%B/g, month[date.getMonth()])
}

使用方法如下

let date = new Date()
let string = formatDate(date)
let GMTString = formatDate(date, '%a, %d %m %Y %H:%M:%S GMT')
console.log(string)    // 2020-06-11 21:18:30
console.log(GMTString) // Thu, 11 06 2020 21:18:30 GMT

目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
22天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
71 0
|
22天前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(一)
JavaScript高级笔记-coderwhy版本
33 0
JavaScript高级笔记-coderwhy版本(一)
|
29天前
|
JSON JavaScript 前端开发
Node.JS第二讲笔记
Node.JS第二讲笔记
30 0
|
1月前
|
JavaScript 前端开发 索引
JavaScript随手笔记---对比数组差异
JavaScript随手笔记---对比数组差异
JavaScript随手笔记---对比数组差异
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
JavaScript随手笔记---轮播图(点击切换)
|
1月前
|
JSON JavaScript 前端开发
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记---保留小数位
JavaScript随手笔记---保留小数位
|
1月前
|
JavaScript 前端开发
JavaScript之字符串系列(菜菜笔记)
JavaScript之字符串系列(菜菜笔记)