JavaScript日期时间操作完整指南！

,标准化时间是指使用一套公认的标准来表示和衡量时间的方法。这种标准化使得不同地区和系统之间能够统一地解读和比较时间。目前最常用的标准化时间系统是协调世界时（Coordinated Universal Time，简称UTC）。UTC 是基于原子钟的国际标准时间，被广泛应用于全球各个领域，包括科学、航空、计算机网络等。,在 Web 应用中，只要知道用户所在的时区，就可以随时转换、展示时间。如果知道用户当地的时间和时区，就可以将其转换为 UTC。计算机中的时间采用 ISO 日期格式，它是 ISO-8601 扩展格式的简化版本，如下所示：,,下面先来看看如何使用 JavaScript 进行日期/时间操作。,Date 对象基于 Unix Time Stamp，即自 1970 年 1 月 1 日（UTC）起经过的毫秒数。其语法如下：,注意， 创建一个新Date对象的唯一方法是通过 new 操作符，例如：let now = new Date(); 若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。,如果不向 Date 构造函数传递任何内容，则返回的日期对象就是当前的日期和时间。然后，就可以将其格式化为仅提取日期部分，如下所示：,需要注意，月份是从 0 开始的，一月就是 0，依此类推。,可以创建一个新的 Date 对象并使用 getTime() 方法来获取当前时间戳：,在 JavaScript 中，时间戳是自 1970 年 1 月 1 日以来经过的毫秒数。如果不需要支持<IE8，可以使用Date.now()直接获取时间戳，而无需创建新的 Date 对象。,可以通过不同的方式将字符串转换为 JavaScript 日期对象。Date 对象的构造函数接受多种日期格式：,需要注意，这里字符串不需要包含星期几，因为 JS 可以确定任何日期是星期几。,我们还可以传入年、月、日、小时、分钟和秒作为单独的参数：,当然，也可以使用 ISO 日期格式：,但是，如果不明确提供时区，就会有问题：,这两个都会展示当地时间 2016 年 7 月 25 日 00:00:00，但是两者是不相等的。,如果使用 ISO 格式，即使只提供日期而不提供时间和时区，它也会自动接受时区为 UTC。,现代 JavaScript 在标准命名空间中内置了一些方便的国际化函数Intl，使日期格式化变得简单。,为此，我们需要两个对象：Date 和 Intl.DateTimeFormat，并使用输出首选项进行初始化。假设想使用美国 (M/D/YYYY) 格式，则如下所示：,如果想要荷兰 (D/M/YYYY) 格式，只需将不同的区域性代码传递给 DateTimeFormat 构造函数即可：,或者美国格式的较长形式，并拼写出月份名称：,我们知道了如何解析日期并对其进行格式化，将日期从一种格式更改为另一种格式只需将两者结合起来即可。,例如，如果日期格式为 Jul 21, 2013，并且想要将格式更改为 21-07-2013，可以这样实现：,上面讨论的日期格式化方法应该适用于大多数应用，但如果想本地化日期的格式，建议使用 Date 对象的toLocaleDateString()方法：,如果想显示日期的数字版本，建议使用以下解决方案：,这里输出了 7/26/2016. 如果想确保月份和日期是两位数，只需更改选项：,这样就会输出 07/26/2016。,还可以使用其他一些相关函数来本地化时间和日期的显示方式：,,下面是在 JavaScript 日期中添加 20 天的示例（即计算出已知日期后 20 天的日期）：,原始的日期对象现在表示7月20日之后20天的日期，newDate包含的是表示该日期的本地化字符串。newDate的值是2016/8/9 15:00:00。,要计算相对时间戳，并得到更精确的差异，可以使用Date.getTime()和Date.setTime()来处理表示自某个特定时刻（即1970年1月1日）以来的毫秒数的整数。例如，如果想知道距离现在17小时后的时间：,在比较时间时，首先需要创建日期对象，<、>、<= 和 >= 都可以工作。 因此，比较 2014 年 7 月 19 日和 2014 年 7 月 18 日就很简单：,检查相等性比较棘手，因为表示同一日期的两个日期对象仍然是两个不同的日期对象并且不相等。 比较日期字符串不是一个好主意，因为例如“July 20, 2014”和“20 July 2014”表示相同的日期，但具有不同的字符串表示形式。 下面的代码片段说明了第一点：,这里将输出“不等”，这种特殊情况可以通过比较日期的时间戳来解决，如下所示：,这个例子不太符合实际的应用，因为通常不会从另一个日期对象创建日期对象。下面来看一个更实际的例子。比较用户输入的生日是否与从后端获得的幸运日期相同。,两者都代表相同的日期，但不幸的是用户将无法获得这百万美元。问题在于：JavaScript 会假定时区是浏览器提供的时区，除非另有明确指定。,这意味着，new Date (“12/20/1989”) 将创建一个日期 1989-12-20T00:00:00+5:45 或 1989-12-19T18:15:00Z ，而这与时间戳为 1989-12-20T00:00:00Z 是不同的。,不能只更改现有日期对象的时区，因此现在的目标是创建一个新的日期对象，但使用 UTC 而不是本地时区。,在创建日期对象时将忽略用户的时区并使用 UTC。有两种方法可以做到这一点：,根据用户输入日期创建 ISO 格式的日期字符串，并使用它创建 Date 对象。 使用有效的 ISO 日期格式创建 Date 对象，同时明确指定使用的是 UTC 而不是本地时区。,如果不指定时间，这也适用，因为默认为午夜（即 00:00:00Z）：,注意，如果向日期构造函数传递了正确的 ISO 日期格式 YYYY-MM-DD 的字符串，则它会自动采用 UTC。,JavaScript 提供了一个简洁的 Date.UTC() 函数，可以使用它来获取日期的 UTC 时间戳。从日期中提取组件并将它们传递给函数。,下面来讨论两个用例：,将两个日期转换为 UTC 时间戳，找出以毫秒为单位的差异并找到等效的天数。,如果需要从用户那里获取日期和时间，那么很可能需要的是他们的本地日期时间。我们在日期计算部分看到Date构造函数可以接受多种不同的日期格式。,为了消除任何混淆，建议使用new Date(year, month, day, hours, minutes, seconds, milliseconds)格式来创建日期，这是使用Date构造函数时能够做到的最明确的方式。,可以使用允许省略最后四个参数的变体，如果它们为零；例如，new Date(2012, 10, 12)与new Date(2012, 10, 12, 0, 0, 0, 0)是相同的，因为未指定的参数默认为零。,例如，如果正在使用一个日期和时间选择器，它给出了日期2012-10-12和时间12:30，可以提取这些部分并创建一个新的Date对象，如下所示：,在上述示例中，首先将日期和时间分别存储在datePickerDate和timePickerTime变量中。然后，使用split()方法将日期字符串和时间字符串拆分为数值数组，并将其存储在[year, month, day]和[hours, minutes]变量中。最后，使用这些值创建一个新的Date对象，注意按照 JavaScript 的月份规则，需要将月份减去1。这样就得到了一个包含用户所选日期和时间的Date对象。,通过遵循这种方法，可以明确地指定日期和时间，以便消除不同日期解析格式可能带来的混乱。,注意，尽量避免从字符串创建日期，除非它是 ISO 日期格式。 请改用 Date(year, month, date, hours, minutes, seconds, microseconds) 方法。,如果只获取日期（例如用户的生日），最好将格式转换为有效的 ISO 日期格式，以消除任何可能导致日期在转换为 UTC 时向前或向后移动的时区信息。 例如：,如果使用有效的 ISO 日期格式 (YYYY-MM-DD) 输入创建一个 Date 对象，它将默认为 UTC，而不是默认为浏览器的时区。,始终以 UTC 格式存储日期时间，始终将 ISO 日期字符串或时间戳保存到数据库。实践证明，在后端存储本地时间是一个坏主意，最好让浏览器在前端处理到本地时间的转换。不应该将“July 20, 1989 12:10 PM”之类的日期时间字符串发送到后端。,可以使用 Date 对象的 toISOString() 或 toJSON() 方法将本地时间转换为 UTC。,JavaScript 中的日期处理 Date() 对象一直是饱受诟病，该对象是1995 年受到 Java 的启发而实现的，自此就一直没有改变过。虽然Java已经放弃了这个对象，但是 Date() 仍保留在 JavaScript 中来实现浏览器的兼容。,Date() API 存在的问题：,此时，两个时间输出是一样的，不符合我们的预期。正因为 Date() 对象存在的种种问题。平时我们经常需要借助 moment.js、Day.js等日期库，但是它们的体积较大，有时一个简单的日期处理就需要引入一个库，得不偿失。,目前，由于Date API 在很多库和浏览器引擎中的广泛使用，没有办法修复API的不好的部分。而改变Date API 的工作方式也很可能会破坏许多网站和库。,正因如此，TC39提出了一个全新的用于处理日期和时间的标准对象和函数——Temporal。新的Temporal API 提案旨在解决Date API的问题。它为 JavaScript 日期/时间操作带来了以下修复：,Temporal 将取代 Moment.js 之类的库，这些库很好地填补了 JavaScript 中的空白，这种空白非常普遍，因此将功能作为语言的一部分更有意义。,由于该提案还未正式发布，所以，可以借助官方提供的prlyfill来测试。首选进行安装：,导入并使用：,Temporal 对象如下：,,下面就来看看 Temporal 对象有哪些实用的功能。,Temporal.Now 会返回一个表示当前日期和时间的对象：,Temporal.Instant 根据 ISO 8601 格式的字符串返回一个表示日期和时间的对象，结果会精确到纳秒：,除此之外，还可以获取纪元时间的对应的日期（UTC 1970年1月1日0点是纪元时间）：,Temporal.ZonedDateTime 返回一个对象，该对象表示在特定时区的日期/时间：,我们并不会总是需要使用精确的时间，因此 Temporal API 提供了独立于时区的对象。这些可以用于更简单的活动。,它们都有类似的构造函数，以下有两种形式来创建简单的时间和日期：,所有 Temporal 对象都可以返回特定的日期/时间值。例如，使用ZonedDateTime：,其他有用的属性包括：,所有 Temporal 对象都可以使用 compare() 返回整数的函数进行比较。例如，比较两个ZonedDateTime对象：,这个比较结果会有三种情况：,compare() 的结果可以用于数组的 sort() 方法来对时间按照升序进行排列（从早到晚）：,提案还提供了几种方法来对任何 Temporal 对象执行日期计算。当传递一个Temporal.Duration对象时，它们都会返回一个相同类型的新的 Temporal，该对象使用years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds 和 nanoseconds 字段来设置时间。,until() 和 since() 方法会返回一个对象，该 Temporal.Duration 对象描述基于当前日期/时间的特定日期和时间之前或之后的时间，例如：,equals() 方法用来确定两个日期/时间值是否相同：,虽然这不是 Temporal API 的一部分，但 JavaScript Intl（国际化）API提供了一个 DateTimeFormat() 构造函数，可以用于格式化 Temporal 或 Date 对象：,目前还没有浏览器支持 Temporal API：,,Temporal 提案：https://tc39.es/proposal-temporal/。,在 JavaScript 中进行日期/时间操作是一个很麻烦的事，JS的生态中有很多实用的日期操作库，最后就来分享几个实用的日期库。,Moment.js 是一个轻量级 JavaScript 日期库，用于解析、验证、操作和格式化日期，是一个很受欢迎的日期操作库。,不过，Moment.js 是一个遗留项目，现在处于维护模式。维护者认为，无法重构 Moment.js 来满足现代 JavaScript 开发的需求，例如不变性和 tree shaking。Lighthouse（Chrome 的内置审核工具）警告不要使用 Moment，因为它的大小较大 (329 kb)。,可以通过以下任一方式来安装该库：,在 JavaScript 文件中，导入Moment.js库：,可以传递一个日期字符串或日期对象给moment()函数，然后返回一个Moment对象：,Moment.js 提供了丰富的日期格式化选项。可以使用format()方法将日期格式化为所需的字符串格式：,Moment.js提供了许多方便的方法来进行日期和时间的运算。下面是一些示例：,Moment.js还提供了许多其他常用的功能，如获取当前日期、解析日期字符串、计算日期之间的差异等。,Date-fns 是一个现代、轻量级的JavaScript日期处理库，用于在浏览器和Node.js环境中处理日期和时间。它的设计目标是提供一组简单、纯函数式的API来执行各种日期操作，而不依赖于全局对象。,以下是Date-fns 的特点：,可以使用npm或yarn等包管理工具来安装Date-fns。在项目目录下运行以下命令安装Date-fns：,在JavaScript文件中导入所需的Date-fns函数：,使用导入的函数来执行各种日期操作。以下是一些示例：,在上述示例中，使用了format()函数将日期格式化为指定的字符串格式，使用了parseISO()函数解析日期字符串为日期对象，以及使用了differenceInDays()函数计算两个日期之间的天数差异。,Day.js 是一个轻量级的JavaScript日期处理库，用于解析、操作和格式化日期对象。它的设计目标是提供一个简单、灵活的API，使得处理日期和时间变得更加方便。,以下是 Day.js 的特点：,可以使用npm或yarn等包管理工具来安装Day.js。在项目目录下运行以下命令安装Day.js：,在JavaScript文件中导入Day.js：,使用Day.js的函数来进行日期操作。以下是一些示例：,在上述示例中，使用了format()函数将日期格式化为指定的字符串格式，使用了dayjs()函数解析日期字符串为日期对象，以及使用了diff()函数计算两个日期之间的天数差异。,Luxon 是一个用于处理日期、时间和时区的先进 JavaScript 库。它提供了一组强大的功能，可以帮助你在浏览器和 Node.js 环境中轻松处理日期和时间。,以下是 Luxon 的特点：,使用 npm 或 yarn 等包管理工具，在项目目录下运行以下命令安装 Luxon：,在 JavaScript 文件中导入 Luxon：,使用 Luxon 的函数来处理日期和时间。以下是一些示例：,在上述示例中，使用了 toFormat() 函数将日期格式化为指定的字符串格式，使用了 fromISO() 函数解析 ISO 8601 格式的日期字符串为日期对象，以及使用了 diff() 函数计算两个日期之间的天数差异。