小白弄明白了 unix 時間戳的轉換問題

2023-09-05 12:01:13

小白對於將 unix 時間戳轉換為日期時間和使用日期時間轉換為 unix 時間戳,在專案中見到過很多,每次使用時不是用現有的方法轉換就是網上搜尋方法。

小白見過各種轉換方式覺得moment庫很是方便,但是用法較多,所以小白決定整理一下。以後再遇到時間日期轉換可能手寫程式碼而省去翻看資料的時間。

vue中使用moment.js庫需要通過  npm install moment   來安裝。

在使用時需要通過   import moment from 'momennt'  來引入元件中。

1. 這裡是一些常見的用法:

currentDate: moment().format('YYYY-MM-DD'), // 獲取當前日期
currentTime: moment().format('HH:mm:ss'), // 獲取當前時間
formattedDate: moment('2023-08-25').format('MMMM Do YYYY'), // 格式化日期
diffInDays: moment('2023-08-25').diff(moment(), 'days'), // 計算日期差異
isLeapYear: moment('2023-08-25').isLeapYear() // 檢查是否是閏年

下面開始演示 日期和 Unix 時間戳 的轉換

1. 使用 moment 將日期轉換為Unix時間戳:

const dateInt = moment('2023-08-25').valueOf(); 1800000000000
//valueOf() 方法將 Moment 物件轉換為 Unix 時間戳 (自UTC時間 1970年 1月 1日零點以來的毫秒數)

2. 使用 moment 將時間轉換為 Unix 時間戳,再轉換回時間

const unixTimestamp = moment('2023-08-25 17:56:00').unix(); // 轉換為 Unix 時間戳
const formattedDate = moment.unix(unixTimestamp).format('YYYY-MM-DD HH:mm:ss'); // 格式化日期時間
console.log(unixTimestamp); // 輸出:1671963360
console.log(formattedDate); // 輸出:2023-08-25 17:56:00

特別注意:unix()和valueOf()的區別,valueOf 獲取日期物件的毫秒級時間戳,unix 獲取日期物件的秒級時間戳。而 Unix 時間戳一般是秒級的。

moment 中還有一個處理時區的外掛 tz,它允許我們在具體的時區進行日期和時間的轉換和處理。

1. vue中使用 tz 需要安裝moment庫 和 moment-timezone 外掛。可以使用npm 或 yarn 進行安裝 npm install moment moment-timezone

2. 在元件中使用時,需要引入

import moment from 'moment';
import 'moment-timezone';

3. 下面是一些常見用法

// 獲取當前時間,並將其轉換為指定時區的時間
const now = moment();
const nyTime = moment.tz(now, 'America/New_York');
	    
// 使用指定時區建立一個 Moment 物件
const parisTime = moment.tz('2023-08-31 12:00', 'Europe/Paris');
	    
// 將時間從當前時區轉換為目標時區
const londonTime = moment.tz('2023-08-31 12:00', 'Europe/London').tz('America/New_York');
	    
// 獲取所有可用的時區
const timezones = moment.tz.names();
	    
// 獲取指定時區在當前時間的偏移量(以分鐘為單位)
const offset = moment.tz('America/New_York').utcOffset();

    tz 還可以配合 format 一起使用:

moment.tz('2022-12-31 23:59:59', 'America/New_York').format('YYYY-MM-DD HH:mm:ss z')
//或者
const time = '2022-12-31 23:59:59';
const tz = 'America/New_York';
const fmt = 'YYYY-MM-DD HH:mm:ss z';
const formattedDateTime = moment(time).tz(tz).format(fmt);
//第二種方式為舊版本使用方式

雖然是一個小工具庫,但是專案中使用率還挺高,所以小白覺得值得用心整理。整理的過程也是自己學習的過程,同時也能夠當作筆記,在遺忘時再回來翻看。小白希望通過這次整理能夠完全掌握menent 庫的使用,以便在以後的專案,遇到處理時間日期格式時,不需要查詢資料,能夠閉眼手寫程式碼,提高效率節省時間。