端开发中经常遇到需要转换后端返回的时间数据，转为前端需要自己的格式，使用开源库moment.js可以快速帮助我们转换，因为这个库已经提供很多时间转换方法，我们可以拿来直接使用，这个库的官方地址：GitHub - moment/moment: Parse, validate, manipulate, and display dates in javascript.

安装

npm install moment --save

在main.js注册转换过滤器

//定义moment全局日期过滤器
import Moment from 'moment'
Vue.filter('convertTime', function (data, formatStr) {
  return Moment(data).format(formatstr);
});

在页面使用过滤器

{{ 'xxx' | convertTime（'yyyy—mm—dd'） }}

其他

也可以不在main.js注册过滤器（Vue 3没有过滤器，Vue 2才有过滤器），直接在vue页面的script使用内置的方法

使用moment将时间戳和日期互转：

• 时间：var time=new Date(); // Tue Aug 28 2018 09:16:06 GMT+0800 (中国标准时间)
• 时间戳：var timestamp=Date.parse(time); // 1535419062000 （Date.parse() 默认不取毫秒，即后三位毫秒为0）
• moment转时间：moment(time).valueOf(); // 1535419062126
• moment转时间戳：moment(timestamp).format(); // 2018-08-28T09:17:42+08:00

们在处理日期展示的时候经常需要将时间戳转换为格式化的日期，比较省力的方法是直接使用日期格式化的NPM包，比如：moment.js。但是有时候你不想因为这个小需求引入一个包，或者你想用原生JavaScript实现格式化。

可能的实现是这样的：

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。所以上面的代码还需要修改一下：

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"，然后再统一截取后两位字符。这样做确实很聪明，很好地达到了格式化的目的。

语言没有高低之分，水平在乎自己。

欢迎大家点赞，评论，收藏，转发。