这篇文章讲述了在reactjs/javascript中把时间戳转换为日期/从日期转换为unix时间戳。
在前端应用程序中，由于客户端和服务器端的日期不同，所以日期操作有一点不同。
有些时候，从后端API返回的包含日期相关信息的数据需要格式化并转换为日期。Reactjs应用程序提供了两种方法
使用 momentjs 库 Intl DateTimeFormat
时间戳是Unix风格的长值，返回从1970/1/1 UTC开始经过的毫秒数。
在javascript中，以下是javascript提供的获取当前时间戳的方法。
你可以查看我之前关于javascript中当前时间戳的文章。
Date.now()
new Date().getTime()
new Date().valueOff
注意，有两个时间戳，第一个是客户端运行的本地时间戳，另一个是美国服务器区的UTC时区时间戳。
有多种方法，可以在reactjs中把纪元时间戳转换为日期格式。
在javascript中，Intl.DateTimeFormat提供了与日期和时间戳有关的操作方法。
DateTimeFormat接受locale信息作为第一个参数，第二个参数是选项。 它返回一个Intl.DateTimeFormat的对象，调用format方法将返回所需的日期。
下面是一个例子：将时间戳转换为日期和时间
let currentTimestamp = Date.now()
console.log(currentTimestamp); // get current timestamp
let date = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(currentTimestamp)
Locale被指定为en-US ，输出所需的日期格式在第二个参数中被提供为对象。
请注意，所有的输出日期只转换为美国的日期和时间格式。
输出：
console.log(date);
1610380287270
01/11/2021, 9:21:27 PM
下面是一个例子：仅将时间戳转换为日期
let date = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).format(currentTimestamp) // 01/11/2021
例子：仅将时间戳转换为时间
let date = new Intl.DateTimeFormat('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(currentTimestamp)//9:27:16 PM
让我们看看在react中把时间戳数组转换为日期的例子
完整的例子：
import React, { Component } from "react";
const empsApiData = [
{
id: '1',
name: 'Franc',
createdAt: 1610378858273
},
{
id: '21',
name: 'John',
createdAt: 1610378858273
},
{
id: '33',
name: 'John',
createdAt: 1610378858273
},
{
id: '2',
name: 'Krish',
}
];
class ListComponent extends Component {
constructor(props) {
console.log('kiran ', empsApiData)
super(props);
const newEmps = empsApiData.map((emp) => ({
"id": emp.id,
"name": emp.name,
"createdAt": new Intl.DateTimeFormat('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(emp.createdAt)
}));
this.state = {
emps: newEmps
}
}
render() {
return (
<div className="App">
<ul>
{this.state.emps.map((item, index) => (
<li key={item.id}>
<span>{item.name} </span>
<span>{item.createdAt} </span>
</li>
))}
</ul>
</div>
);
}
}
export default ListComponent;
在浏览器中看到的输出是
momentjs format 'YYYY-MM-DD'。
首先，安装 momentjs npm 库，如下图所示
npm install momentjs --save
接下来，将moment 类导入反应组件中
import moment from 'moment'
在react组件中，将时间戳传递给moment对象，调用格式方法，参数为'L'，L表示本地化的日期格式。
moment(emp.createdAt).format('L') returns 07/11/2011
还有一种方法，你可以使用自定义格式
moment(emp.createdAt).format("YYYY-MMM-DD")
这里的日期可以是日期对象或字符串日期，它被转换为Unix的时间戳，单位是毫秒。
从给定的日期转换时间戳很简单。
首先，你必须使用new Date(String) ，将字符串转换成日期对象。接下来，在日期对象上调用getTime()方法，返回*Unix时间戳。
console.log((new Date("2021-01-01")).getTime()); // 1609459200000
示例：将当前日期转换为当前时间戳
let date = new Date();
var timestamp = date.getTime();
momentjs valueOf方法
valueOf方法返回自纪元时间以来的Unix秒数。
与1000相乘，可以得到以mili秒为单位的时间戳。
moment("01/01/2021", "YYYY-MM-DD").valueOf() *1000
总结
在这篇文章中，你将了解到在reactjs/JavaScript中把日期转换成Unix时间戳的多种方法。
希望能对你有所帮助:-)
