Date类型 方法

来源:http://www.sh-fengwen.com 作者: 营养排行 人气:94 发布时间:2019-12-04
摘要:JS原生Date类型方法的一些冷知识 2015/09/07 · JavaScript· Date 原文出处:chitanda    一个多月没更新了--偷懒中。这个东西其实很早之前就在整理了,不过后来发现自己不少地方没弄明白,

JS原生Date类型方法的一些冷知识

2015/09/07 · JavaScript · Date

原文出处: chitanda   

一个多月没更新了- -偷懒中。这个东西其实很早之前就在整理了,不过后来发现自己不少地方没弄明白,然后就一直卡那边了(其实就是不想写吧),想了下反正是给自己熟悉js的原生API而已,所以也没必要太钻牛角尖,也不一定要多完整,因此就当是Date()函数的一个冷门知识点小补充吧。这篇文章主要讲Date()的字符串与时间戳转换以及用户时间本地化,可能内容上比较乱(不然也不会卡我一个月时间了),见谅

ps:由于 Date() 是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别。本文测试未特别申明浏览器的情况下,均是指 win7 x64+chrome 44.0.2403.155 (正式版本) m (32 位) 版本

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script type="text/javascript">
 9             
10             var now=Date.parse('May 8,2017');
11             console.log("日期的毫秒数:"+now);
12             
13             //Date.UTC():也可以获得时间的毫秒数,但是里面的参数不同(May 8,2017)是代表2017年5月8号,月份的基数是0
14             var utc=Date.UTC(2017,3,8);
15             console.log("utc时间毫秒数:"+utc);
16             
17             //new Date(); 返回当天的日期和时间。 
18             var time1=new Date();
19             console.log("当天的日期和时间:"+time1);
20             
21             //根据本地时间把 Date对象转换为字符串,并返回结果。
22             var time2=time1.toLocaleString();
23             console.log("本地时间把 Date对象转换为字符串:"+time2);
24             
25             //把 Date对象转换为字符串,并返回结果。
26             var time3=time1.toString();
27             console.log("Date对象转换为字符串:"+time3);
28             
29             //返回 Date 对象的原始值。
30             var time4=time1.valueOf();
31             console.log("Date对象的原始值:"+time4);
32             
33             //把 Date 对象的日期部分转换为字符串,并返回结果。
34             var time5=time1.toDateString();
35             console.log("Date对象的日期部分:"+time5);
36             
37             //把 Date对象的时间部分转换为字符串,并返回结果。
38             var time6=time1.toTimeString();
39             console.log("Date对象的时间部分:"+time6);
40             
41             //根据本地时间把 Date 对象的日期部分转换为字符串,并返回结果。
42             var time7=time1.toLocaleDateString();
43             console.log("本地时间的日期部分:"+time7);
44             
45             //根据本地时间把 Date 对象的时间部分转换为字符串,并返回结果。
46             var time8=time1.toLocaleTimeString();
47             console.log("本地时间的时间部分:"+time8);
48             
49             //根据世界时 (UTC) 把 Date 对象转换为字符串,并返回结果。
50             var time9=time1.toUTCString();
51             console.log("世界时间UTC:"+time9);
52             
53             //返回指定的日期和时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数。
54             var time10=time1.getTime();     
55             console.log("时间距离毫秒数:"+time10);
56             
57             //返回一个表示年份的 4 位数字。
58             var time11=time1.getFullYear();    
59             console.log("年:"+time11);
60             
61             //返回月份字段,使用本地时间。返回值是 0(一月) 到 11(十二月) 之间的一个整数。
62             var time12=time1.getMonth();     
63             console.log("月份:"+time12);
64             
65             //返回月份中的某一天,使用本地时间。返回值是 1 ~ 31 之间的一个整数。
66             var time13=time1.getDate();
67             console.log("日期:"+3);
68             
69             //dateObject.getDay() dateObject 所指的星期中的某一天,使用本地时间。返回值是 0(周日) 到 6(周六) 之间的一个整数。
70             var time14=time1.getDay();
71             console.log("星期:"+time14);
72             
73             //getHours()返回时间的小时字段。
74             var time15=time1.getHours();
75             console.log("小时:"+time15);
76             
77             //getHours()返回时间的分钟字段。
78             var time16=time1.getMinutes();
79             console.log("分钟:"+time16);
80             
81             //getHours()返回时间的秒钟字段。
82             var time17=time1.getSeconds(); 
83             console.log("秒钟:"+time17);
84 
85         </script>
86     </body>
87 </html>

