JS時間戳轉(zhuǎn)換為常用時間格式的方法有哪些

這篇文章主要介紹“JS時間戳轉(zhuǎn)換為常用時間格式的方法有哪些”，在日常操作中，相信很多人在JS時間戳轉(zhuǎn)換為常用時間格式的方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS時間戳轉(zhuǎn)換為常用時間格式的方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1、js 時間戳轉(zhuǎn)日期（可直接復制）

    // 時間戳 
    let timestamp = 1662537367
    // 此處時間戳以毫秒為單位
    let date = new Date(parseInt(timestamp) * 1000);
    let Year = date.getFullYear();
    let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
    let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
    let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
    let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
    
    console.log(GMT)  // 2022-09-07 15:56:07

附加

let nowTime = new Date().valueOf();//時間戳
console.log(nowTime) // 獲取當前時間的時間戳

2、在main.js中創(chuàng)建過濾器

示例：后臺管理系統(tǒng)，vue2 + JS + element ui，將下單時間的時間戳轉(zhuǎn)換為年月日的形式

（1）main.js中，創(chuàng)建過濾器將其掛載到vue上

注意：我這邊后臺返回的數(shù)據(jù)需要進行單位換算，所以originVal * 1000，具體情況具體分析，不同單位的數(shù)據(jù)請自行調(diào)整

import Vue from 'vue'
// 創(chuàng)建過濾器，將秒數(shù)過濾為年月日，時分秒，傳參值originVal為毫秒
Vue.filter('dateFormat', function(originVal){
  // 先把傳參毫秒轉(zhuǎn)化為new Date()
  const dt = new Date(originVal * 1000)
  const y = dt.getFullYear()
  // 月份是從0開始,需要+1
  // +''是把數(shù)字轉(zhuǎn)化為字符串,padStart(2,'0')是把字符串設置為2位數(shù),不足2位則在開頭加'0'
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  return `${y}-${m}-$6627x7i`
})

（2）頁面中具體使用

<el-table :data="orderList" border stripe class="mt20">
	<el-table-column label="下單時間" prop="create_time">
		<template slot-scope="scope">
			{{scope.row.create_time | dateFormat}}
		</template>
	</el-table-column>
</el-table>

3、day.js

（1）三種安裝方式任選其一

npm install dayjs
cnpm install dayjs -S
yarn add dayjs

（2）頁面中具體使用

示例：后臺管理系統(tǒng)，vue3 + TS + element-plus，將下單時間的時間戳轉(zhuǎn)換為年月日的形式

使用前：

使用后：

① html部分

<el-table>
	<el-table-column prop="create_time" label="下單時間" />
</el-table>

②獲取到的數(shù)據(jù)

③TS部分

對拿到的數(shù)據(jù)中的創(chuàng)建時間進行轉(zhuǎn)換，其中dayjs()中攜帶需要轉(zhuǎn)換的時間戳參數(shù)，format()中攜帶所期待轉(zhuǎn)換成的形式

// 引入
import { dayjs } from "element-plus";

interface IOrderList {
  order_number: string; // 訂單編號
  create_time: number; // 下單時間
}
const orderList = reactive<IOrderList[]>([]);
// 獲取訂單數(shù)據(jù)
const getOrderList = async () => {
  orderList.length = 0;
  let orders = await ordersAPI(pageInfo.value);
  
// 對 orders.data.goods進行遍歷，dayjs()中攜帶需要轉(zhuǎn)換的時間戳參數(shù)，format()中攜帶所期待轉(zhuǎn)換成的形式
  orders.data.goods.forEach((el: any) => {
    el.create_time = dayjs(el.create_time * 1000).format("YYYY-MM-DD");
  });
  orderList.push(...orders.data.goods);
};
getOrderList();

到此，關于“JS時間戳轉(zhuǎn)換為常用時間格式的方法有哪些”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>