TypeScript 中動態填充日期


TypeScript 是一種強型別的面向物件程式語言,它使開發人員能夠編寫更清晰、更容易理解的程式碼。TypeScript 中的動態日期填充理論是指 JavaScript 應用程式可以自動使用當前日期、時間或其他動態資訊來填充日曆、列表或其他型別的顯示。這允許開發人員建立使用者介面,無需手動輸入資料即可自動顯示當前日期、時間或其他動態資訊。這對於需要頻繁更新或使用者互動的應用程式特別有用。

為了在TypeScript中動態填充日期,開發人員可以使用 Date 物件及其方法將日期設定為任何給定值。Date 物件有一個建構函式,可用於將日期設定為給定值。開發人員還可以使用 getTime() 和 setTime() 方法來獲取和設定自 Unix 紀元以來的毫秒數,這可以用來將日期設定為自定義值。此外,setHours()、setMinutes()、setSeconds() 和 setMilliseconds() 方法可用於將日期設定為更精確的值。最後,開發人員可以使用 toLocaleDateString() 方法以所需的語言環境格式化日期。

使用 Date() 建構函式

您可以使用 Date 建構函式在 TypeScript 中進行動態日期填充。Date 建構函式接受一個引數,一個時間戳(自 1970 年 1 月 1 日以來的毫秒數),並返回一個 Date 物件。然後,此 Date 物件可用於以您需要的格式操作和顯示資料。

例如,要建立一個表示當前日期和時間的 Date 物件,您可以不帶任何引數使用 Date 建構函式:

let current_date: Date = new Date()

然後,您可以使用各種 Date 方法以您想要的方式格式化日期。例如,toLocaleDateString() 方法返回本地日期格式的日期字串表示形式:

let local_formatted_date: string = current_date.toLocaleDateString();

如果您想從格式化的字串建立一個 Date 物件,Date 建構函式也可以接受字串引數。例如,如果您要建立一個表示日期“2023 年 1 月 1 日”的 Date 物件,您可以使用以下程式碼:

let specific_date: Date = new Date("January 1, 2023");

語法

let current_date: Date = new Date()

let current_month: number = current_date.getMonth() + 1
let current_day: number = current_date.getDate()
let current_year: number = current_date.getFullYear()

// Formatted date string
let formatted_date: string =
   current_month + '/' + current_day + '/' + current_year

console.log(formatted_date)

上述語法演示了使用 Date 建構函式和 getMonth()、getDate() 和 getFullYear() 方法在 TypeScript 中進行動態日期填充。

示例

在下面的示例中,我們建立了一個名為 DynamicDate 的類,並在建構函式中聲明瞭一個日期物件。此類有一個 getDynamicDate() 方法,該方法以特定格式返回日期字串;在本例中,它是 YYYY: DD/MM。此方法使用 Date 物件的 *getMonth()*、*getDate()* 和 *getFullYear()* 方法來獲取月份、日期和年份,並將其格式化為所需格式,然後返回格式化的字串。如果我們的應用程式現在需要上述字串日期格式,那麼我們可以直接使用此 DynamicDate 類及其 getDynamicDate() 方法。

// Class for Dynamic Date
class DynamicDate {

   // date variable
   date: Date
   constructor(dateString) {
   
      // creating date object
      this.date = new Date(dateString)
   }

   // formatted date string method
   getDynamicDate() {
      let current_month: number = this.date.getMonth() + 1
      let current_day: number = this.date.getDate()
      let current_year: number = this.date.getFullYear()

      return current_year + ': ' + current_day + '/' + current_month
   }
}
let dynamic_date: DynamicDate = new DynamicDate('January 1, 2023')
let formatted_date: string = dynamic_date.getDynamicDate()
console.log(formatted_date)

編譯後,將生成以下 JavaScript 程式碼:

// Class for Dynamic Date
var DynamicDate = /** @class */ (function () {
   function DynamicDate(dateString) {

      // creating date object
      this.date = new Date(dateString);
   }

   // formatted date string method
   DynamicDate.prototype.getDynamicDate = function () {
      var current_month = this.date.getMonth() + 1;
      var current_day = this.date.getDate();
      var current_year = this.date.getFullYear();
      return current_year + ': ' + current_day + '/' + current_month;
   };
   return DynamicDate;
}());
var dynamic_date = new DynamicDate('January 1, 2023');
var formatted_date = dynamic_date.getDynamicDate();
console.log(formatted_date);

輸出

上述程式碼將產生以下輸出:

2023: 1/1

示例

在下面的示例中,我們建立了一個名為 DynamicDateLocal 的類,並在建構函式中聲明瞭一個日期物件。此類有一個 getLocalDateFormat() 方法,該方法以特定格式返回日期字串。此方法使用 Date 物件的 toLocaleString() 方法返回格式化的字串。此方法根據使用者的本地日期時間格式返回格式化的日期字串。

class DynamicDateLocal {
   // date variable
   date: Date
   constructor(dateString) {
   
      // creating date object
      this.date = new Date(dateString)
   }

   // formatted date string method
   getLocalDateFormat() {
      let formatted_date: string = this.date.toLocaleString()
      return formatted_date
   }
}

let dynamic_date: DynamicDateLocal = new DynamicDateLocal('January 1, 2023')
let formatted_date: string = dynamic_date.getLocalDateFormat()
console.log(formatted_date)

編譯後,將生成以下 JavaScript 程式碼:

var DynamicDateLocal = /** @class */ (function () {
   function DynamicDateLocal(dateString) {
      // creating date object
      this.date = new Date(dateString);
   }
   
   // formatted date string method
   DynamicDateLocal.prototype.getLocalDateFormat = function () {
      var formatted_date = this.date.toLocaleString();
      return formatted_date;
   };
   return DynamicDateLocal;
}());
var dynamic_date = new DynamicDateLocal('January 1, 2023');
var formatted_date = dynamic_date.getLocalDateFormat();
console.log(formatted_date);

輸出

上述程式碼將產生以下輸出:

1/1/2023, 12:00:00 AM

TypeScript 中的動態日期填充是一個非常有用的功能,當我們的應用程式需要根據某些條件或區域重複更改日期格式時,它就派上用場了。如果應用程式在不同區域需要不同的格式化字串,我們可以宣告不同的方法來獲取不同的格式化日期字串。

更新於:2023年1月20日

1K+ 瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.