在 TypeScript 中格式化日期和時間

Muhammad Maisam Abbas 2023年1月30日

TypeScript TypeScript Date

TypeScript 中沒有引數的日期物件
TypeScript 中帶有一個引數的日期物件
TypeScript 中帶有字串引數的日期物件
TypeScript 中具有多個引數的日期物件
在 TypeScript 中使用 get 方法獲取日期和時間
在 TypeScript 中使用 set 方法設定日期和時間
在 TypeScript 中格式化日期和時間的方法

本教程將介紹內建物件 Date() 並討論在 Typescript 中獲取、設定和格式化日期和時間的各種方法。

TypeScript 中沒有引數的日期物件

每當在沒有任何引數的情況下呼叫建構函式 Date() 時，它都會返回編譯器正在執行的當前裝置的日期和時間。

例子：

let myDate: Date = new Date();
console.log('My date and time is = ' + myDate);

輸出：

My date and time is = Fri Feb 18 2022 19:45:32 GMT+0000 (Country Standard Time)

TypeScript 中帶有一個引數的日期物件

例子：

let myDate: Date = new Date(600000000000);
console.log('My date and time is = ' + myDate);

輸出：

My date and time is = Thu Jan 05 1989 15:40:00 GMT+0000 (Country Standard Time)

在上面的例子中，格式與上一個相同，但時間和日期不同。Date() 建構函式現在有一個引數毫秒 新增到編譯器開始時間和日期。

一般來說，編譯器的開始日期和時間是 Thu Jan 01 1970 00:00:00。那麼 600000000000 毫秒等於 166666.667 小時。

因此，將這些小時新增到編譯器開始日期和時間會給出輸出 Thu Jan 05 1989 15:40:00。

TypeScript 中帶有字串引數的日期物件

示例 1：

let myDate: Date = new Date("2018-02-08T10:30:35");
console.log('My date and time is = ' + myDate);

輸出：

My date and time is = Thu Feb 08 2018 10:30:35 GMT+0000 (Country Standard Time)

在輸出中，顯示使用者設定的日期和時間。注意 Date() 建構函式中傳遞的引數是一個字串。

字串引數的語法：

(year-month-date T hours: minutes: seconds)

在這裡，T 將日期與時間分開。

如果使用者只提及年份，編譯器將採用預設日期和月份。

示例 2：

let myDate: Date = new Date("2018T10:30:35");
console.log('My date and time is = ' + myDate);

輸出：

My date and time is = Thu Jan 01 2018 10:30:35 GMT+0000 (Country Standard Time)

TypeScript 中具有多個引數的日期物件

示例 1：

let myDate: Date = new Date(2018, 9, 2, 12, 15, 45, 2000);
console.log('My date and time is = ' + myDate);

輸出：

My date and time is = Tue Oct 02 2018 12:15:47 GMT+0000 (Country Standard Time)

日期和時間的格式仍然與上面的示例相同，但現在，Date() 建構函式有多個引數。

多個引數的語法：

(year, month, date, hours, minutes, seconds, milliseconds)

在上面的示例中，請注意 seconds 的值是 45，而 milliseconds 的值是 2000。這就是為什麼計算的時間是 12 : 15 : 47。

如果使用者只輸入四個引數，這些值將被依次賦值，其餘的將被賦予預設值。

示例 2：

let myDate: Date = new Date(2018, 9, 2, 12);
console.log('My date and time is = ' + myDate);

輸出：

My date and time is = Tue Oct 02 2018 12:00:00 GMT+0000 (Country Standard Time)

在 TypeScript 中使用 `get` 方法獲取日期和時間

如上所示，Date() 物件為我們提供了有關日期和時間的所有詳細資訊。如果使用者只想從整個字串中獲取一個值，則使用者必須使用內建的 get 方法來獲取相應的值。

例子：

let myDate: Date = new Date(2018, 9, 2, 12, 15, 45);
console.log('My date and time is = ' + myDate);

console.log('The year is = ' + myDate.getFullYear());
console.log('The month is = ' + myDate.getMonth());
console.log('The date is = ' + myDate.getDate());
console.log('The hours are = ' + myDate.getHours());
console.log('The minutes are = ' + myDate.getMinutes());
console.log('The seconds are = ' + myDate.getSeconds());

輸出：

My date and time is = Tue Oct 02 2018 12:15:45 GMT+0000 (Country Standard Time)
The year is = 2018
The month is = 9
The date is = 2
The hours are = 12
The minutes are = 15
The seconds are = 45

在上面的程式碼中，使用了許多內建的 get 方法。正如名稱描述它們的功能一樣，每個方法都會相應地返回值。

同樣，如果缺少任何值，將在輸出中列印預設值。獲取日期和時間還有許多其他內建方法。

在 TypeScript 中使用 `set` 方法設定日期和時間

如果使用者想要為特定實體設定新值，而不是再次例項化 Date 物件，set 方法可以提供幫助。

例子：

let myDate: Date = new Date(2018, 9, 2, 12, 15, 45);
console.log('My date and time is = ' + myDate);

myDate.setFullYear(2020);
myDate.setMonth(7);
myDate.setDate(19);
myDate.setHours(16);
myDate.setMinutes(33);
myDate.setSeconds(12);

console.log('My updated date and time is = ' + myDate);

輸出：

My date and time is = Tue Oct 02 2018 12:15:45 GMT+0000 (Country Standard Time)
My updated date and time is = Wed Aug 19 2020 16:33:12 GMT+0000 (Country Standard Time)

請注意上例中先前和更新的日期和時間之間的差異。還有許多其他內建方法可以用來設定我們可以使用的日期和時間。