如何在 JavaScript 中输出当前日期：从入门到实战的完整指南

2026-02-13 23:59:57 0条评论 2次阅读 0人点赞

在 Web 开发的日常工作中，处理日期和时间是一项几乎无法避免的任务。无论是为了记录用户注册时间、生成日志文件的时间戳，还是仅仅在页面上显示当前日期，我们都需要准确、高效地获取并格式化当前日期。

JavaScript 为我们提供了一个内置的 Date 对象，它虽然功能强大，但对于初学者来说，有时也会让人感到困惑。不同的方法返回的格式千差万别，时区的处理更是容易出错的坑。

在本文中，我们将深入探讨如何在 JavaScript 中获取并打印当前日期。我们将从最基础的用法开始，逐步介绍各种格式化技巧，并分享一些在实战中非常有用的最佳实践和注意事项。准备好让你的代码更加“守时”了吗？让我们开始吧。

目录

  • 基础回顾：理解 JavaScript 的 Date 对象
  • 方法一：使用原生 Date 对象自定义格式输出
  • 方法二：结合 toString() 方法进行字符串处理
  • 方法三：使用 toDateString() 获取易读的日期字符串
  • 方法四：使用 toLocaleDateString() 本地化日期显示
  • 方法五：使用 toISOString() 输出标准 ISO 格式
  • 实战技巧与最佳实践
  • 常见问题与解决方案

基础回顾：理解 JavaScript 的 Date 对象

在深入具体的打印方法之前，我们需要先了解 INLINECODEc82b4edf 对象的基本原理。INLINECODE20b05256 对象是 JavaScript 语言中内置的一个对象构造函数，它基于自 1970 年 1 月 1 日 00:00:00 UTC（世界协调时）以来的毫秒数来存储和处理时间。这意味着，无论你在世界的哪个角落，底层的时间戳都是统一的。

如何创建 Date 对象

我们可以通过使用 INLINECODEa6d8c9d7 关键字来实例化一个 INLINECODE461cf37e 对象。当我们不传递任何参数时，它会自动创建一个代表当前日期和时间的对象：

// 实例化当前时间
const now = new Date();

// 此时变量 now 中包含了完整的日期和时间信息
console.log(now); 
// 输出类似：2024-01-23T09:17:49.000Z

这个对象包含了大量的方法，用于获取和设置日期的各个部分（年、月、日、时、分、秒等）。在接下来的章节中，我们将重点探讨如何将这个复杂的对象转换为我们想要的日期字符串格式。

方法一：使用原生 Date 对象自定义格式输出

最灵活的方式莫过于使用 INLINECODEaabbbced 对象提供的 INLINECODE894dd06f 方法（如 INLINECODE6f9d3301, INLINECODE4fd8e296, INLINECODEcd3038d4）来手动拼接日期字符串。这种方法允许你完全掌控输出的格式，无论是 INLINECODE0e74b2df 还是 DD/MM/YYYY。

示例：构建自定义日期格式

下面的代码演示了如何获取当前日期，并将其格式化为“日/月/年”的形式。请注意，JavaScript 中的月份是从 0 开始计数的（0 代表一月），所以我们需要在获取月份后加 1，这是一个非常容易忽略的细节。

// 创建一个新的 Date 对象，获取当前时间
const currentDate = new Date();

// 获取具体的日期部分
const day = currentDate.getDate(); 
// 获取月份（0-11），所以要加 1
const month = currentDate.getMonth() + 1; 
const year = currentDate.getFullYear(); 

// 使用模板字符串拼接日期
// 这种写法简洁且易于阅读
const formattedDate = `${day}/${month}/${year}`;

// 在控制台记录当前日期
console.log(formattedDate);

输出：

23/1/2024

进阶技巧：自动补零

你可能会注意到，上面的例子中，如果月份或日期小于 10，只会显示一个数字（例如 INLINECODEd7edb896 而不是 INLINECODEb2b8e882）。在实际生产环境中，为了保持版面整齐，我们通常希望进行“补零”操作。我们可以编写一个辅助函数来实现这一点：

const currentDate = new Date();

// 定义一个辅助函数，用于将个位数字转换为双位数（例如 ‘1‘ -> ‘01‘）
const padZero = (num) => {
  return num < 10 ? `0${num}` : num;
};

const day = padZero(currentDate.getDate());
const month = padZero(currentDate.getMonth() + 1);
const year = currentDate.getFullYear();

console.log(`${year}-${month}-${day}`);

输出：

2024-01-23

这种方法虽然代码量稍多，但它提供了极高的可读性和可控性，非常适合需要特定格式要求的场景。

方法二：结合 toString() 方法进行字符串处理

除了手动提取日期部分，我们还可以利用 toString() 方法将日期对象转换为一个通用的字符串格式，然后通过字符串操作来提取我们需要的信息。

为什么使用 toString()？

toString() 方法返回的是一个人类可读的字符串，其中包含了星期几、月份、日期、年份和具体的时间。如果我们只关心日期部分，可以先将字符串按空格拆分，再选取我们需要的部分。

示例：截取特定部分的日期

