JavaScript日期格式化技巧分享

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript 日期格式化方法详解》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

本文将详细介绍在 JavaScript 中格式化日期时间的几种常用方法。正如摘要所说，我们将重点讲解如何利用 date-fns 库将 API 返回的 ISO 8601 格式日期字符串转换为自定义格式，例如 "yyyy-MM-dd hh:mm:ss a"。

在 Web 开发中，经常需要处理日期和时间数据。从 API 获取到的日期时间数据通常是 ISO 8601 格式的字符串，例如 "2023-05-12T09:14:34.742+00:00"。为了更好地展示给用户，我们需要将其格式化为更友好的形式。

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

date-fns 是一个现代的 JavaScript 日期实用工具库，提供了丰富的日期时间处理函数，并且模块化设计使得可以按需引入，减小代码体积。

1. 安装 date-fns

虽然示例中使用 CDN 引入，但更推荐使用 npm 或 yarn 进行安装：

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

2. 引入 format 函数

import { format } from 'date-fns';

3. 使用 format 函数格式化日期

format 函数接受两个参数：一个 Date 对象和一个格式字符串。

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

示例代码：集成到 API 数据处理中

以下代码展示了如何将 date-fns 集成到 API 数据处理中，格式化从 API 获取的 update_date 字段。

import { format } from 'date-fns';

fetch('http://localhost:8082/list/findbyid/'+id+'/'+productid)
  .then(response => response.json())
  .then(data => {
    const tableBody = document.getElementById('dataInven');
    data.forEach(user => {
      const updateDate = user.update_date ? format(new Date(user.update_date), "yyyy-MM-dd hh:mm:ss a") : ''; // 处理 update_date 为空的情况
      const row = document.createElement('tr');
      row.innerHTML = `
        ${user.procode}
        ${user.proname}
        ${user.unit}
        ${user.cat_name}
        ${user.quantity}
        ${user.update_by}
        ${updateDate}
      `;
      tableBody.appendChild(row);
    });
  });

常用的格式字符串

date-fns 提供了丰富的格式字符串选项，可以根据需求自定义日期时间的格式。以下是一些常用的格式字符串：

• yyyy: 年份 (四位数)
• MM: 月份 (两位数，01-12)
• dd: 日 (两位数，01-31)
• hh: 小时 (12 小时制，01-12)
• HH: 小时 (24 小时制，00-23)
• mm: 分钟 (两位数，00-59)
• ss: 秒 (两位数，00-59)
• a: AM/PM

更多格式字符串选项请参考 date-fns 官方文档。

注意事项

• 确保正确引入 date-fns 库。
• 处理 API 返回的日期时间字符串时，需要先将其转换为 Date 对象。
• 根据需求选择合适的格式字符串。
• 需要考虑时区问题，date-fns 默认使用本地时区。如果需要处理不同时区的日期时间，可以使用 date-fns-tz 库。
• 如果API返回的 update_date 字段可能为空，需要进行空值判断，避免出现错误。

总结

date-fns 是一个功能强大且易于使用的 JavaScript 日期实用工具库，可以方便地格式化日期时间数据。通过本文的介绍，相信你已经掌握了使用 date-fns 格式化日期时间的基本方法。在实际开发中，可以根据具体需求选择合适的格式字符串，并结合其他日期时间处理函数，更好地处理日期时间数据。

今天关于《JavaScript日期格式化技巧分享》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！