HOW – 前端时区解决方案

目录

• 一、时区问题
• 二、解决方案
• • 显示本地时间
  • 提供时区选择功能
• 三、服务器存储时间的格式 – ISO 8601
• 四、时区相关名词解释
• • GMT
  • UTC
  • Zulu Time
  • 时区
  • 夏令时
  • 时间戳

一、时区问题

在前端处理时区问题时，通常会遇到两种情况：

1. 显示本地时间：需要将服务器返回的 UTC 时间（也可能为带有时区信息的时间戳）转换为用户所在时区的本地时间并显示在页面上。
2. 用户选择时区：需要在页面上提供选择时区的功能，让用户自行选择所在时区，并在页面中显示相应时区的时间。

注意，这里建议服务器存储的时间格式为 UTC 时间：如 2024-03-25T12:00:00Z。这样做的好处是在前端可以根据接收到的时间戳和时区信息，灵活地进行时区转换和展示，从而确保显示的时间是符合用户所在时区的。

北京时间：第八时区，快 8 小时。

二、解决方案

针对这两种情况，以下是一些常见的解决方案：

显示本地时间

1. 使用 JavaScript 的 Date 对象：

JavaScript 的 Date 对象可以直接处理时区问题。你可以通过以下方法获取本地时间：

const now = new Date(); // 获取当前时间（本地时间）
// Fri Mar 22 2024 20:18:30 GMT+0800 (中国标准时间)

你也可以将 UTC 时间转换为本地时间：

const utcTime = '2024-03-25T12:00:00Z'; // 服务器返回的 UTC 时间
const localTime = new Date(utcTime); // 转换为本地时间
// Mon Mar 25 2024 20:00:00 GMT+0800 (中国标准时间)

2. 使用 Moment.js 库：

Moment.js 是一个常用的 JavaScript 日期处理库，它提供了丰富的日期和时间处理功能，包括时区处理。你可以使用 Moment.js 将 UTC 时间转换为本地时间，或者获取用户所在时区的本地时间。

const utcTime = '2024-03-25T12:00:00Z'; // 服务器返回的 UTC 时间
const localTime = moment.utc(utcTime).local(); // 转换为本地时间

3. 使用 Intl.DateTimeFormat：

JavaScript 的国际化 API 中的 DateTimeFormat 对象可以处理时区问题，并且不需要额外的库。你可以使用它来格式化本地时间。

const utcTime = '2024-03-25T12:00:00Z'; // 服务器返回的 UTC 时间
const localTime = new Date(utcTime);
const formatter = new Intl.DateTimeFormat('default', {
   
  timeZoneName: 'short',
  hour12: false,
  weekday: 'short',
  year: 'numeric',
  month