本文详解JavaScript中多种时间格式的转换方法,辨析UTC与GMT的区别。涵盖Date对象转字符串、时间戳与日期互转,重点解决JSON格式(ISO8601)转换时的时区误差问题,并提供Vue过滤器及Dayjs库的实用解决方案。
JavaScript 中涉及多种时间格式的转换操作。
| 时间格式 | 示例 |
|---|---|
| 中国标准时间 | Fri Mar 18 2022 14:24:45 GMT+0800(中国标准时间) |
| 部分可读字符串 | Fri Mar 18 2022 |
| 格林威治时间 | Fri,18 Mar 2022 06:24:45 GMT |
| 现在用的时间标准UTC | Fri Mar 18 2022 06:24:45 GMT |
| IOS标准时间(JSON时间格式) | 2022-03-18T06:24:45.061Z |
| 常见时间格式 | 2022-03-18 14:24:45 |
需要特别注意:UTC 时间与 GMT 时间并不等同。
GMT 即格林尼治标准时间(Greenwich Mean Time)。该时间基于英国格林尼治天文台的观测结果,曾作为世界标准时间。
UT 即世界时(Universal Time),它是依据原子钟计算得出的时间标准。
UTC 即协调世界时(Coordinated Universal Time)。由于地球自转速度逐渐变慢,每年会比前一年多出零点几秒,协调世界时组织会定期为世界时增加 1 秒(闰秒),以缩小基于原子钟的世界时与基于天文观测的格林尼治标准时间之间的差异。目前使用的世界标准时间即为 UTC。
协调世界时与任何地理位置无关,也不代表特定地区的本地时间,因此在描述某地具体时间时必须结合时区信息。
综上所述,GMT 不等于 UTC。
获取时间
var newDate = new Date();
console.log('newDate',newDate)
//Fri Mar 18 2022 14:24:45 GMT+0800(中国标准时间)
1.把 Date 对象的日期部分转换为可读字符串:
console.log('toDateString',newDate.toDateString());
// Fri Mar 18 2022
2.根据格林威治时间 (GMT) 把 Date 对象转换为字符串(需注意的是)
console.log('toGMTString',newDate.toGMTString());
// Fri,18 Mar 2022 06:24:45 GMT
不建议使用,因为此日期会在转换为字符串之前由本地时区转换为 GMT 时区。
例如:传入具体时间
var localDate=new Date('July 21, 1983 01:15:00')
console.log(localDate.toGMTString())
// Wed, 20 Jul 1983 17:15:00 GMT
输出的时间会和传入的时间有时差
3.使用 ISO 标准返回 Date 对象的字符串格式:
console.log('toISOString',newDate.toISOString());
// 2022-03-18T06:24:45.061Z
4.将 Date 对象转换为字符串,并格式化为 JSON 数据格式。
console.log('toJSON',newDate.toJSON());
// 2022-03-18T06:24:45.061Z
5.根据本地时间把 Date 对象的日期部分转换为字符串:
console.log('toLocaleDateString',newDate.toLocaleDateString());
// 2022/3/18
6.根据本地时间把 Date 对象转换为字符串:
console.log('toLocaleString',newDate.toLocaleString());
// 2022/3/18 下午2:24:45
7.根据本地时间把 Date 对象的时间部分转换为字符串:
console.log('toLocaleTimeString',newDate.toLocaleTimeString());
// 下午2:24:45
8. Date 对象转换为字符串。
console.log('toString',newDate.toString());
// Fri Mar 18 2022 14:24:45 GMT+0800(中国标准时间)
9.把 Date 对象的时间部分转换为字符串:
console.log('toTimeString',newDate.toTimeString());
// 14:24:45 GMT+0800(中国标准时间)
10.根据世界时 (UTC) 把 Date 对象转换为字符串:
console.log('toUTCString',newDate.toUTCString());
// Fri Mar 18 2022 06:24:45 GMT
将日期转换为时间戳。
var date = new Date(); // 当前时间
console.log('date',date)
三种方法:
var time1 = date.getTime();
var time2 = date.valueOf();
var time3 = Date.parse(date);
console.log('time1',time1)
console.log('time2',time2)
console.log('time3',time3)

注意:若使用 JSON 格式的时间字符串进行转换,获取的时间戳可能存在差异。
var date =new Date('2022-03-16T16:00:00.000Z'); // 当前时间
console.log('date',date)
var time1 = date.getTime();
var time2 = date.valueOf();
var time3 = Date.parse(date);
console.log('time1',time1)
console.log('time2',time2)
console.log('time3',time3)

将时间戳转换为日期。
function add0(m){return m<10?'0'+m:m }
function format(shijianchuo)
{
//shijianchuo是整数,否则要parseInt转换
var time = new Date(shijianchuo); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}
然而,对于‘2022-03-16T16:00:00.000Z’这类时间格式,上述常规方式获取的时间结果可能出现错误。
可以尝试采用以下替代方法进行处理。
var time = '2022-03-16T16:00:00.000Z'
time = time.replace(/-/, '年')
time = time.replace(/-/, '月')
time = time.replace(/T/, '日')
let times = time.split('.')
console.log(times[0])
//2022年03月16日16:00:00
若项目基于 Vue2,可以封装一个过滤器来实现。
// 封装项目中需要使用到的过滤器
import moment from 'moment'
// 1.时间日期过滤器
// 参数说明:不管是否传递了参数,都会有一个默认参数,就是管道符前面的数据
// 意味着用户参数从参数列表的第二个开始
export const dateFormat = (data, spe = '-') => {
return moment(data).format('YYYY-MM-DD HH:mm:ss')
}
引入
import { dateFormat } from '@/utils/myfilters.js'
定义
filters: {
dateFormat
},
使用
<div class="time">{{currentUser.date | dateFormat}}</div>
此外,还可以使用 dayjs 库,具体详情可参考其官方文档,此处不再赘述。
官网地址:https://dayjs.fenxianglu.cn/
附:如何判断是否为当天时间。
if (new Date(str).toDateString() === new Date().toDateString()) {
//今天
console.log("当天");
} else if (new Date(str) < new Date()){
//之前
console.log(new Date(str).toISOString().slice(0,10));
}
总结
到此这篇关于 js 中各种时间格式的转换方法的文章就介绍到这了,更多相关 js 时间格式转换内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!