网站首页 > 知识剖析 正文
我们在处理日期展示的时候经常需要将时间戳转换为格式化的日期,比较省力的方法是直接使用日期格式化的NPM包,比如:moment.js。但是有时候你不想因为这个小需求引入一个包,或者你想用原生JavaScript实现格式化。
可能的实现是这样的:
Bash
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const min = date.getMinutes();
const ss = date.getSeconds();
console.log(`${year}-${month}-${day} ${hour}:${min}:${ss}`);
// 2021-8-1 10:31:45
但是这样还不符合格式,因为月份,日期,小时,分,秒有可能是一位数字,需要在数字前补0。所以上面的代码还需要修改一下:
Bash
const padZero = function(num){ return num < 10 ? `0${num}` : num;}
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const min = date.getMinutes();
const ss = date.getSeconds();
console.log(`${year}-${padZero(month)}-${padZero(day)} ${padZero(hour)}:${padZero(min)}:${padZero(ss)}`);
// 2021-08-01 10:38:26
我们实现了一个工具数字大小自动补零的方法,除了上面的方法还有别的方式吗?JavaScript作为一个非常灵活的语言,一定有其他的实现方式。今天就看到一个巧妙的解决办法。
const date = new Date();
const year = date.getFullYear();
const month = '0' + (date.getMonth() + 1);
const day = '0' + date.getDate();
const hour = '0' + date.getHours();
const min = '0' + date.getMinutes();
const ss = '0' + date.getSeconds();
console.log(`${year}-${month.slice(-2)}-${day.slice(-2)} ${hour.slice(-2)}:${min.slice(-2)}:${ss.slice(-2)}`);
// 2021-08-01 13:43:29
先通过统一添加前缀字符"0",然后再统一截取后两位字符。这样做确实很聪明,很好地达到了格式化的目的。
语言没有高低之分,水平在乎自己。
欢迎大家点赞,评论,收藏,转发。
- 上一篇: js日期工具类
- 下一篇: Automa插件之js脚本小技巧:零依赖的日期时间格式化,亲测好用!
猜你喜欢
- 2024-12-07 (建议收藏) | 企业中Vue.js最常用的第三方插件
- 2024-12-07 前端基础:JavaScript
- 2024-12-07 SpringBoot @JsonFormat无法接收前端传递的日期字符串
- 2024-12-07 七爪源码:如何在 JavaScript 中从日期中减去 6 个月
- 2024-12-07 如何在 JavaScript 中按日期对对象数组进行排序
- 2024-12-07 JS Date对象的妙用:如何更优雅的计算时间差?
- 2024-12-07 在js中常见的时间格式及其转换
- 2024-12-07 Web前端最强JavaScript Excel处理插件——exceljs
- 2024-12-07 js获取时间戳的几种方式
- 2024-12-07 Axure高保真教程:日期时间下拉列表
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)