下面的代码演示了如何使用 INLINECODE59ec99bb 和 INLINECODEa6dc7521 方法从完整的字符串中提取出“月 日 年”的部分。这是一种非常“黑客”的做法，虽然不那么正式，但在处理某些固定格式字符串时非常高效。

const currentDate = new Date();

// 首先让我们看看完整的字符串格式
const fullString = currentDate.toString();
console.log("原始字符串: ", fullString);
// 输出类似：Tue Jan 23 2024 09:17:49 GMT+0000 (Coordinated Universal Time)

// 1. 将字符串按空格拆分成数组
// 2. 使用 splice(1, 3) 截取从索引 1 开始的 3 个元素：[ ‘Jan‘, ‘23‘, ‘2024‘ ]
// 3. 使用 join(‘ ‘) 将它们合并回字符串
const result = fullString.split(‘ ‘).splice(1, 3).join(‘ ‘);

console.log("处理后的日期: ", result);

输出：

原始字符串:  Tue Jan 23 2024 09:17:49 GMT+0000 (Coordinated Universal Time)
处理后的日期:  Jan 23 2024

适用场景分析

这种方法在处理日志输出或快速生成简短报告时非常有用。它的优点是代码简短，不需要记忆复杂的格式化参数。但缺点也很明显：如果浏览器的 locale 设置不同，或者未来的 JavaScript 引擎改变了 toString() 的默认格式，这段代码可能会失效。因此，在对稳定性要求较高的生产环境中，建议谨慎使用。

方法三：使用 toDateString() 获取易读的日期字符串

如果你觉得 INLINECODEec6db4e0 返回的内容包含太多不需要的时间信息，那么 INLINECODE0459c783 一定是你的首选。它专门设计用来只返回“日期部分”，即“星期 月 日 年”的格式。

示例：纯粹的日期输出

这个方法非常直观，它自动过滤掉了时区、时分秒等杂乱的信息，只保留了你最关心的日期。这是生成人类可读日期的最简单方法之一。

const currentDate = new Date();

// toDateString() 直接返回格式为 ‘Tue Jan 23 2024‘ 的字符串
// 这是一个非常干净、符合人类阅读习惯的格式
console.log(currentDate.toDateString());

输出：

Tue Jan 23 2024

细节探讨

使用 toDateString() 的主要优点是兼容性极好且语义清晰。当你不需要关心具体时间，只想记录“这件事发生在哪一天”时，这是最标准的做法。不过，请注意它的格式是固定的（美式英语格式），如果你需要将其显示为“23日 1月 2024年”这样的格式，你还需要结合其他方法进行处理。

方法四：使用 toLocaleDateString() 本地化日期显示

在当今全球化的网络环境中，应用程序的用户可能遍布世界各地。对于中国的用户，你可能希望显示“2024年1月23日”；而对于美国的用户，你可能希望显示“1/23/2024”。手动处理这些转换是一场噩梦，幸好 toLocaleDateString() 为我们提供了完美的解决方案。

什么是 Locale？

Locale（语言环境）是一组参数，用来定义用户的语言、地区和特殊的偏好设置。通过传递不同的 locale 字符串（如 INLINECODE57cd0fd8、INLINECODE1955dbf2），JavaScript 可以自动根据当地习惯来格式化日期。

示例 1：英式日期格式 (en-GB)

英式日期格式通常遵循“日/月/年”的顺序。我们可以使用 toLocaleDateString 来轻松实现这一点。

const currentDate = new Date();

// 指定 locale 为 ‘en-GB‘ (英国)
// 并通过 options 对象精确控制数字和日期的格式
const gbDate = currentDate.toLocaleDateString("en-GB", {
  year: "numeric", // 显示完整的 4 位年份
  month: "numeric", // 月份使用数字 (1-12)
  day: "numeric"    // 日期使用数字 (1-31)
});

console.log("英式格式:", gbDate);

输出：

英式格式: 23/01/2024

示例 2：印式/美式短日期格式 (en-IN)

我们也可以使用美式或印式的 locale，它们通常支持不同的缩写风格。下面的例子展示了如何使用月份的短名称（如 Jan）来显示日期。

const currentDate = new Date();

// 指定 locale 为 ‘en-IN‘ (印度)
// 这里的设置让月份显示为短文本（如 Jan）
const inDate = currentDate.toLocaleDateString("en-IN", {
  year: "numeric",
  month: "short",   // 月份显示为短文本
  day: "numeric"
});

console.log("短月格式:", inDate);

输出：

短月格式: 23 Jan 2024

深入理解 options 参数

INLINECODEd1f397dd 的强大之处在于第二个 INLINECODE6003b280 参数。除了上面演示的，我们还可以这样配置：

  • weekday: ‘long‘: 显示完整的星期几名称。
  • era: ‘short‘: 显示纪元（如 AD 或 BC）。
const options = {
  weekday: ‘long‘,
  year: ‘numeric‘,
  month: ‘long‘,
  day: ‘numeric‘
};
console.log(currentDate.toLocaleDateString(‘zh-CN‘, options));
// 输出：2024年1月23日星期二

这种方法是最推荐的前端展示日期的方法，因为它能够自动适应用户的浏览器设置，提供最佳的用户体验。

