您需要了解的有关JavaScript日期的所有信息

JavaScript 的 Date 对象常常令人困惑，以至于我们一需要处理日期和时间就求助于库（如 Date-fns 和 Moment）。

但我们并不总是需要库。如果您知道需要注意什么，Date 实际上可以非常简单。在本文中，我将引导您了解 Date 对象的所有知识。

首先，让我们承认时区的存在。

时区

世界上有数百个时区。在 JavaScript 中，我们只关心两个——本地时间和协调世界时 (UTC)。

• 本地时间 指的是您计算机所在的时区。
• UTC 在实践中与格林威治标准时间 (GMT) 同义。

默认情况下，JavaScript 中几乎所有日期方法（除一种外）都提供本地时间的日期/时间。只有在指定 UTC 时，您才能获得 UTC。

有了这些，我们可以讨论创建日期。

创建日期

您可以使用 new Date() 创建日期。使用 new Date() 有四种可能的方法：

1. 使用日期字符串
2. 使用日期参数
3. 使用时间戳
4. 不带参数

日期字符串方法

在日期字符串方法中，您可以通过将日期字符串传递到 new Date 来创建日期。

new Date('1988-03-21')

我们在编写日期时倾向于使用日期字符串方法。这是很自然的，因为我们一生都在使用日期字符串。

如果我写 21-03-1988，您不会有任何问题推断出它是 1988 年 3 月 21 日。对吧？但是如果您在 JavaScript 中写 21-03-1988，则会得到 Invalid Date。

这有一个很好的理由。

我们在世界不同地区对日期字符串的解释不同。例如，11-06-2019 可能是 2019 年 6 月 11 日或 2019 年 11 月 6 日。但您无法确定我指的是哪一个，除非您知道我使用的日期系统。

在 JavaScript 中，如果您想使用日期字符串，则需要使用全世界都接受的格式。这些格式之一是 ISO 8601 扩展格式。

<code>// ISO 8601 扩展格式
`YYYY-MM-DDTHH:mm:ss.sssZ`</code>

以下是值的含义：

• YYYY：4 位数年份
• MM：2 位数月份（1 月为 01，12 月为 12）
• DD：2 位数日期（0 到 31）
• -：日期分隔符
• T：指示时间的开始
• HH：24 位数小时（0 到 23）
• mm：分钟（0 到 59）
• ss：秒（0 到 59）
• sss：毫秒（0 到 999）
• :: 时间分隔符
• Z：如果存在 Z，则日期将设置为 UTC。如果不存在 Z，则为本地时间。（这仅适用于提供时间的情况。）

如果您要创建日期，则小时、分钟、秒和毫秒是可选的。因此，如果您想为 2019 年 6 月 11 日创建日期，您可以这样写：

new Date('2019-06-11')

请特别注意此处。使用日期字符串创建日期存在一个很大的问题。如果您将此日期 console.log，则可以发现问题。

如果您居住在落后于 GMT 的地区，您将获得显示为 6 月 10 日的日期。

如果您居住在领先于 GMT 的地区，您将获得显示为 6 月 11 日的日期。

发生这种情况是因为日期字符串方法具有特殊行为：如果您创建日期（不指定时间），则会获得设置为 UTC 的日期。

在上述情况下，当您编写 new Date('2019-06-11') 时，您实际上创建的日期是 2019 年 6 月 11 日，UTC 凌晨 12 点。这就是为什么居住在落后于 GMT 的地区的人们会得到 6 月 10 日而不是 6 月 11 日的原因。

如果您想使用日期字符串方法在本地时间创建日期，则需要包含时间。包含时间时，您至少需要编写 HH 和 mm（否则 Google Chrome 会返回无效日期）。

new Date('2019-06-11T00:00')

使用日期字符串的整个本地时间与 UTC 问题可能是难以捕捉的错误来源。因此，我建议您不要使用日期字符串创建日期。

（顺便说一句，MDN 警告不要使用日期字符串方法，因为浏览器可能会以不同的方式解析日期字符串）。

如果您想创建日期，请使用参数或时间戳。

使用参数创建日期

您可以传入最多七个参数来创建日期/时间。

