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

目录
相关文章
|
30天前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
73 10
|
4月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
83 0
|
1月前
|
中间件 API
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
41 10
|
2月前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
1月前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
|
26天前
|
监控 安全 中间件
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
|
2月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
2月前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
103 5

热门文章

最新文章