如何使用 JavaScript 將 UTC 日期時間轉換為本地日期時間?


時區處理是每個 web 應用程式的重要組成部分。後端記錄的時間通常為 UTC 格式。但是,當顯示給使用者時,必須將其轉換為使用者的本地時間。這可以透過 JavaScript 實現。在本博文中,我們將瞭解如何使用 JavaScript 將 UTC 日期時間轉換為本地日期時間。

JavaScript 日期

JavaScript 包含一個“Date”類,允許我們處理日期和時間。“Date”類包含各種用於處理日期和時間的方法,包括:

Date() - 返回以毫秒錶示的當前日期和時間 getTime() 返回以毫秒錶示的當前時間

getUTCFullYear() - 返回日期在 UTC 時區的年份。

getUTCMonth() - 返回日期在 UTC 時區的月份。(注意:月份從 0 開始計數,0 代表一月)

getUTCDate() - 返回日期在 UTC 時區的日期。

getUTCHours() - 返回日期在 UTC 時區的時。

getUTCMinutes() - 返回日期在 UTC 時區的分鐘。

getUTCSeconds() - 返回日期在 UTC 時區的秒。

將 UTC 轉換為本地時間

我們必須使用 getTimezoneOffset() 方法將 UTC 日期時間轉換為本地日期時間。此方法返回 UTC 與本地時間之間的分鐘差。然後,可以使用此分鐘差將 UTC 日期時間轉換為本地日期時間。

示例

例如,以下程式碼將 UTC 日期時間轉換為本地日期時間:

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date();
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = local;
   </script> 
</body>
</html>

在這裡,我們可以看到一個名為“utc”的 New Date 物件,它儲存當前的 UTC 日期和時間。然後,我們使用 getTimezoneOffset() 函式計算 UTC 與本地時間之間的分鐘差。最後,我們透過將此毫秒數新增到 UTC 時間來計算本地時間。

類似地,我們可以將指定的 UTC 日期時間轉換為本地日期時間。要實現相同的功能,只需將 UTC 日期和時間作為引數提供給 Date() 函式 Object() { [native code] }。現在,讓我們看看將“2018-11-12 12:00:00”的 UTC 日期時間轉換為本地日期時間的程式碼:

示例

<!DOCTYPE html>
<html>
<head>
   <title>Date Example</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var utc = new Date("2018-11-12 12:00:00");
      var offset = utc.getTimezoneOffset();
      var local = new Date(utc.getTime() + offset * 60000);
      document.getElementById("result").innerHTML = "UTC : " + utc + "<br>" + "Local : " + local;
   </script>
</body>
</html>

我們將 UTC 日期和時間作為字串傳遞給 Date() 建構函式。然後,我們使用與之前相同的方法將 UTC 日期時間轉換為本地日期時間。

將本地時間轉換為 UTC

現在,我們如何從本地時間轉換為 UTC?要將本地日期時間轉換為 UTC 日期時間,我們可以再次使用 getTimezoneOffset() 方法。因為此函式返回 UTC 與本地時間之間的分鐘差。可以使用此差值將本地日期時間轉換為 UTC 日期時間。

示例

例如,以下程式碼將本地日期時間轉換為 UTC 日期時間:

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date();
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script>
</body>
</html>

在上面的程式碼中,我們首先建立了一個名為“local”的新 Date 物件,其中包含當前的本地日期和時間。然後,我們使用 getTimezoneOffset() 方法獲取 UTC 與本地時間之間的分鐘差。從以毫秒錶示的本地時間中減去此值後,我們得到了 UTC 時間。

我們還可以透過將本地日期和時間作為引數傳遞給 Date() 建構函式,將特定的本地日期時間轉換為 UTC 日期時間。例如,以下程式碼將“2018-11-12 12:00:00”的本地日期時間轉換為 UTC 日期時間:

示例

<!DOCTYPE html>
<html>
<body>
   <div id="result"></div>
   <script>
      var local = new Date("2018-11-12 12:00:00");
      var offset = local.getTimezoneOffset();
      var utc = new Date(local.getTime() - offset * 60000);
      document.getElementById("result").innerHTML = utc;
   </script> 
</body>
</html>

我們將本地日期和時間作為字串傳遞給 Date() 建構函式。然後,我們使用與之前相同的方法將本地日期時間轉換為 UTC 日期時間。

結論

在本教程中,我們學習瞭如何使用 JavaScript 將 UTC 日期時間轉換為本地日期時間。我們還了解到,JavaScript Date 類提供了幾種處理日期和時間的方法,例如 getTimezoneOffset(),可用於將 UTC 日期時間轉換為本地日期時間。我們還學習瞭如何使用相同的方法在本博文中將本地日期時間轉換為 UTC 日期時間。需要注意的是,時區處理是任何 web 應用程式的重要方面,正確轉換時間非常重要,以便能夠正確地將其顯示給使用者。

更新於:2023年2月21日

26K+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始
廣告