本教程将指导您如何在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 (
Today: { today }
);
}
export default YourComponent;这将正确显示例如 Today: 6 June。
计算并格式化“昨天”的日期：避免常见陷阱
计算“昨天”的日期需要对Date对象进行操作，并在此过程中注意一个常见的陷阱，即TypeError。
1. 计算“昨天”
为了获取“昨天”的日期，我们首先需要创建一个新的Date对象，它基于当前的日期。重要的是，我们不应该直接修改原始的date变量，因为它可能在其他地方被使用，或者为了清晰性考虑，我们应该创建一个副本。
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 (
Today: { today }
Yesterday: { yesterday }
{/* 现在可以正确显示“昨天” */}
);
}
export default YourComponent;这将正确显示例如 Today: 6 June 和 Yesterday: 5 June。
重要提示与最佳实践
- Date对象的变异性： JavaScript的Date对象是可变的。setDate()、setMonth()等方法会直接修改调用它们的Date实例。因此，在需要保留原始日期或进行链式操作时，务必通过new Date(originalDate)创建一个副本，以避免意外的副作用。
- 语言环境（locales）的选择： toLocaleDateString方法的第一个参数locales非常重要。'en-GB'表示英式英语的日期格式，通常是日/月/年。如果你需要其他格式，例如美式英语（月/日/年），可以使用'en-US'。对于中文，可以使用'zh-CN'。根据你的目标用户群体选择合适的语言环境。
- 错误排查： 当遇到TypeError，尤其是提示某个方法不是一个函数时，第一时间应该检查变量的类型。使用console.log(typeof variable)可以快速确认变量是否是预期的类型（例如'object'对于Date对象）。
- 时区考量： new Date()默认创建的是基于本地时区的日期。如果你的应用需要处理跨时区的日期显示，或者需要精确控制UTC时间，可能需要更复杂的日期库（如Moment.js、date-fns）或深入了解Intl.DateTimeFormat的高级用法。对于简单的“今天”和“昨天”显示，通常本地时区已足够。
总结
通过本文的指导，您应该已经掌握了在React项目中，利用JavaScript的Date对象和toLocaleDateString方法，正确且优雅地显示“今天”和“昨天”日期的技巧。关键在于理解Date对象的创建、如何安全地修改日期（通过创建副本），以及如何避免因变量类型转换不当而导致的TypeError。遵循这些最佳实践，将有助于您构建出功能更健壮、用户体验更佳的日期显示功能。
