说说 Javascript 的 Date

lishengzxc commented 8 years ago

基础的 Date() 就不说了~ :)

如何获得某个月的天数？

不知道大家遇到过这个问题吗？我想如果你们写过日期组件一定有这个问题，我当时的解决方案是这样的：

以下的三个方法，month 参数我都根据 JS 本身对于 Date 的月份定义，采用0为1月

最老实的办法

const EVERY_MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function getDays(year, month) {
  if (month === 1 && isLeap(year)) return 29;
  return EVERY_MONTH_DAYS[month];
}

手动做了每个月天数的映射，如果是2月份并闰年，那天数+1 随便安利一个自己写的 osx 上的日历插件 https://github.com/lishengzxc/ng2-calendar

那没有更好的方法呢？手动 map 和闰年判断的逻辑没有就好了。

稍微 diao 一点的办法

function getDays(year, month) {
  if (month === 1) return new Date(year, month, 29).getMonth() === 1 ? 29 : 28;
  return new Date(year, month, 31).getMonth() === month ? 31 : 30;
}

我们发现，new Date()的第三个参数是可以大于我们所知的每个月的最后一天的的，比如：

new Date(2016, 0, 200) //Mon Jul 18 2016 00:00:00 GMT+0800 (CST)

这样，我们就利用这个 JS 的特性，用29和31这两个关键点，去判断除了那个月的最后一天+1还是那个月吗？(其实28和30是关键点)。

再稍微 diao 一点的方法

function getDays(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

new Date()的第三个参数传小于1的值会怎么样了，比如传0，我们就获得了上个月的最后一天，当然传负数也没问题：

new Date(2016, 0, -200) //Sun Jun 14 2015 00:00:00 GMT+0800 (CST)

Date.prototype.各种String

具体的文档解释懒得再复制一下给大家看，参考链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

这里主要和大家普及以下知识：

GMT(格林尼治平时)

格林尼治平时（又称格林尼治平均时间或格林尼治标准时间，旧译格林威治标准时间；英语：Greenwich Mean Time，GMT）是指位于英国伦敦郊区的皇家格林尼治天文台的标准时间，因为本初子午线被定义在通过那里的经线。

自1924年2月5日开始，格林尼治天文台每隔一小时会向全世界发放调时信息。

理论上来说，格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时（也就是在格林尼治上空最高点时）的时间。由于地球在它的椭圆轨道里的运动速度不均匀，这个时刻可能与实际的太阳时有误差，最大误差达16分钟。

由于地球每天的自转是有些不规则的，而且正在缓慢减速，因此格林尼治时间已经不再被作为标准时间使用。现在的标准时间，是由原子钟报时的协调世界时（UTC）。

所以我们也从 MDN 上的文档看到对于toGMTString()的解释是：

Returns a string representing the Date based on the GMT (UT) time zone. Use toUTCString() instead.

UTC(世界标准时间)

协调世界时，又称世界标准时间或世界协调时间，简称UTC（从英文「Coordinated Universal Time」／法文「Temps Universel Cordonné」而来），是最主要的世界时间标准，其以原子时秒长为基础，在时刻上尽量接近于格林尼治平时

CST(北京时间)

北京时间，China Standard Time，中国标准时间。在时区划分上，属东八区，比协调世界时早8小时，记为UTC+8。

不过这个CST这个缩写比较纠结的是它可以同时代表四个不同的时间：

Central Standard Time (USA) UT-6:00
Central Standard Time (Australia) UT+9:30
China Standard Time UT+8:00
Cuba Standard Time UT-4:00

插一个中国地区 JS 客户端时间和服务端时间不一致的问题

总结就是，前后端去传时间的时候，尽量都用 UTC 时间。

ISO 日期和时间的表示方法

if ( !Date.prototype.toISOString ) {
  ( function() {

    function pad(number) {
      if ( number < 10 ) {
        return '0' + number;
      }
      return number;
    }

    Date.prototype.toISOString = function() {
      return this.getUTCFullYear() +
        '-' + pad( this.getUTCMonth() + 1 ) +
        '-' + pad( this.getUTCDate() ) +
        'T' + pad( this.getUTCHours() ) +
        ':' + pad( this.getUTCMinutes() ) +
        ':' + pad( this.getUTCSeconds() ) +
        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
        'Z';
    };

  }() );
}

通过 Polyfill 我们就能知道 ISO 是怎么表示时间的，最主要的特征是最后一位是“Z”，然后表示的总是 UTC 时间。

额外的补充

.valueOf() 和 .getTime()

.valueOf()的功能和.getTime()一样。
该方法通常在 JavaScript 内部被调用，而不是在代码中显式调用。什么意思？没有 valueOf，那么 Date的实例是不能进行运算的。

var obj = Object.create(null);
obj + 1; // Uncaught TypeError: Cannot convert object to primitive value(…)

.toJSON

直接看这个 API 的名字的时候，我以为会返回一个 JSON 格式的字符串，但其实是这么一个东西

new Date().toJSON() // "2016-05-05T06:03:28.130Z"

其实是这么回事

JSON.stringify(new Date()) // ""2016-05-05T06:06:02.615Z""

那结果能够被 parse 吗？

JSON.parse(JSON.stringify(new Date())) // "2016-05-05T06:19:24.766Z"
JSON.parse('"' + new Date().toJSON() + '"') // "2016-05-05T06:19:24.766Z"

但是结果只是字符串而已。需要再讲这个字符串交给 new Date() 才行。

注：

.toJSON方法，这里稍微有点逻辑问题，执行JSON.stringify的话，会自动在对象上搜索toJSON方法，而不是说date.toJSON内部调用的是JSON.stringify(date) (感谢@warjiang的指正)

.toLocaleFormat()

不属于任何标准。在JavaScript 1.6中被实现。似乎也只有 Firefox 自持这个 API，其实正确姿势是用 .toLocaleDateString()

.toLocale各种String()

.toLcale各种String(locales [, options]])
妈的这个 API 有点烦，看 MDN 的文档你就知道。这个 API 是用来本地化时间的。

