端開發中經常遇到需要轉換后端返回的時間數據，轉為前端需要自己的格式，使用開源庫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"，然后再統一截取后兩位字符。這樣做確實很聰明，很好地達到了格式化的目的。

語言沒有高低之分，水平在乎自己。

歡迎大家點贊，評論，收藏，轉發。