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

目录
相关文章
|
10天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
1月前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
24 0
|
1月前
|
JavaScript 前端开发 算法
JavaScript 中算术操作符:全面解读、实战应用与最佳实践
【4月更文挑战第5天】本文探讨JavaScript中的算术操作符,包括加、减、乘、除、求余、自增、自减及复合赋值等,强调理解与熟练运用它们对提升编程效率和代码准确性的重要性。文中通过示例介绍了各种操作符的用法,同时提醒注意数据类型转换、浮点数精度、除以零错误以及利用短路求值优化逻辑等问题。通过学习,读者能更好地掌握算术操作符在不同场景的应用,提升编程技能。
23 1
|
2月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
2月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
10天前
|
JavaScript 前端开发 开发工具
【JavaScript 技术专栏】Node.js 基础与实战
【4月更文挑战第30天】本文介绍了Node.js的基础及应用,包括事件驱动的非阻塞I/O、单线程模型和模块系统。内容涵盖Node.js的安装配置、核心模块(如http、fs、path)及实战应用,如Web服务器、文件操作和实时通信。文章还讨论了Node.js的优劣势、与其他技术的结合,并通过案例分析展示项目实施流程。总结来说,Node.js是高效后端开发工具,适合构建高并发应用,其广阔的应用前景值得开发者探索。
|
10天前
|
缓存 JavaScript 前端开发
【JavaScript技术专栏】JavaScript性能优化实战
【4月更文挑战第30天】本文探讨了JavaScript性能优化技巧,包括理解性能瓶颈(代码执行、DOM操作、网络请求和逻辑复杂度)和针对性优化。建议避免全局变量、延迟加载、减少循环嵌套及使用事件委托以优化代码执行;减少DOM操作次数、利用虚拟DOM和避免回流重绘优化DOM操作;通过压缩合并资源、使用CDN和按需加载加速网络请求;选择高效算法和合理数据结构降低计算开销。综合运用这些方法能显著提升前端应用性能。
|
12天前
|
存储 SQL 前端开发
React&Nest.js社区平台(四)——✏️文章发布与管理实战
React&Nest.js社区平台(四)——✏️文章发布与管理实战
|
1月前
|
JavaScript 前端开发
JavaScript 中运算符优先级:理解规则、实战应用与进阶技巧
【4月更文挑战第6天】了解 JavaScript 运算符优先级是编写清晰无误代码的关键。优先级规则决定了运算的顺序,从高到低包括一元、乘性、加性、关系、相等性等运算符。掌握优先级能避免逻辑错误,例如在表达式 `a * b + c` 中,乘法先于加法执行。实际应用中,使用括号可以明确运算顺序,提高代码可读性。注意避免混淆优先级,如赋值与比较操作。利用优先级简化逻辑判断,遵循编码规范,提升编程技能。通过不断学习和实践,加深对运算符优先级的理解,优化代码质量。
17 0
|
2月前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
74 0