Date()与new Date()的区别

Date() 直接返回当前时间字符串,不管参数是number还是任何string

JavaScript

Date(); Date('sssss'); Date(1000); //Fri Aug 21 2015 15:46:21 GMT+0800 (中国标准时间)

1
2
3
4
Date();
Date('sssss');
Date(1000);
//Fri Aug 21 2015 15:46:21 GMT+0800 (中国标准时间)

而 new Date() 则是会根据参数来返回对应的值,无参数的时候,返回当前时间的字符串形式;有参数的时候返回参数所对应时间的字符串。 new Date() 对参数不管是格式还是内容都要求,且只返回字符串,

JavaScript

new Date(); //Fri Aug 21 2015 15:51:55 GMT+0800 (中国标准时间) new Date(1293879600000); new Date('2011-01-01T11:00:00') new Date('2011/01/01 11:00:00') new Date(2011,0,1,11,0,0) new Date('jan 01 2011,11 11:00:00') new Date('Sat Jan 01 2011 11:00:00') //Sat Jan 01 2011 11:00:00 GMT+0800 (中国标准时间) new Date('sss'); new Date('2011/01/01T11:00:00'); new Date('2011-01-01-11:00:00') new Date('1293879600000'); //Invalid Date new Date('2011-01-01T11:00:00')-new Date('1992/02/11 12:00:12') //596069988000

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
new Date();
//Fri Aug 21 2015 15:51:55 GMT+0800 (中国标准时间)
 
new Date(1293879600000);
new Date('2011-01-01T11:00:00')
new Date('2011/01/01 11:00:00')
new Date(2011,0,1,11,0,0)
new Date('jan 01 2011,11 11:00:00')
new Date('Sat Jan 01 2011 11:00:00')
//Sat Jan 01 2011 11:00:00 GMT+0800 (中国标准时间)
 
new Date('sss');
new Date('2011/01/01T11:00:00');
new Date('2011-01-01-11:00:00')
new Date('1293879600000');
//Invalid Date
 
new Date('2011-01-01T11:00:00')-new Date('1992/02/11 12:00:12')
//596069988000

从上面几个测试结果可以很容易发现

  1. new Date() 在参数正常的情况只会返回当前时间的字符串(且是当前时区的时间)
  2. new Date() 在解析一个具体的时间的时候,对参数有较严格的格式要求,格式不正确的时候会直接返回Invalid Date,比如将 number 类的时间戳转换成 string 类的时候也会导致解析出错
  3. 虽然 new Date() 的返回值是字符串,然而两个 new Date() 的结果字符串是可以直接相减的,结果为相差的毫秒数。

那么, new Date() 能接受的参数格式到底是什么标准呢?(相对于严格要求的多参数传值方法。非严格的单参数(数字日期表示格式)更常用且更容易出错,所以下文只考虑单参数数字时间字符串转换的情况)

表示格式)更常用且更容易出错,所以下文只考虑单参数数字时间字符串转换的情况)


图片 1

new Date()解析所支持的参数格式标准

 

时间戳格式

这个是最简单的也是最不容易出错的。当然唯一的缺点大概就是对开发者不直观,无法一眼看出具体日期。
需要注意的以下两点:

  1. js内的时间戳指的是当前时间到1970年1月1日00:00:00 UTC对应的毫秒数,和unix时间戳不是一个概念,后者表示秒数,差了1000倍
  2. class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-r">new class="crayon-r">Date( class="crayon-v">timestamp class="crayon-sy">) 中的时间戳必须是number格式, class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-t">string 会返回Invalid Date。所以比如new Date('11111111')这种写法是错的