这里稍微说下我对这些参数的理解：

`locales`

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// formats below assume the local time zone of the locale;
// America/Los_Angeles for the US

// US English uses month-day-year order
alert(date.toLocaleString("en-US"));
// → "12/19/2012, 7:00:00 PM"

// British English uses day-month-year order
alert(date.toLocaleString("en-GB"));
// → "20/12/2012 03:00:00"

// Korean uses year-month-day order
alert(date.toLocaleString("ko-KR"));
// → "2012. 12. 20. 오후 12:00:00"

// Arabic in most Arabic speaking countries uses real Arabic digits
alert(date.toLocaleString("ar-EG"));
// → "٢٠‏/١٢‏/٢٠١٢ ٥:٠٠:٠٠ ص"

// for Japanese, applications may want to use the Japanese calendar,
// where 2012 was the year 24 of the Heisei era
alert(date.toLocaleString("ja-JP-u-ca-japanese"));
// → "24/12/20 12:00:00"

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
alert(date.toLocaleString(["ban", "id"]));
// → "20/12/2012 11.00.00"

以locales所指的地区的时区和语言输出。

`options`

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

localeMatcher 选择本地匹配的什么算法，似乎没什么大用
timeZone 再设置下 UTC 时区
hour12 是否12小时制
formatMatcher 各日期时间单元的格式化
- weekday Possible values are "narrow", "short", "long".
- era Possible values are "narrow", "short", "long".
- year Possible values are "numeric", "2-digit".
- month Possible values are "numeric", "2-digit", "narrow", "short", "long".
- day Possible values are "numeric", "2-digit".
- hour Possible values are "numeric", "2-digit".
- minute Possible values are "numeric", "2-digit".
- second Possible values are "numeric", "2-digit".
- timeZoneName Possible values are "short", "long".

栗子：

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