方法五：使用 toISOString() 输出标准 ISO 格式

当我们需要与后端 API 进行数据交换，或者在数据库中存储时间戳时，使用统一的国际标准至关重要。toISOString() 方法返回的是符合 ISO 8601 标准的字符串格式。

ISO 8601 格式详解

标准格式通常看起来像这样：2024-01-23T09:17:49.000Z。这种格式的好处是它与时区无关（总是以 UTC 时间表示），并且按字符串排序时也是按时间排序的。

示例：仅保留日期部分

默认情况下，INLINECODEa9be02b7 包含了时间和毫秒。如果我们只想要 INLINECODE41d33a01 格式，我们可以利用字符串的 split 方法来截取。

// toISOString() 返回的是 UTC 时间，可能与你本地时间不同
const isoString = new Date().toISOString();

console.log("完整 ISO 字符串:", isoString);

// 按 ‘T‘ 分割字符串，取第一部分（日期部分）
const dateOnly = isoString.split("T")[0];

console.log("仅日期部分:", dateOnly);

输出：

完整 ISO 字符串: 2024-01-23T09:17:49.000Z
仅日期部分: 2024-01-23

特别注意：UTC 与本地时间

这里有一个常见的陷阱！ INLINECODE0cc71b68 返回的是 UTC 时间，而不是你电脑上的本地时间。如果你身在北京（UTC+8），在晚上 8 点运行代码，INLINECODE75bd1c1f 返回的时间可能是中午 12 点。如果你的应用对日期的准确性要求极高（例如记录当天的交易），直接使用这个结果可能会导致日期少算了一天。

实战技巧与最佳实践

现在我们已经掌握了各种获取日期的方法，那么在真实的项目开发中，我们应该如何选择呢？

1. 性能优化：避免重复创建对象

如果你在同一个函数或循环中多次需要使用当前日期，请务必只创建一次 Date 对象，然后将其赋值给一个变量。创建对象是有性能开销的，而且如果在极端情况下（例如跨年那一毫秒），多次创建可能会导致日期不一致。

// 不推荐的做法：创建了3次对象
console.log(new Date().getFullYear());
console.log(new Date().getMonth());
console.log(new Date().getDate());

// 推荐的做法：复用同一个对象
const now = new Date();
console.log(now.getFullYear());
console.log(now.getMonth());
console.log(now.getDate());

2. 何时使用哪种方法？

  • API 通信 / 数据库存储：始终使用 toISOString() 或时间戳。这是唯一能保证跨时区一致性的方法。
  • 前端界面显示：优先使用 toLocaleDateString()。它能自动适应不同地区用户的习惯，显得更专业。
  • 简单的日志输出：toDateString() 或者模板字符串拼接既简单又直观。

3. 代码可读性

当使用模板字符串（方法一）自定义格式时，请务必使用有意义的变量名（如 INLINECODEd088f3f6 而不是 INLINECODE30cff148）。虽然现代 JavaScript 引擎运行速度很快，但代码主要是写给人类看的。清晰的代码结构能减少后续维护的困难。

常见问题与解决方案

问题：为什么我的月份总是少 1？

这是新手最常问的问题。在 JavaScript INLINECODE1ae7807f 对象中，INLINECODE4356d2d2 返回的值是 0（一月）到 11（十二月）之间的整数。这与其他编程语言（通常是 1-12）不同。

解决方案：永远记得在使用 getMonth() 时加上 1，或者在进行日期计算时直接使用 0-11 的逻辑，只在最终显示给用户时转换。

问题：如何处理闰年和每个月的天数不同？

你不必手动去写复杂的逻辑来判断某一年是不是闰年。Date 对象本身就是处理这类问题的专家。如果你想获取当月的最后一天，可以这样做：

// 获取当前月份的下一个月第 0 天，即当前月的最后一天
const now = new Date();
const lastDayOfCurrentMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
console.log("本月最后一天:", lastDayOfCurrentMonth);

这种技巧利用了 JavaScript 的日期溢出机制，是一个非常实用的实战技巧。

总结

在 JavaScript 中处理日期并没有那么可怕，只要我们掌握了正确的方法。让我们回顾一下我们探索过的内容：

  • Date 对象是处理所有时间操作的核心。
  • 手动拼接提供了最大的灵活性，适合特定格式的输出，记得要注意月份从 0 开始计数。
  • toString() 和 split 提供了快速的字符串截取方式，但要注意其兼容性风险。
  • toDateString() 是获取干净日期字符串最简单、最安全的方法。
  • toLocaleDateString() 是国际化应用的利器，通过它可以轻松适配不同地区的用户。
  • toISOString() 是数据存储和交换的标准格式，但要注意其 UTC 时区特性。

最佳实践是在合适的场景下使用合适的工具。不要在所有地方都用同一种方法。试着在你的下一个项目中应用这些技巧，编写出既健壮又优雅的日期处理代码吧！

希望这篇指南对你有所帮助，如果你在编码过程中遇到任何问题，不妨多查阅相关文档，或者在控制台里多做几次实验。毕竟，实践出真知！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/46849.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年