Glittering's blog

Appearance

一、问题原因分析 ​

  1. 服务器返回的时间可能是 UTC 时间

    • 例如，后端返回 "2024-09-25T09:00:00Z"
    • Z 表示 UTC 时间
    • 前端 new Date("2024-09-25T09:00:00Z") 会自动转为本地时间显示

  2. 前端环境默认使用本地时区

    • new Date() 默认生成当前浏览器的本地时间
    • 如果浏览器在 UTC+8，而服务器在 UTC+0，会相差 8 小时

  3. JSON 时间字符串不带时区标识

    • 如 "2024-09-25 09:00:00"
    • JS 会当作 本地时间，可能和服务器时区不一致

二、常用解决方案 ​

1️⃣ 统一时间为 UTC ​

javascript
// 服务器返回 UTC 时间
const utcTime = "2024-09-25T09:00:00Z";
const date = new Date(utcTime); 

console.log(date.toUTCString());  // UTC 格式
console.log(date.toISOString());   // ISO 格式
  • 使用 toISOString() 可以保证在不同客户端保持一致（UTC 时间）。

2️⃣ 转为本地时间显示 ​

javascript
const date = new Date("2024-09-25T09:00:00Z");
console.log(date.toLocaleString());      // 本地格式
console.log(date.toLocaleString('zh-CN')); // 中文格式

✅ toLocaleString() 会自动根据浏览器所在时区转换显示。

3️⃣ 使用 moment.js / dayjs 等库 ​

  • 推荐 dayjs + utc + timezone 插件
javascript
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

const serverTime = "2024-09-25T09:00:00Z";

// 转为本地时区
const localTime = dayjs.utc(serverTime).tz(dayjs.tz.guess()).format('YYYY-MM-DD HH:mm:ss');

console.log(localTime); // 根据浏览器时区显示正确时间

  • 优点：

    1. 支持任意时区转换
    2. 避免 new Date() 直接解析字符串时出现差异

4️⃣ 前后端约定统一时间格式 ​

  1. 后端统一返回 UTC 时间 ISO 格式

    • "2024-09-25T09:00:00Z"

  2. 前端统一解析为本地时间或指定时区

避免直接返回 "2024-09-25 09:00:00"（无时区信息）

5️⃣ 简单的手动时区校正 ​

javascript
const serverDate = new Date("2024-09-25T09:00:00"); // 假设服务器时间 UTC
const offset = serverDate.getTimezoneOffset() / 60; // 获取本地时区差（小时）
const localDate = new Date(serverDate.getTime() - offset * 3600 * 1000);

console.log(localDate.toLocaleString());

⚠️ 这种方法不如使用 dayjs/moment 安全，容易出错。

三、面试角度总结 ​

  • 核心点：

    1. new Date() 默认是本地时区
    2. ISO 8601 字符串带 Z 表示 UTC
    3. 不带时区字符串可能解析为本地时间
    4. 统一前后端时间格式是关键

  • 实用方案：

    • 返回 UTC → 前端用 dayjs.utc().tz() 或 toLocaleString() 转本地显示
    • 或统一前端处理全部为 UTC（后台和前端都用 UTC）

附录 ​

一、UTC 时间是什么？ ​

UTC（Coordinated Universal Time）

  • 中文名：协调世界时
  • 是一种标准时间，不随时区变化而改变
  • 类似“世界统一时间”，全球一致
  • 用于网络、服务器和跨时区系统，避免本地时间差异

📌 特点：

  1. 不受夏令时影响
  2. 与 GMT（格林威治标准时间）几乎相同
  3. 标准格式：YYYY-MM-DDTHH:mm:ssZ，末尾的 Z 表示 UTC

二、常见格式示例 ​

格式含义说明
2024-09-25T09:00:00ZUTC 时间Z 表示 UTC
2024-09-25T09:00:00+08:00东八区时间+08:00 表示比 UTC 早 8 小时
2024-09-25 09:00:00无时区默认解析为本地时间（危险）

三、UTC 与本地时间的关系 ​

javascript
const utcDate = new Date("2024-09-25T09:00:00Z"); // UTC
console.log(utcDate.toUTCString()); // Thu, 09 Nov 2025 09:00:00 GMT
console.log(utcDate.toLocaleString()); // 根据浏览器时区转换显示

假设浏览器在 东八区（UTC+8），显示：

2024-09-25 17:00:00

✅ UTC+8 → 加 8 小时

四、为什么使用 UTC ​

  1. 跨时区同步

    • 前端、后端、数据库统一用 UTC 保存
    • 避免夏令时或不同时区导致时间错乱

  2. 前端统一显示

    • 服务器统一返回 UTC
    • 前端根据用户时区转换显示本地时间

  3. 日志、调度、定时任务

    • 用 UTC 记录，全球用户一致，方便统计

五、前端常见操作 ​

1️⃣ 转本地时间 ​

javascript
const utcTime = "2024-09-25T09:00:00Z";
const localTime = new Date(utcTime).toLocaleString();
console.log(localTime); // 浏览器本地时区显示

2️⃣ 显示 ISO 格式 UTC 时间 ​

javascript
const now = new Date();
console.log(now.toISOString()); // 2024-09-25T09:00:00.000Z

3️⃣ 使用 dayjs / moment 转换时区 ​

javascript
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

const serverTime = "2024-09-25T09:00:00Z";
const localTime = dayjs.utc(serverTime).tz(dayjs.tz.guess()).format('YYYY-MM-DD HH:mm:ss');

console.log(localTime);

✅ 自动根据浏览器时区显示正确时间。

六、面试总结点 ​

  1. UTC 是统一时间，不受时区影响
  2. 服务器统一返回 UTC，前端根据本地时区显示
  3. 避免使用无时区时间字符串，容易解析错
  4. JS Date 对象默认使用本地时区，但可以通过 UTC 方法处理

Copyright © 2026