如何使用JavaScript将UTC日期时间转换为本地日期时间

时区处理是每个web应用程序的重要组成部分。后端记录的时间通常以UTC格式存在。然而，当将其显示给用户时，必须将其转换为用户的本地时间。使用JavaScript可以实现这一点。在本博客中，我们将看看如何使用JavaScript将UTC日期时间转换为本地日期时间。

JavaScript日期

JavaScript包含一个“Date”类，可让我们处理日期和时间。Date类包含各种用于处理日期和时间的方法，包括：

Date() - 返回以毫秒表示的当前日期和时间; getTime()返回当前时间的毫秒数

getUTCFullYear() - 返回指定日期的年份（UTC时区）

getUTCMonth() - 返回指定日期的月份（UTC时区）

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()函数。现在，让我们看一下将UTC日期时间”2018-11-12 12:00:00″转换为本地日期时间的代码-

示例

<!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应用程序的重要方面，并且重要的是正确地转换时间，以便正确地显示给用户。