1. 年份：4 位数年份。
2. 月份：月份（0-11）。月份是从零开始的。如果省略，则默认为 0。
3. 日期：月份中的日期（1-31）。如果省略，则默认为 1。
4. 小时：一天中的小时（0-23）。如果省略，则默认为 0。
5. 分钟：分钟（0-59）。如果省略，则默认为 0。
6. 秒：秒（0-59）。如果省略，则默认为 0。
7. 毫秒：毫秒（0-999）。如果省略，则默认为 0。

// 2019 年 6 月 11 日，上午 5:23:59，本地时间
new Date(2019, 5, 11, 5, 23, 59)

许多开发人员（包括我自己）避免使用参数方法，因为它看起来很复杂。但实际上它很简单。

尝试从左到右读取数字。从左到右，您以递减的幅度插入值：年、月、日、小时、分钟、秒和毫秒。

new Date(2017, 3, 22, 5, 23, 50)

// 如果您遵循从左到右的公式，则可以轻松读取此日期。
// 年份：2017，
// 月份：四月（因为月份是从零开始的）
// 日期：22
// 小时：05
// 分钟：23
// 秒：50

Date 最成问题的部分是月份值是从零开始的，即 1 月 === 0，2 月 === 1，3 月 === 2，依此类推。

JavaScript 是从零开始的有点奇怪（显然是因为 Java 就是这样做的），但与其争论为什么 1 月应该是 1（而不是 0），不如接受 JavaScript 中月份是从零开始的。一旦您接受了这个事实，日期就变得更容易处理了。

以下是一些供您熟悉的更多示例：

// 1988 年 3 月 21 日，凌晨 12 点，本地时间。
new Date(1988, 2, 21)

// 2019 年 12 月 25 日，上午 8 点，本地时间。
new Date(2019, 11, 25, 8)

// 2023 年 11 月 6 日，凌晨 2:20，本地时间
new Date(2023, 10, 6, 2, 20)

// 2019 年 6 月 11 日，上午 5:23:59，本地时间
new Date(2019, 5, 11, 5, 23, 59)

注意使用参数创建的日期都是本地时间？

这是使用参数的额外好处之一——您不会混淆本地时间和 UTC。如果您需要 UTC，您可以通过这种方式在 UTC 中创建日期：

// 2019 年 6 月 11 日，凌晨 12 点，UTC。
new Date(Date.UTC(2019, 5, 11))

使用时间戳创建日期

在 JavaScript 中，时间戳是从 1970 年 1 月 1 日起经过的毫秒数（1970 年 1 月 1 日也称为 Unix 纪元时间）。根据我的经验，您很少使用时间戳来创建日期。您只使用时间戳来比较不同的日期（稍后将详细介绍）。

// 2019 年 6 月 11 日，上午 8 点（在我的本地时间，新加坡）
new Date(1560211200000)

不带参数

如果您不带任何参数创建日期，则会获得设置为当前时间（本地时间）的日期。

new Date()

您可以从图像中看出，当我撰写本文时，新加坡时间是 2019 年 5 月 25 日上午 11:10。

创建日期的总结

1. 您可以使用 new Date() 创建日期。
2. 有四种可能的语法：
   1. 使用日期字符串
   2. 使用参数
   3. 使用时间戳
   4. 不带参数
3. 绝不要 使用日期字符串方法创建日期。
4. 最好使用参数方法创建日期。
5. 请记住（并接受）JavaScript 中月份是从零开始的。

接下来，让我们谈谈将日期转换为可读字符串。

格式化日期

大多数编程语言都提供格式化工具来创建任何您想要的日期格式。例如，在 PHP 中，您可以将 date("d M Y") 写成类似 23 Jan 2019 的日期。

但在 JavaScript 中没有简单的方法来格式化日期。

本机 Date 对象带有七种格式化方法。这七种方法中的每一种都为您提供一个特定值（而且它们非常无用）。

const date = new Date(2019, 0, 23, 17, 23, 42)

