本教程详细讲解如何在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, …)：根据指定参数创建。
修改日期：
立即学习“Java免费学习笔记（深入）”；
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”的格式显示，我们需要以下步骤：
获取当前日期对象。定义格式化选项。格式化今日日期。计算昨日日期（需要创建当前日期的副本以避免修改原始日期）。格式化昨日日期。
下面是具体的JavaScript代码实现：
// file.jsconst 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.jsximport React from 'react';import { today, yesterday } from './file'; // 导入格式化后的日期function DateDisplay() { return ( 今日: { today }
昨日: { yesterday }
);}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与React中日期格式化：优雅显示今日与昨日日期的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531899.html
微信扫一扫 
支付宝扫一扫 
