标准日期格式转化为“年月日时分秒”——padStart()补0问题 缺乏、安全感 2021-07-25 17:01 522阅读 0赞 在工作中,后端返回的日期格式经常为标准日期格式,此时需要进行转化变为“年月日时分秒”再展示到页面中: #### 什么是标准时间格式? #### ![在这里插入图片描述][20210511142611774.png] 在控制台输入`new Date()`即可以拿到标准时间格式。 #### 后端经常返回的时间格式 #### 时间格式:`2021-05-11T08:54:56.993` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70] #### 转化为“年月日时分秒”格式 #### 如果是标准的时间格式,则可以通过`date.getFullYear()`获取到年份等信息: **标准日期格式转化为年月日时分秒**的转化函数: function getDateString(date) { var year = date.getFullYear().toString().padStart(4, "0"); var month = (date.getMonth() + 1).toString().padStart(2, "0"); var day = date.getDate().toString().padStart(2, "0"); var hour = date.getHours().toString().padStart(2, "0"); var minute = date.getMinutes().toString().padStart(2, "0"); var second = date.getSeconds().toString().padStart(2, "0"); return `${ year}- ${ month}-${ day} ${ hour}:${ minute}:${ second}`; } 如果后端返回的时间格式为:`2021-05-11T08:54:56.993` 这种格式转化为年月日时分秒的函数如下: function getDateString(val) { var date = new Date(val);//先通过new Date()进行格式的转化,转化为标准格式后再进行年月日时分秒的转化 var year = date.getFullYear().toString().padStart(4, "0"); var month = (date.getMonth() + 1).toString().padStart(2, "0"); var day = date.getDate().toString().padStart(2, "0"); var hour = date.getHours().toString().padStart(2, "0"); var minute = date.getMinutes().toString().padStart(2, "0"); var second = date.getSeconds().toString().padStart(2, "0"); return `${ year}- ${ month}-${ day} ${ hour}:${ minute}:${ second}`; } #### 月份 日期补0的问题 #### 前端开发中,会遇到字符串填充的问题,`padStart()`和`padEnd()`可能会有帮助: `str.padStart(targetLength,string):` 参数:第一个参数:目标长度,第二个参数:补充元素 如果`str`字符串的长度不足(小于目标长度),则用补充元素进行补充。 使用指定字符串填充到目标字符串前面,使其达到目标长度; `str.padEnd(targetLength,string):` 参数:第一个参数:目标长度,第二个参数:补充元素 如果`str`字符串的长度不足(小于目标长度),则用补充元素进行补充。 使用指定字符串填充到目标字符串后面,使其达到目标长度; 举例:创建一个数组,数组包含12个月份,月份格式是:“01”,“02” … “10”,“11”,“12”; let monList = []; for (var i = 1; i < 13; i++) { monList.push((i + "").padStart("2", "0")) } console.log(monList); [20210511142611774.png]: /images/20210725/3a1afff8a8f349869c5fb3138408e9f0.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/f516d6340b5947c190c3020708e55d2b.png
还没有评论,来说两句吧...