Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

说说 Javascript 的 Date #5

Open
lishengzxc opened this issue May 5, 2016 · 12 comments
Open

说说 Javascript 的 Date #5

lishengzxc opened this issue May 5, 2016 · 12 comments

Comments

@lishengzxc
Copy link
Owner

lishengzxc commented May 5, 2016

基础的 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
Copy link

mishe commented May 6, 2016

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

@warjiang
Copy link

warjiang commented Jun 3, 2016

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

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

@lishengzxc
Copy link
Owner Author

@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
Copy link

warjiang commented Jun 3, 2016

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

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

这个时候相当于执行

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

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

@lishengzxc
Copy link
Owner Author

@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
Copy link

好文 赞!

@codezyc
Copy link

codezyc commented Jun 12, 2016

👍

@wssgcg1213
Copy link

wssgcg1213 commented Jun 12, 2016

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

  • 的两种含义
  1. 单目操作:转换成number,调用的是valueOf
  2. 双目操作:字符串拼接, 调用的是toString
var d = new Date()
console.log(+d)
console.log(1 + d)
console.log(1 + (+d))

@wyysf
Copy link

wyysf commented Jun 23, 2016

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

@yanlee26
Copy link

很好的总结

@xinxingyu
Copy link

mark, 写的很棒

@sarusama
Copy link

干货,好文

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants