JavaScript日期格式化：今天明天优雅显示技巧

想要在JavaScript中优雅地显示今日和昨日日期吗？本文将详细讲解如何利用`Date`对象和`toLocaleDateString`方法，在JavaScript和React项目中实现自定义日期格式化，例如将日期显示为“6 June”或“5 June”。我们将深入探讨`Date`对象的创建、修改以及国际化格式化选项的配置，并提供React组件中的实际应用示例。同时，本文还会强调日期处理中的常见注意事项，帮助你避免潜在的类型错误，确保日期显示的准确性和用户友好性。掌握这些技巧，让你的Web应用日期显示更加专业和易于理解！

本教程详细讲解如何在JavaScript和React项目中，利用`Date`对象和`toLocaleDateString`方法，以自定义格式（如“6 June”）准确获取并显示今日和昨日的日期。内容涵盖日期对象的创建、修改、国际化格式化选项的配置，以及在React组件中的实际应用，并强调了日期处理中的常见注意事项，助你避免潜在的类型错误。

在现代Web应用开发中，尤其是在使用React这样的前端框架时，经常需要处理和显示日期信息。本教程将指导你如何在JavaScript中准确地获取当前日期和前一天的日期，并将其格式化为用户友好的字符串，例如“6 June”和“5 June”，最后展示如何在React组件中高效地利用这些格式化后的日期。

1. JavaScript Date 对象基础

JavaScript的 Date 对象是处理日期和时间的核心。它提供了多种方法来创建、修改和格式化日期。

• 创建日期对象：

  • new Date()：创建一个表示当前日期和时间的 Date 对象。
  • new Date(dateString)：根据日期字符串创建。
  • new Date(year, monthIndex, day, ...)：根据指定参数创建。

• 修改日期：

  • setDate(day)：设置月份中的某一天。
  • setMonth(monthIndex)：设置月份（0-11）。
  • setFullYear(year)：设置年份。

• 获取日期：

  • getDate()：获取月份中的某一天 (1-31)。
  • getMonth()：获取月份 (0-11)。
  • getFullYear()：获取年份。

2. 格式化日期：toLocaleDateString()

toLocaleDateString() 方法是 Date 对象的一个强大功能，它能返回一个表示日期的字符串，该字符串的格式会根据指定的区域设置（locale）和格式化选项进行调整。

dateObj.toLocaleDateString([locales[, options]])

• locales：一个字符串或字符串数组，表示用于格式化的区域设置。例如 'en-GB' 表示英式英语，'zh-CN' 表示简体中文。
• options：一个对象，用于自定义输出格式。常见的选项包括：
  • year: 'numeric', '2-digit'
  • month: 'numeric', '2-digit', 'long', 'short', 'narrow'
  • day: 'numeric', '2-digit'
  • weekday: 'long', 'short', 'narrow'

3. 实现今日与昨日日期格式化

为了获取今日和昨日的日期并以“Day Month”的格式显示，我们需要以下步骤：

1. 获取当前日期对象。
2. 定义格式化选项。
3. 格式化今日日期。
4. 计算昨日日期（需要创建当前日期的副本以避免修改原始日期）。
5. 格式化昨日日期。

下面是具体的JavaScript代码实现：

// file.js
const date = new Date(); // 获取当前日期和时间
const options = { month: 'long', day: 'numeric' }; // 定义格式化选项：长月份名和数字日期

// 格式化今日日期
let today = date.toLocaleDateString('en-GB', options);

// 计算昨日日期
// 1. 创建当前日期的一个副本。
//    重要：直接修改 'date' 对象会影响 'today' 的计算，因此需要一个新对象。
let yesterdayDate = new Date(date);
// 2. 将副本的日期设置为前一天。
yesterdayDate.setDate(yesterdayDate.getDate() - 1);

// 格式化昨日日期
let yesterday = yesterdayDate.toLocaleDateString('en-GB', options);

// 导出这些格式化后的日期字符串，以便在其他模块中使用
export { today, yesterday };

在上述代码中，我们首先创建了一个 Date 对象 date 来表示当前时间。然后，定义了 options 对象来指定我们想要的“长月份名和数字日期”格式。

对于今日日期，我们直接调用 date.toLocaleDateString('en-GB', options) 进行格式化。

对于昨日日期，关键在于我们创建了一个 date 对象的副本 yesterdayDate (new Date(date))。这是因为 Date 对象是可变的，如果我们直接在 date 对象上调用 setDate()，它会改变 date 本身，从而影响 today 的计算。创建副本可以确保 date 保持不变，而 yesterdayDate 则被安全地修改为前一天。最后，我们对 yesterdayDate 进行格式化。

4. 在React组件中使用格式化日期

一旦 file.js 导出了 today 和 yesterday 变量，你就可以在任何React组件中导入并使用它们：

// YourReactComponent.jsx
import React from 'react';
import { today, yesterday } from './file'; // 导入格式化后的日期

function DateDisplay() {
  return (
    <div>
      <p>今日: { today }</p>
      <p>昨日: { yesterday }</p>
    </div>
  );
}

export default DateDisplay;

在这个React组件中，today 和 yesterday 已经是格式化好的字符串，可以直接在JSX中渲染。

5. 注意事项

• Date 对象的副本： 始终记住，Date 对象是可变的。当你需要基于一个现有日期对象计算另一个日期（如昨日、明日）时，请务必先创建一个副本 (new Date(originalDate))，然后再进行修改，以避免意外地改变原始日期对象。
• toLocaleDateString() 的返回值： toLocaleDateString() 方法返回的是一个字符串。一旦一个 Date 对象被转换为字符串，它就不再是一个 Date 对象，因此不能再调用 Date 对象特有的方法（如 setDate()、toLocaleDateString() 等）。原始问题中出现的 TypeError: yesterday.toLocaleDateString is not a function 很可能就是因为 yesterday 变量在某个时刻已经被重新赋值为字符串，然后又尝试在其上调用 toLocaleDateString。
• 区域设置 (Locale)： toLocaleDateString() 的第一个参数 locales 非常重要。'en-GB' 会产生“6 June”这样的格式，而 'en-US' 可能会产生“June 6”，'zh-CN' 则会产生“2023年6月6日”。根据你的目标用户群体选择合适的区域设置。
• 时间戳： 如果你只需要进行日期计算而不关心时区或具体格式，使用时间戳（Date.now() 或 dateObj.getTime()）进行加减运算会更简单和精确，最后再转换为 Date 对象进行格式化。

总结

通过本教程，你已经掌握了如何在JavaScript和React项目中，利用 Date 对象和 toLocaleDateString() 方法，灵活地获取并以自定义格式显示今日和昨日日期。关键在于理解 Date 对象的创建、修改以及 toLocaleDateString() 的用法，并特别注意 Date 对象的可变性以及 toLocaleDateString() 返回值是字符串这一特性，从而避免常见的类型错误。遵循这些最佳实践，可以确保你的日期显示功能既准确又健壮。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript日期格式化：今天明天优雅显示技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。