在項(xiàng)目中遇到了，需要實(shí)現(xiàn)字符串和Unix時(shí)間戳的相互轉(zhuǎn)換，隨手記錄一下。
我使用的組件庫(kù)為Naive UI，涉及到的組件為日期選擇器（Date Picker）。作者在文檔中寫(xiě)道：

實(shí)話說(shuō)我不喜歡這個(gè) feature，因?yàn)槎鄶?shù)情況下，傳遞時(shí)間字符串不是個(gè)最佳實(shí)踐。但是現(xiàn)實(shí)世界是復(fù)雜的，我希望這個(gè)功能能幫你解決一些棘手的問(wèn)題，比如為了后端傳過(guò)來(lái)的數(shù)據(jù)買(mǎi)賬。

事實(shí)也確實(shí)如此，那今天就來(lái)倒騰倒騰這些和日期有關(guān)的東西吧！

部分內(nèi)容來(lái)自
Day.js中文網(wǎng)
Naive UI

一、字符串—>Unix時(shí)間戳（毫秒）

（一）使用Date.parse()

Date.parse() 方法解析一個(gè)表示某個(gè)日期的字符串，并返回從 1970-1-1 00:00:00 UTC 到該日期對(duì)象（該日期對(duì)象的 UTC 時(shí)間）的毫秒數(shù)，如果該字符串無(wú)法識(shí)別，或者一些情況下，包含了不合法的日期數(shù)值（如：2015-02-31），則返回值為 NaN。

const str = '2023-10-8'
const ttmp = Date.parse(str);
console.log("ttmp", ttmp);

打印結(jié)果：

str為表示日期的字符串。

該字符串應(yīng)該能被 Date.parse() 正確方法識(shí)別（即符合 IETF-compliant RFC 2822 timestamps 或 version of ISO8601）。

IETF-compliant RFC 2822 timestamps
version of ISO8601

（二）使用dayjs()解析為Date對(duì)象，使用Date上的方法

const d = dayjs('2023-10-8')
const ttmp1 = d.valueOf()
const ttmp2 = Number(d)

打印結(jié)果：

二、Unix時(shí)間戳（毫秒）—>字符串，使用dayjs()

我們先來(lái)了解一些dayjs的知識(shí)

（一）解析

解析后，返回一個(gè)Day.js對(duì)象

1.當(dāng)前時(shí)間

直接調(diào)用dayjs()，返回一個(gè)包含當(dāng)前日期和時(shí)間的Day.js對(duì)象

var now = dayjs()
console.log(now)

在控制臺(tái)中打印解析出來(lái)的內(nèi)容：

年份:$y月份:$M+1
天數(shù):$D時(shí):$h
分:$m秒:$s

2.ISO 8601格式的字符串

const d = dayjs('2018-04-04T16:00:00.000Z')
console.log(d)

dayjs()會(huì)將ISO 8601格式的字符串按以下方式解析

Day.js中文網(wǎng)提示：

為了保證結(jié)果一致，當(dāng)解析除了 ISO 8601 格式以外的字符串時(shí)，您應(yīng)該使用 String + Format。

3.Unix時(shí)間戳（毫秒）

同樣的，傳入一個(gè)Unix時(shí)間戳(13 位數(shù)字，從1970年1月1日 UTC 午夜開(kāi)始所經(jīng)過(guò)的毫秒數(shù)) ，dayjs也會(huì)進(jìn)行相同的解析，創(chuàng)建一個(gè)Day.js對(duì)象
這里推薦一個(gè)時(shí)間戳轉(zhuǎn)換工具：https://tool.lu/timestamp/在這里插入圖片描述

dayjs(1318781876406)

4.Unix時(shí)間戳（秒）

解析傳入的一個(gè) Unix 時(shí)間戳 (10 位數(shù)字，從1970年1月1日 Utc 午夜開(kāi)始所經(jīng)過(guò)的秒數(shù)) 創(chuàng)建一個(gè) Day.js 對(duì)象。

dayjs.unix(1318781876)

5.Date對(duì)象

var d = new Date(2008, 7, 28)
var day = dayjs(d)

（二）格式化顯示

1.手動(dòng)拼接

如果你不太了解dayjs的格式化方法，你完全可以通過(guò)Day.js對(duì)象自己拼接出想要的格式。
例如，對(duì)于"YYYY/MM/DD HH:mm:ss"的格式，拼接方法如下：

const formatTimestamp = (ttmp: number) => {
  var y = dayjs(ttmp).$y.toString();
  var m =
    dayjs(ttmp).$M + 1 >= 10
      ? (dayjs(ttmp).$M + 1).toString()
      : "0" +
        (dayjs(ttmp).$M + 1)
          .toString()

          .toString();
  var d =
    dayjs(ttmp).$D >= 10
      ? dayjs(ttmp).$D.toString()
      : "0" + dayjs(ttmp).$D.toString().toString();
  var ht =
    dayjs(ttmp).$H >= 10
      ? dayjs(ttmp).$H.toString()
      : "0" + dayjs(ttmp).$H.toString();
  var mt =
    dayjs(ttmp).$m >= 10
      ? dayjs(ttmp).$m.toString()
      : "0" + dayjs(ttmp).$m.toString();
  var s =
    dayjs(ttmp).$s >= 10
      ? dayjs(ttmp).$s.toString()
      : "0" + dayjs(ttmp).$s.toString();
  return y + "/" + m + "/" + d + " " + ht + ":" + mt + ":" + s;
};

2.dayjs().format()

但如果你了解dayjs的話，你會(huì)發(fā)現(xiàn)它其實(shí)是有格式化函數(shù)的～即一行代碼就可以解決了～！有空還是得多看看文檔啊。?！，F(xiàn)成的format不用，整什么真假摻半的原生js，我還擱這兒美呢。。。

dayjs(ttmp:number).format('YYYY-MM-DD HH:mm:ss')

三、在中使用

對(duì)于Naive UI中的日期選擇器（Date Picker）組件，作者已經(jīng)給我們留好API了，感謝他

<template>
  <pre>{{ formattedValue }}</pre>
  <n-date-picker
    v-model:formatted-value="formattedValue"
    value-format="yyyy.MM.dd HH:mm:ss"
    type="datetime"
    clearable
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    return {
      formattedValue: ref('2007.06.30 12:08:55')
    }
  }
})
</script>

結(jié)束～！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-783668.html

到了這里，關(guān)于前端中不同格式的日期相互轉(zhuǎn)換（字符串、時(shí)間戳）js相關(guān)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！