时间数字字符串格式

不大清楚这种该怎么描述,就是类似YYYY/MM/DD HH:mm:SS这种。下文以dateString代指。
new Date(dateString)所支持的字符串格式需要满足RFC2822标准或者ISO 8601标准
这两种标准对应的格式分别如下:

  1. RFC2822 标准日期字符串
JavaScript

YYYY/MM/DD HH:MM:SS ± timezon(时区用4位数字表示) // eg 1992/02/12
12:23:22+0800

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6c187675a314957670-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675a314957670-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6c187675a314957670-1" class="crayon-line">
YYYY/MM/DD HH:MM:SS ± timezon(时区用4位数字表示)
</div>
<div id="crayon-5b8f6c187675a314957670-2" class="crayon-line crayon-striped-line">
// eg 1992/02/12 12:23:22+0800
</div>
</div></td>
</tr>
</tbody>
</table>

>  RFC2822还有别的格式,不过上面这个是比较常用的(另外这标准太难啃了,实在没耐心啃完,所以也就没太深入)。RFC2822标准本身还有其他的非数字日期表达方式,不过不在这个话题讨论范围内了,略过
  1. ISO 8601标准日期字符串
JavaScript

YYYY-MM-DDThh:mm:ss ± timezone(时区用HH:MM表示) 1997-07-16T08:20:30Z
//
“Z”表示UTC标准时区,即"00:00",所以这里表示零时区的`1997年7月16日08时20分30秒`
//转换成位于东八区的北京时间则为`1997年7月17日16时20分30秒`
1997-07-16T19:20:30+01:00 //
表示东一区的1997年7月16日19时20秒30分,转换成UTC标准时间的话是1997-07-16T18:20:30Z

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6c187675d765819674-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6c187675d765819674-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6c187675d765819674-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6c187675d765819674-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c187675d765819674-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6c187675d765819674-1" class="crayon-line">
 YYYY-MM-DDThh:mm:ss ± timezone(时区用HH:MM表示)
</div>
<div id="crayon-5b8f6c187675d765819674-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6c187675d765819674-3" class="crayon-line">
 1997-07-16T08:20:30Z
</div>
<div id="crayon-5b8f6c187675d765819674-4" class="crayon-line crayon-striped-line">
 // “Z”表示UTC标准时区,即&quot;00:00&quot;,所以这里表示零时区的`1997年7月16日08时20分30秒`
</div>
<div id="crayon-5b8f6c187675d765819674-5" class="crayon-line">
 //转换成位于东八区的北京时间则为`1997年7月17日16时20分30秒`
</div>
<div id="crayon-5b8f6c187675d765819674-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6c187675d765819674-7" class="crayon-line">
 1997-07-16T19:20:30+01:00
</div>
<div id="crayon-5b8f6c187675d765819674-8" class="crayon-line crayon-striped-line">
 // 表示东一区的1997年7月16日19时20秒30分,转换成UTC标准时间的话是1997-07-16T18:20:30Z
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 日期和时间中间的T不可以被省略,一省略就出错。
  2. 虽然在chrome浏览器上时区也可以用+0100这种RFC2822的形式来表示,然而IE上不支持这种混搭写法,所以用ISO8601标准形式表示的时候时区要用+HH:MM

单单从格式上来说,两者的区别主要在于分隔符的不同。不过需要注意的是,ISO 8601标准的兼容性比RFC2822差得多(比如IE8和iOS均不支持前者。我知道IE8很多人会无视,不过iOS也有这个坑的话,各位或多或少会谨慎点了吧?),所以一般情况下建议用RFC 2822格式的。
不过需要注意的是,在未指定时区的前提下,对于只精确到day的日期字符串,RFC 2822返回结果是以当前时区的零点为准,而ISO8601返回结果则会以UTC时间的零点为标准进行解析。
例如:

JavaScript

