当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript日期格式化方法详解

JavaScript日期格式化方法详解

2025-08-06 17:24:30 0浏览收藏

还在为JavaScript中日期格式化而烦恼吗？本文为你提供一份详尽的**JavaScript日期格式化教程**，教你轻松搞定各种日期时间格式的需求！前端开发中，我们经常需要将后端API返回的原始ISO 8601日期时间字符串（例如："2023-05-12T09:14:34.742+00:00"）转换成更易读的格式。本文重点介绍如何使用强大的date-fns库，通过简单的示例代码，一步步演示如何将日期字符串格式化为自定义格式，例如"2023-05-12 09:14:34 AM"，方便在页面上清晰展示。告别繁琐的日期处理，提升用户体验，快来学习吧！

JavaScript日期时间格式化详解

本文详细介绍了如何在JavaScript中格式化日期时间字符串，将后端API返回的原始日期时间数据转换为更易读的格式。主要讲解了使用date-fns库进行日期时间格式化的方法，通过示例代码演示了如何将ISO 8601格式的日期字符串转换为自定义格式，方便在前端页面展示。

在前端开发中，经常需要处理从后端API获取的日期时间数据。这些数据通常以ISO 8601字符串格式返回，例如："2023-05-12T09:14:34.742+00:00"。为了更好地在用户界面上展示，我们需要将其格式化为更易读的形式，例如："2023-05-12 09:14:34 AM"。

常用的日期时间格式化方法有很多，这里推荐使用 date-fns 库。date-fns 是一个现代 JavaScript 日期工具库，提供了丰富且模块化的API，可以方便地进行日期时间的格式化、解析、计算等操作。

使用 date-fns 格式化日期时间

安装 date-fns:

由于是前端项目，可以直接使用 CDN 引入：

   <script type="module">
       import { format } from 'https://esm.run/date-fns';
       // Your code here
   </script>

或者使用 npm/yarn 安装：

   npm install date-fns
   # 或者
   yarn add date-fns

然后在你的 JavaScript 代码中导入 format 函数：

   import { format } from 'date-fns';

使用 format 函数:

format 函数接受两个参数：

date: 要格式化的日期对象。
formatString: 格式化字符串，用于指定输出的日期时间格式。

例如，将 "2023-05-12T09:14:34.742+00:00" 格式化为 "2023-05-12 09:14:34 AM" 的代码如下：

   import { format } from 'date-fns';

   const someDate = "2023-05-12T09:14:34.742+00:00";
   const dateFormatted = format(new Date(someDate), "yyyy-MM-dd hh:mm:ss a");
   console.log(dateFormatted); // 输出: 2023-05-12 09:14:34 AM

常用格式化字符串:

date-fns 提供了丰富的格式化字符串选项，以下是一些常用的：

yyyy: 四位年份 (例如: 2023)
MM: 两位月份 (01-12)
dd: 两位日期 (01-31)
hh: 12小时制的小时 (01-12)
HH: 24小时制的小时 (00-23)
mm: 分钟 (00-59)
ss: 秒 (00-59)
a: AM/PM 指示符

集成到你的代码中:

将上述代码集成到你的 fetch 请求的回调函数中：

   fetch('http://localhost:8082/list/findbyid/'+id+'/'+productid)
       .then(response => response.json())
       .then(data => {
           const tableBody = document.getElementById('dataInven');
           data.forEach(user => {
               // 格式化 update_date
               const formattedDate = format(new Date(user.update_date), "yyyy-MM-dd hh:mm:ss a");

               const row = document.createElement('tr');
               row.innerHTML = `
                   <td>${user.procode}</td>
                   <td>${user.proname}</td>
                   <td>${user.unit}</td>
                   <td>${user.cat_name}</td>
                   <td>${user.quantity}</td>
                   <td>${user.update_by}</td>
                   <td>${formattedDate}</td>
               `;
               tableBody.appendChild(row);
           });

       });

注意事项:

时区问题: new Date() 会根据用户的本地时区创建日期对象。如果API返回的日期时间字符串没有包含时区信息，可能会导致显示的时间与预期不符。可以考虑在后端返回带有时区信息的日期字符串，或者在前端使用 date-fns-tz 库处理时区转换。
错误处理: 确保 user.update_date 是有效的日期时间字符串，否则 new Date() 可能会抛出错误。可以添加错误处理逻辑来避免这种情况。

总结:

使用 date-fns 库可以方便地在 JavaScript 中格式化日期时间。通过灵活的格式化字符串，你可以将日期时间数据转换为任何你需要的格式，从而提升用户体验。在实际开发中，需要注意时区问题和错误处理，确保日期时间格式化的正确性。

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