React中日期格式化：如何正确显示“今天”和“昨天”

本教程将指导您如何在react项目中正确地格式化并显示“今天”和“昨天”的日期，例如“6 june”和“5 june”。我们将重点讲解javascript `date`对象的创建、修改和`tolocaledatestring`方法的使用，并解决在使用该方法时可能遇到的常见`typeerror`，确保日期显示准确无误。

在现代Web应用开发中，尤其是在React这类前端框架中，日期和时间的显示是常见的需求。正确地格式化日期，使其符合用户界面和地域习惯，是提升用户体验的关键。本文将详细介绍如何利用JavaScript内置的Date对象和toLocaleDateString方法，在React项目中实现“今天”和“昨天”的自定义格式显示，并提供实用的代码示例和错误排查建议。

理解JavaScript Date对象和toLocaleDateString方法

JavaScript的Date对象是处理日期和时间的核心。通过new Date()可以创建一个表示当前日期和时间的Date实例。

toLocaleDateString()方法是Date对象的一个强大功能，它允许我们将日期格式化为符合特定语言环境（locales）和格式选项（options）的字符串。其基本语法如下：

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

• locales：一个字符串或字符串数组，表示用于格式化的语言环境。例如，'en-GB' 表示英式英语，'zh-CN' 表示简体中文。
• options：一个对象，用于自定义输出格式，例如是否显示年份、月份、日期，以及它们的显示方式（数字、短名称、长名称等）。

例如，要显示“6 June”这样的格式，我们可以使用以下options配置：

const options = { month: 'long', day: 'numeric' };

这里，month: 'long' 表示月份将以完整名称显示（如 "June"），day: 'numeric' 表示日期将以数字形式显示（如 "6"）。

获取并格式化“今天”的日期

获取并格式化今天的日期相对简单，只需创建当前Date对象，然后直接应用toLocaleDateString方法即可。

// file.js
const date = new Date(); // 创建当前日期对象
const options = { month: 'long', day: 'numeric' }; // 定义格式化选项

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

export { today };

在React组件中，你可以这样显示“今天”：

// YourComponent.js
import React from 'react';
import { today } from './file'; // 假设file.js在同级目录

function YourComponent() {
  return (
    <div>
      <p>Today: { today }</p>
    </div>
  );
}

export default YourComponent;

这将正确显示例如 Today: 6 June。

计算并格式化“昨天”的日期：避免常见陷阱

计算“昨天”的日期需要对Date对象进行操作，并在此过程中注意一个常见的陷阱，即TypeError。

1. 计算“昨天”

为了获取“昨天”的日期，我们首先需要创建一个新的Date对象，它基于当前的日期。重要的是，我们不应该直接修改原始的date变量，因为它可能在其他地方被使用，或者为了清晰性考虑，我们应该创建一个副本。

天工

昆仑万维推出的通用AI智能体平台，原天工AI

212

查看详情

let yesterday = new Date(date); // 创建当前日期的副本
yesterday.setDate(yesterday.getDate() - 1); // 将日期减去一天

setDate()方法会直接修改Date对象实例的日期部分。通过减去1，我们将日期设置为前一天。

2. 错误分析与解决

在处理“昨天”的日期时，一个常见的错误是遇到 Uncaught TypeError: yesterday.toLocaleDateString is not a function。这个错误通常发生在以下情况：

• yesterday变量在调用toLocaleDateString之前，被重新赋值为一个非Date类型的变量，例如一个字符串。
• 最常见的场景是，开发者可能无意中将yesterday对象转换为字符串，例如通过调用yesterday.toDateString()，然后尝试对这个字符串调用toLocaleDateString，从而引发TypeError。

正确的做法是，在调用toLocaleDateString之前，始终确保yesterday变量仍然是一个Date对象。

3. 正确格式化“昨天”

结合上述步骤，正确格式化“昨天”的代码如下：

// file.js
const date = new Date();
const options = { month: 'long', day: 'numeric' };

let today = date.toLocaleDateString('en-GB', options);

let yesterday = new Date(date); // 创建当前日期的副本
yesterday.setDate(yesterday.getDate() - 1); // 将日期减去一天
yesterday = yesterday.toLocaleDateString('en-GB', options); // 格式化“昨天”的日期

export { today, yesterday };

这样，yesterday在调用toLocaleDateString时仍然是一个Date对象，之后才会被格式化为字符串。

在React组件中显示：

// YourComponent.js
import React from 'react';
import { today, yesterday } from './file';

function YourComponent() {
  return (
    <div>
      <p>Today: { today }</p>
      <p>Yesterday: { yesterday }</p> {/* 现在可以正确显示“昨天” */}
    </div>
  );
}

export default YourComponent;

这将正确显示例如 Today: 6 June 和 Yesterday: 5 June。

重要提示与最佳实践

1. Date对象的变异性： JavaScript的Date对象是可变的。setDate()、setMonth()等方法会直接修改调用它们的Date实例。因此，在需要保留原始日期或进行链式操作时，务必通过new Date(originalDate)创建一个副本，以避免意外的副作用。
2. 语言环境（locales）的选择： toLocaleDateString方法的第一个参数locales非常重要。'en-GB'表示英式英语的日期格式，通常是日/月/年。如果你需要其他格式，例如美式英语（月/日/年），可以使用'en-US'。对于中文，可以使用'zh-CN'。根据你的目标用户群体选择合适的语言环境。
3. 错误排查： 当遇到TypeError，尤其是提示某个方法不是一个函数时，第一时间应该检查变量的类型。使用console.log(typeof variable)可以快速确认变量是否是预期的类型（例如'object'对于Date对象）。
4. 时区考量： new Date()默认创建的是基于本地时区的日期。如果你的应用需要处理跨时区的日期显示，或者需要精确控制UTC时间，可能需要更复杂的日期库（如Moment.js、date-fns）或深入了解Intl.DateTimeFormat的高级用法。对于简单的“今天”和“昨天”显示，通常本地时区已足够。

总结

通过本文的指导，您应该已经掌握了在React项目中，利用JavaScript的Date对象和toLocaleDateString方法，正确且优雅地显示“今天”和“昨天”日期的技巧。关键在于理解Date对象的创建、如何安全地修改日期（通过创建副本），以及如何避免因变量类型转换不当而导致的TypeError。遵循这些最佳实践，将有助于您构建出功能更健壮、用户体验更佳的日期显示功能。

以上就是React中日期格式化：如何正确显示“今天”和“昨天”的详细内容，更多请关注php中文网其它相关文章！