date.toLocaleString("en-US", {hour12: false}); // "12/19/2012, 19:00:00"

var options = {timeZoneName:'long',weekday: "long", year: "2-digit", month: "narrow", day: "numeric"};
date.toLocaleString("en-US", options); // "Thursday, D 20, 12, China Standard Time"

插一个JavaScript 显示 Y-m-d H:i:s 的日期时间格式

老实的方法

let date = new Date();
let result = [
  [
    date.getFullYear(),
    date.getMonth() + 1,
    date.getDate()
  ].join('-'),
  [
    date.getHours(),
    date.getMinutes(),
    date.getSeconds()
  ].join(':')
].join(' ').replace(/\b\d\b/g, '0$&');

diao 一点的方法

var date = new Date();
var result = date.toLocaleString('zh-CN', { hour12: false })
  .replace(/\//g, '-').replace(/\b\d\b/g, '0$&');

一些有用的时间库

mishe commented 8 years ago

非常棒，特别是获取每月天数

warjiang commented 8 years ago

不错，关于如何获取day写的很不错。但是还有点问题

关于.valueOf() 和 .getTime()，如果date对象参与运算是调用的toString而不是valueOf
.toJSON方法，这里稍微有点逻辑问题，执行JSON.stringify的话，会自动在对象上搜索toJSON方法，而不是说date.toJSON内部调用的是JSON.stringify(date)

lishengzxc commented 8 years ago

@warjiang 是参与运算时调用的 toString？这个我觉得不对哎

new Date().toString() // "Fri Jun 03 2016 13:41:16 GMT+0800 (CST)"

日期的相减

new Date(2017, 0, 1) - new Date() // 18267444344

所以这应该还是调用 valueOf

关于 .toJSON 你说的没错

warjiang commented 8 years ago

@lishengzxc 这里我没有说清楚，我想说的是比如说执行

var d = new Date(); 
console.log(d + 1);

这个时候相当于执行

var d = new Date(); 
console.log(d.toString() + 1);

这里突出来的问题是对于 object + 1的话如果object是Date类型的话会执行object.toString() + 1 如果object是其余的类型，会先尝试调用object.valueOf() + 1;如果object.valueOf()返回的还是object类型那个的话，会执行object.toString() + 1

lishengzxc commented 8 years ago

@warjiang 恩，其实是这样的 +运算符是会尝试调用toString()，而其他算术运算符-、/、* 则是调用valueOf()

这个行为在 ES6 中得到充分解释，并且可以改变：

Symbol.toPrimitive
对象的Symbol.toPrimitive属性，指向一个方法。该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。

Symbol.toPrimitive被调用时，会接受一个字符串参数，表示当前运算的模式，一共有三种模式。

Number：该场合需要转成数值
String：该场合需要转成字符串
Default：该场合可以转成数值，也可以转成字符串

let obj = {
  [Symbol.toPrimitive](hint) {
    switch (hint) {
      case 'number':
        return 123;
      case 'string':
        return 'str';
      case 'default':
        return 'default';
      default:
        throw new Error();
     }
   }
};

2 * obj // 246
3 + obj // '3default'
obj === 'default' // true
String(obj) // 'str'

refer: http://es6.ruanyifeng.com/#docs/symbol

yolio2003 commented 8 years ago

好文赞！

codezyc commented 8 years ago

👍

wssgcg1213 commented 8 years ago

@warjiang @lishengzxc 这个 + 或许可以这么理解

的两种含义
1. 单目操作：转换成number，调用的是valueOf
2. 双目操作：字符串拼接，调用的是toString

var d = new Date()
console.log(+d)
console.log(1 + d)
console.log(1 + (+d))

wyysf commented 8 years ago

toLocaleString 这个有时候返回的是英文的，有不一致的情况

yanlee26 commented 7 years ago

很好的总结

xinxingyu commented 7 years ago

mark, 写的很棒

sarusama commented 6 years ago

干货，好文

lishengzxc / bblog