1. toString 为您提供 Wed Jan 23 2019 17:23:42 GMT 0800 (Singapore Standard Time)
2. toDateString 为您提供 Wed Jan 23 2019
3. toLocaleString 为您提供 23/01/2019, 17:23:42
4. toLocaleDateString 为您提供 23/01/2019
5. toGMTString 为您提供 Wed, 23 Jan 2019 09:23:42 GMT
6. toUTCString 为您提供 Wed, 23 Jan 2019 09:23:42 GMT
7. toISOString 为您提供 2019-01-23T09:23:42.079Z

如果您需要自定义格式，则需要自己创建。

编写自定义日期格式

假设您想要类似 Thu, 23 January 2019 的内容。要创建此值，您需要了解（并使用）Date 对象附带的日期方法。

要获取日期，您可以使用这四种方法：

1. getFullYear：根据本地时间获取 4 位数年份
2. getMonth：根据本地时间获取月份（0-11）。月份是从零开始的。
3. getDate：根据本地时间获取月份中的日期（1-31）。
4. getDay：根据本地时间获取星期几（0-6）。星期几从星期日（0）开始，到星期六（6）结束。

为 Thu, 23 January 2019 创建 23 和 2019 很简单。我们可以使用 getFullYear 和 getDate 来获取它们。

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23

获取 Thu 和 January 比较困难。

要获取 January，您需要创建一个对象，将所有十二个月的值映射到它们各自的名称。

const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}

由于月份是从零开始的，我们可以使用数组而不是对象。它会产生相同的结果。

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

要获取 January，您需要：

1. 使用 getMonth 从日期中获取从零开始的月份。
2. 从 months 中获取月份名称

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // January

简写版本：

const monthName = months[d.getMonth()]
console.log(monthName) // January

您对 Thu 也执行相同的操作。这次，您需要一个包含一周七天的数组。

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

然后你：

1. 使用 getDay 获取 dayIndex
2. 使用 dayIndex 获取 dayName

const dayIndex = d.getDay()
const dayName = days[dayIndex] // Thu

简写版本：

const dayName = days[d.getDay()] // Thu

然后，您将创建的所有变量组合起来以获取格式化的字符串。

const formatted = `${dayName}, ${date} ${monthName} ${year}`
console.log(formatted) // Thu, 23 January 2019

是的，这很繁琐。但是一旦掌握了窍门，它就不可能了。

如果您需要创建自定义格式的时间，可以使用以下方法：

1. getHours：根据本地时间获取小时（0-23）。
2. getMinutes：根据本地时间获取分钟（0-59）。
3. getSeconds：根据本地时间获取秒（0-59）。
4. getMilliseconds：根据本地时间获取毫秒（0-999）。

接下来，让我们谈谈比较日期。

比较日期

如果您想知道一个日期是否早于或晚于另一个日期，您可以直接使用 >、= 和

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier 
<p>如果您想检查两个日期是否恰好落在同一时间，则比较起来更困难。您不能使用 == 或 === 比较它们。</p>
<pre class="brush:php;toolbar:false">const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

要检查两个日期是否恰好落在同一时间，您可以使用 getTime 检查它们的时间戳。

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

如果您想检查两个日期是否在同一天，您可以检查它们的 getFullYear、getMonth 和 getDate 值。

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate() === b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 2019 年 1 月 26 日，上午 10 点
const b = new Date(2019, 0, 26, 12) // 2019 年 1 月 26 日，中午 12 点
console.log(isSameDay(a, b)) // true

还有一件事我们必须介绍。

从另一个日期获取日期

有两种可能的情况，您需要从另一个日期获取日期。

1. 从另一个日期设置特定的日期/时间值。
2. 从另一个日期添加/减去增量。

设置特定的日期/时间

您可以使用这些方法从另一个日期设置日期/时间：

1. setFullYear：在本地时间设置 4 位数年份。
2. setMonth：在本地时间设置月份。
3. setDate：在本地时间设置月份中的日期。
4. setHours：在本地时间设置小时。
5. setMinutes：在本地时间设置分钟。
6. setSeconds：在本地时间设置秒。
7. setMilliseconds：在本地时间设置毫秒。

例如，如果您想将日期设置为该月的第 15 天，可以使用 setDate(15)。

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 2019 年 1 月 15 日

如果您想将月份设置为 6 月，可以使用 setMonth。（记住，JavaScript 中的月份是从零开始的！）

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 2019 年 6 月 10 日

