如何將 JavaScript 日期轉換為 UTC？

在本教程中，我們將學習如何將日期轉換為UTC。UTC的全稱是協調世界時，它是一個在每個國家都值得考慮的標準時間。

讓我們透過示例瞭解將日期轉換為 UTC 的必要性。您建立了聊天應用程式。來自不同國家的使用者正在使用您的應用程式。假設一個使用者來自美國，另一個來自印度。兩者都有不同的時區。因此，您可以選擇向用戶顯示訊息接收時間或以當地時間或 UTC 傳送時間。

可能還有許多其他用途。下面，我們將看到將普通日期字串轉換為 UTC 的不同方法。

使用 toUTCString( ) 和 toISOString( ) 方法

在這種方法中，我們將建立日期類的新的物件，並應用toUTCString( )或toISOString( )方法將本地時間轉換為 UTC。幸運的是，JavaScript 提供了內建方法將日期轉換為 UTC。

語法

使用者可以按照以下語法使用toISOString( )和toUTCString()方法。

Var date = new Date();
let utcString = date.toUTCString( ); 
let utcString = daet.toISOString( );

示例

在下面的示例中，我們將使用 toUTCString( ) 和 toISOString( ) 方法將時間轉換為協調世界時。

<html>
<head>
   <title> Convert Date to UTC. </title>
</head>
<body>
   <h2> Convert Date to UTC in JavaScript. </h2>
   <h4> Output, when we use toUTCString() method. </h4>
   <div id = "result1"> </div>
   <h4> Output when we use toISOString() method. </h4>
   <div id = "result2"> </div>
   <script>
      let result1 = document.getElementById("result1");
      let result2 = document.getElementById("result2");
      
      // creating new date
      let date = new Date();
      let utcString = date.toUTCString();
      result1.innerHTML = utcString;
      utcString = date.toISOString();
      result2.innerHTML = utcString;
   </script>
</body>
</html>

在上面的輸出中，使用者可以看到當我們使用 toUTCString( ) 方法和 toISOString( ) 方法時輸出之間的區別。toUTCString( ) 方法還會返回帶有日期的時間。

使用 Moment.UTC( ) 方法

在這種方法中，我們將使用Moment JS庫方法。Moment JS 是一個 JavaScript 庫，僅包含用於管理日期和時間的方法，從而簡化了日期操作。程式設計師可以透過將CDN新增到<head>部分或使用npm包管理器在應用程式中安裝 Moment JS 來使用 Moment JS。

語法

使用者可以按照以下語法使用 Moment JS 的 .utc() 方法。

let utcString = moment().utc(); // to convert date to utc
// to format the UTC string
let utcString = moment().utc().format("YYYY-MM-DD”);

示例

在下面的示例中，我們添加了 CDN 以使用 Moment JS 庫函式。我們使用了moment.UTC()方法將日期轉換為 UTC。此外，我們還使用了.format()方法根據我們的需要格式化 UTC 字串。

<html>
<head>
   <title> Convert Date to UTC. </title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js" 
      integrity="sha512-vFABRuf5oGUaztndx4KoAEUVQnOvAIFs59y4tO0DILGWhQiFnFHiR+ZJfxLDyJlXgeut9Z07Svuvm+1Jv89w5g=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
   <h2> Convert Date to UTC in JavaScript. </h2>
   <h4> Output, when we use moment.utc() method. </h4>
   <div id = "result1"> </div>
   <h4> Output when we usemoment.utc().format() method. </h4>
   <div id = "result2"> </div>
   <script>
      let result1 = document.getElementById("result1");
      let result2 = document.getElementById("result2");
      
      // creating new date
      let utcString = moment().utc();
      result1.innerHTML = utcString;
      utcString = moment().utc().format("YYYY-MM-DD, hh-mm-ss");
      result2.innerHTML = utcString;
   </script>
</body>
</html>

在上面的輸出中，使用者可以看到格式化的 UTC 字串是什麼樣的。

使用 Date.UTC ( ) 方法

在這種方法中，我們將分別獲取日期的不同值。例如，我們將分別獲取年份、月份、日期、小時、分鐘、秒等，並將其作為引數傳遞給Date.UTC()方法。它將返回一個字串，並使用返回的字串建立新的日期物件。

語法

使用者可以按照以下語法使用 Date.UTC() 方法。

var utcString = Date.UTC(date.getUTCMonth(),
date.getUTCDate(), 
date.getUTCFullYear(), 
date.getUTCHours(),
date.getUTCMinutes(), 
date.getUTCSeconds());
let utc= new Date(utcString);

引數

  • 它將不同的 UTC 值作為引數。使用者需要根據他們想要格式化 UTC 字串的方式，逐個傳遞不同的值。

示例

在這個例子中，我們將使用不同的方法獲取 UTC 的年份、月份、日期等，並將它們傳遞給Date.UTC()方法，它將返回 UTC 字串。

<html>
<head>
   <title> Convert Date to UTC. </title>
</head>
<body>
   <h2> Convert Date to UTC in JavaScript. </h2>
   <h4> Output, when we use date.UTC() method. </h4>
   <div id = "result1"> </div>
   <script>
      let result1 = document.getElementById("result1");
      var date = new Date();
      
      // generating new date from all UTC values.
      var utcString = Date.UTC(date.getUTCMonth(),
      date.getUTCDate(), date.getUTCFullYear(), date.getUTCHours(),
      date.getUTCMinutes(), date.getUTCSeconds());
      result1.innerHTML = new Date(utcString);
   </script>
</body>
</html>

在本教程中，我們看到了三種將日期轉換為 UTC 的不同方法。第一種方法是最簡單的，因為它使用單個方法，無需任何引數。第二種方法非常好。如果您在即時應用程式中管理日期和時間，建議使用 Moment JS 庫。第三種方法僅用於演示目的；使用者不應使用它，因為他們需要編寫更多程式碼行。

更新於： 2022年8月2日

13K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告