//RFC2822: new Date('1992/02/13') //Thu Feb 13 1992 00:00:00 GMT+0800 (中国标准时间) //ISO8601: new Date('1992-02-13') //Thu Feb 13 1992 08:00:00 GMT+0800 (中国标准时间)

1
2
3
4
//RFC2822:
new Date('1992/02/13') //Thu Feb 13 1992 00:00:00 GMT+0800 (中国标准时间)
//ISO8601:
new Date('1992-02-13') //Thu Feb 13 1992 08:00:00 GMT+0800 (中国标准时间)

 

然而上面这个只是ES5的标准而已,在ES6里这两种形式都会变成当前时区的零点为基准1
*不管你们崩溃没,反正我是已经想死了*
关于跨浏览器的dataString解析情况,还可以参考这个页面:
JavaScript and Dates, What a Mess!

所以对于时间字符串对象,个人意见是要么用RFC2822形式,要么自己写个解析函数然后随便你传啥格式进来。


时间格式化函数的效率

这里的时间格式化值得是将时间字符串转换成毫秒数的过程。js原生的时间格式化函数有Date.parseDate.prototype.valueOfDate.prototype.getTimeNumber(Date)+Date(还有个Date.UTC方法,然而对参数要求严格,不能直接解析日期字符串,所以略过)
这5个函数从功能上来说一模一样,但是具体的效率如何呢?我写了个检测页面,诸位也可以自己测试下。
点击预览

核心测试函数:

JavaScript

function test(dateString,times,func){ var startTime=window.performance.now(); // console.log('start='+startTime.getTime()); for (var i = 0; i < times; i++) { func(dateString);//这里填写具体的解析函数 }; var endTime=window.performance.now(); // console.log('endTime='+endTime.getTime()); var gapTime=endTime-startTime; console.log('一共耗时:'+gapTime+'ms'); // console.log('时间字符串'+dateString); return gapTime; }

1
2
3
4
5
6
7
8
9
10
11
12
13
    function test(dateString,times,func){
    var startTime=window.performance.now();
    // console.log('start='+startTime.getTime());
    for (var i = 0; i < times; i++) {
        func(dateString);//这里填写具体的解析函数
    };
    var endTime=window.performance.now();
    // console.log('endTime='+endTime.getTime());
    var gapTime=endTime-startTime;
      console.log('一共耗时:'+gapTime+'ms');
    // console.log('时间字符串'+dateString);
    return gapTime;
}

 

之所以这里用window.performance.now()而不用new Date(),是因为前者精确度远比后者高。后者只能精确到ms。会对结果造成较大影响

测试结果:

单次执行50W次时间格式化函数,并重复测试100次,最后的结果如下:
(表格中的数字为单次执行50W次函数的平均结果。单位为毫秒)

函数 chrome IE Firefox
Date.parse() 151.2087 55.5811 315.0446
Date.prototype.getTime() 19.5452 21.3423 14.0169
Date.prototype.valueOf() 20.1696 21.7192 13.8096
+Date() 20.0044 31.3511 22.7861
Number(Date) 23.0900 24.8838 23.3775

从这个表格可以很容易得出以下结论:

  1. 从计算效率上来说,Date.prototype.getTime()Date.prototype.valueOf()>+DateNumber(Date)>>Date.parse()
  2. 从代码书写效率上来说,对于少量的时间格式化计算,用+Date()或者Number(Date)即可。而若页面内有大量该处理,则建议用Date原生的函数Date.prototype.getTime()或者Date.prototype.valueOf().只有Date.parse,找不到任何使用的理由。
  3. 这个结果和计算机的计算性能以及浏览器有关,所以具体数字可能会有较大偏差,很正常。然而几个函数结果的时间差大小顺序并不会变。
  4. codepen的在线demo限制比较大,对于这个测验个人建议最好将源代码复制到本地文件然后进行测试

UTC,GMT时间的区别

这个不是啥重要东西,单纯当课外知识吧。

本文由美高梅游戏平台网站发布于 营养排行,转载请注明出处:Date类型 方法

关键词:

上一篇:线条之美,玩转SVG线条动画

下一篇:没有了

最火资讯