注意：上述设置方法会更改原始日期对象。在实践中，我们不应更改对象（此处详细说明原因）。我们应该在新的日期对象上执行这些操作。

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 2019 年 1 月 10 日
console.log(newDate) // 2019 年 6 月 10 日

从另一个日期添加/减去增量

增量是变化。从另一个日期添加/减去增量是指：您想从另一个日期获取一个距离为 X 的日期。它可以是 X 年、X 月、X 天等。

要获取增量，您需要知道当前日期的值。您可以使用以下方法获取它：

1. getFullYear：根据本地时间获取 4 位数年份
2. getMonth：根据本地时间获取月份（0-11）。
3. getDate：根据本地时间获取月份中的日期（1-31）。
4. getHours：根据本地时间获取小时（0-23）。
5. getMinutes：根据本地时间获取分钟（0-59）。
6. getSeconds：根据本地时间获取秒（0-59）。
7. getMilliseconds：根据本地时间获取毫秒（0-999）。

添加/减去增量有两种常用方法。第一种方法在 Stack Overflow 上更流行。它简洁明了，但难以理解。第二种方法比较冗长，但更容易理解。

让我们介绍这两种方法。

假设您想从今天开始获取三天后的日期。在此示例中，我们还假设今天是 2019 年 3 月 28 日。（当我们使用固定日期时，更容易解释）。

第一种方法（设置方法）

// 假设今天是 2019 年 3 月 28 日 const today = new Date(2019, 2, 28)

首先，我们创建一个新的 Date 对象（这样我们就不会更改原始日期）

const finalDate = new Date(today)

接下来，我们需要知道我们要更改的值。由于我们正在更改日期，我们可以使用 getDate 获取日期。

const currentDate = today.getDate()

我们想要一个比今天晚三天的日期。我们将使用将增量 (3) 添加到当前日期。

finalDate.setDate(currentDate   3)

设置方法的完整代码：

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate()   3)

console.log(finalDate) // 2019 年 3 月 31 日

第二种方法（新的 Date 方法）

在这里，我们使用 getFullYear、getMonth、getDate 和其他 getter 方法，直到我们找到要更改的值的类型。然后，我们使用 new Date 创建最终日期。

const today = new Date(2019, 2, 28)

// 获取所需的值
const year = today.getFullYear()
const month = today.getMonth()
const day = today.getDate()

// 创建一个新的 Date（带有增量）
const finalDate = new Date(year, month, day   3)

console.log(finalDate) // 2019 年 3 月 31 日

这两种方法都有效。选择一种并坚持使用它。

自动日期校正

如果您为 Date 提供超出其可接受范围的值，JavaScript 会自动为您重新计算日期。

以下是一个示例。假设我们将日期设置为 2019 年 3 月 33 日。（日历上没有 3 月 33 日）。在这种情况下，JavaScript 会自动将 3 月 33 日调整为 4 月 2 日。

// 3 月 33 日 => 4 月 2 日
new Date(2019, 2, 33)

这意味着在创建增量时，您无需担心计算分钟、小时、日期、月份等。JavaScript 会自动为您处理。

// 3 月 33 日 => 4 月 2 日
new Date(2019, 2, 30   3)

这就是您需要了解的关于 JavaScript 本机 Date 对象的所有内容。

关于 JavaScript 中 Date 的更多信息

• 了解 JavaScript 中的日期和时间 (DigitalOcean)
• 探索 JavaScript Date 对象 (Alligator.io)

有兴趣学习更多 JavaScript 吗？

如果您觉得此 Date 简介有用，您可能会喜欢 Learn JavaScript，这是我创建的一个课程，旨在教人们他们需要了解的关于 JavaScript 的所有知识。

在本课程中，我将介绍您需要了解的基本概念，然后向您展示如何使用您学到的概念来构建现实世界的组件。

看看。您可能会发现它很有用。

同时，如果您有任何 JavaScript 问题，请随时与我联系。我会尽力创建免费文章来回答您的问题。

以上是您需要了解的有关JavaScript日期的所有信息的详细内容。更多信息请关注PHP中文网其他相关文章！