日期处理踩坑记录：解析日期导致的前一天数据问题

最新推荐文章于 2024-08-15 08:55:57 发布

宇珩前端记录

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量586

点赞数 15

分类专栏： javascript 文章标签： javascript 数据分析

本文链接：https://blog.csdn.net/2301_80817413/article/details/140496288

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章内容

最近，我用 GPT 编写了一个项目的小工具，用于分析所有订单数据。工具通过导出数据库的 Excel 表格进行分析，以了解不同交易平台和用户的情况。虽然数据统计总数是正确的，但当我尝试查看某一天的单独数据时，遇到了一个问题。具体来说，数据显示结果不匹配。

问题描述

在排查问题的过程中，我逐步打印和检查了数据，最终发现问题出在时间格式解析上。我的数据中 create_time 字段的格式如下：

Wed Jul 17 2024 07:13:12 GMT+0800 (中国标准时间)

我使用以下代码解析和格式化日期：

const dateObj = new Date(item.create_time);
const date = dateObj.toISOString().split('T')[0];

然而，这种处理方式在上午 8 点之前的数据会将日期变成前一天。例如，上述时间在转换后会变成 2024-07-16，而不是 2024-07-17。

问题发生原因

问题的根源在于 toISOString() 方法将日期转换为 UTC 时间，并且将时区偏移应用于日期时间值。由于北京时间 (GMT+0800) 比 UTC 提前 8 小时，导致当天早上 8 点之前的时间在转换后会显示为前一天的日期。

解决方案

为了解决这个问题，有几种方法可以确保日期解析正确：

方法一：使用 `day.js` 库处理时区

day.js 是一个轻量级的日期处理库，支持时区插件，可以轻松处理时区转换问题。

引入 day.js 库和时区插件：

<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs/plugin/timezone.js"></script>

扩展 day.js 并解析日期：

dayjs.extend(dayjs_plugin_utc);
dayjs.extend(dayjs_plugin_timezone);

function parseDate(create_time) {
    return dayjs(create_time).tz('Asia/Shanghai').format('YYYY-MM-DD');
}

更新数据处理代码：
在处理数据时，使用 parseDate 函数替换原来的日期解析代码：

data.forEach(item => {
    const date = parseDate(item.create_time);  // 使用 day.js 解析日期
});

方法二：手动调整时区偏移

如果不使用第三方库，也可以手动调整时区偏移来确保正确解析日期。

function parseDateManually(create_time) {
    const dateObj = new Date(create_time);
    const offset = dateObj.getTimezoneOffset() * 60000; // 获取时区偏移毫秒数
    const localISOTime = new Date(dateObj.getTime() - offset).toISOString().split('T')[0];
    return localISOTime;
}

方法三：使用 `Intl.DateTimeFormat` API

现代浏览器支持 Intl.DateTimeFormat API，可以用来处理日期格式和时区。

function parseDateWithIntl(create_time) {
    const dateObj = new Date(create_time);
    const options = { timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit' };
    const formattedDate = new Intl.DateTimeFormat('zh-CN', options).format(dateObj);
    return formattedDate.split('/').join('-'); // 将日期格式转换为 'YYYY-MM-DD'
}