引言

在現代Web開發(fā)中，時間處理是一個常見但容易出錯的環(huán)節(jié)。無論是前端展示還是后端數據處理，時間格式的轉換、時區(qū)的處理以及空值的判斷都需要謹慎對待。本文將從前端（JavaScript/dayjs）和后端（Java）兩個角度，詳細介紹如何優(yōu)雅地處理時間數據，解決諸如“2023-06-15T02:00:00.000+00:00 如何顯示為 2023-06-15 10:00:00”等問題，并提供完整的代碼示例和最佳實踐。

1. 前端時間處理（JavaScript/dayjs）

1.1 時間格式化與空值處理

在前端，我們通常需要將后端返回的 UTC 時間（如 2023-06-15T02:00:00.000+00:00）轉換為本地時間并格式化。推薦使用 dayjs 庫（輕量級，API 友好）。

基本格式化函數

import dayjs from 'dayjs';

const formatDateTime = (timeStr) => {
  if (!timeStr) return '-'; // 空值返回占位符
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss');
};

說明：

• dayjs(timeStr) 自動解析 ISO 8601 格式時間。
• format() 方法指定輸出格式（YYYY-MM-DD HH:mm:ss）。
• 空值返回 '-'，避免顯示 null 或 undefined。

增強版（帶錯誤處理）

const formatDateTime = (timeStr) => {
  if (!timeStr || timeStr === 'null' || timeStr === 'undefined') return '-';
  try {
    const date = dayjs(timeStr);
    return date.isValid() ? date.format('YYYY-MM-DD HH:mm:ss') : '-';
  } catch (e) {
    console.error('時間格式化失敗:', e);
    return '-';
  }
};

1.2 時區(qū)轉換

默認情況下，dayjs 使用本地時區(qū)。如果需要強制轉換為特定時區(qū)（如 UTC），可以使用插件：

npm install dayjs utc plugin

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

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

// 轉換為北京時間
const beijingTime = dayjs.utc(timeStr).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');

1.3 在 Ant Design 表格中渲染時間

在 Ant Design 的 Table 組件中，可以通過 customRender 或 render 列配置實現時間格式化：

const columns = [
  {
    title: '抓取時間',
    dataIndex: 'graspingTime',
    key: 'graspingTime',
    render: (text) => formatDateTime(text), // 直接調用格式化函數
  },
];

效果：

2. 后端時間處理（Java）

2.1 使用 java.time API（Java 8+ 推薦）

Java 8 引入了 java.time 包，提供了更直觀的日期時間操作方式。

核心代碼

import java.time.*;
import java.time.format.DateTimeFormatter;
import java.util.Date;

public String formatGraspingTime(Date graspingTime) {
    if (graspingTime == null) {
        return "-";
    }
    // 轉換為系統(tǒng)默認時區(qū)
    ZonedDateTime zonedDateTime = graspingTime.toInstant()
            .atZone(ZoneId.systemDefault());
    // 格式化
    return zonedDateTime.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
}

說明：

• toInstant() 將 Date 轉換為 UTC 時間。
• atZone() 轉換為本地時區(qū)時間。
• DateTimeFormatter 定義輸出格式。

指定時區(qū)（如北京時間）

ZonedDateTime zonedDateTime = graspingTime.toInstant()
        .atZone(ZoneId.of("Asia/Shanghai"));

2.2 使用 SimpleDateFormat（兼容舊版 Java）

如果項目仍在使用舊版 Java，可以用 SimpleDateFormat，但需注意線程安全問題。

public String formatGraspingTime(Date graspingTime) {
    if (graspingTime == null) {
        return "-";
    }
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    sdf.setTimeZone(TimeZone.getTimeZone("Asia/Shanghai")); // 設置時區(qū)
    return sdf.format(graspingTime);
}

2.3 Spring Boot 中的 JSON 序列化

在 Spring Boot 中，可以通過 @JsonFormat 注解直接在 DTO 中定義時間格式：

public class MyEntityDTO {
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private Date graspingTime;
    // Getter/Setter
}

效果：

• 序列化時自動轉換為 "2023-06-15 10:00:00" 格式。
• 時區(qū)設置為東八區(qū)（北京時間）。

3. 常見問題與解決方案

3.1 時區(qū)不一致問題

問題：前端顯示時間比數據庫少 8 小時。

原因：后端返回 UTC 時間，前端未轉換時區(qū)。

解決：

• 后端：返回帶時區(qū)的時間字段（如 @JsonFormat(timezone = "GMT+8")）。
• 前端：使用 dayjs 自動轉換時區(qū)。

3.2 空值處理

問題：時間字段為 null 時前端顯示異常。

解決：

• 前端：if (!timeStr) return '-'。
• 后端：if (graspingTime == null) return "-"。

3.3 線程安全問題

問題：SimpleDateFormat 非線程安全。

解決：

• 每次調用時新建實例。
• 改用 java.time API（推薦）。

4. 總結與最佳實踐

前端最佳實踐

使用 dayjs 替代 moment.js（更輕量）。

所有時間渲染前必須格式化并處理空值。

時區(qū)轉換盡量在前端統(tǒng)一處理。

后端最佳實踐

優(yōu)先使用 java.time API（Java 8+）。

在 DTO 中用 @JsonFormat 定義時間格式和時區(qū)。

數據庫存儲 UTC 時間，業(yè)務邏輯按需轉換時區(qū)。

完整流程圖

后端數據庫 (UTC) 
  → 后端DTO (@JsonFormat) 
  → 前端API (JSON) 
  → dayjs 格式化 
  → 頁面渲染

結語

時間處理看似簡單，但涉及時區(qū)、格式、空值等問題時容易出錯。通過本文的解決方案，你可以：

• 在前端使用 dayjs 優(yōu)雅地格式化時間。
• 在后端用 java.time 或 @JsonFormat 規(guī)范時間輸出。
• 避免時區(qū)不一致、空值異常等常見問題。

到此這篇關于Java前后端時間處理全攻略(從格式化到時區(qū)轉換)的文章就介紹到這了,更多相關Java時間處理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論