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

目录
相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
49 0
|
18天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
12天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
13天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
28天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
29 2
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
48 2
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
34 1
|
2月前
|
SQL 前端开发 JavaScript
Nest.js 实战 (十五):前后端分离项目部署的最佳实践
这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用,并将其部署到生产环境。文章涵盖了准备阶段,包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节,包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后,作者总结了部署经验,并希望对读者有所帮助。
208 11
|
3月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)