TypeScript - 日期物件



在 TypeScript 中,'Date' 物件是一個內建物件,允許開發人員建立和管理日期和時間。它直接繼承自 JavaScript,因此包含與 JavaScript 中的 Date 物件相同的方法。但是,您需要確保 TypeScript 中 Date 物件的型別和 Date 方法的返回值型別。

語法

您可以按照以下語法在 TypeScript 中使用 Date 物件。

let date: Date = new Date(); // Date Constructor
// OR
date = new Date(milliseconds); // Passes milliseconds
// OR
date = new Date(date_String); // Passes date string
// OR
date = new Date(year, month, day, hour, minute, second, milli_second); 

在上面的語法中,我們解釋了使用 Date() 建構函式的 4 種不同方法,它們接受不同的引數。

引數

  • milliseconds:它是自 1971 年 1 月 1 日以來的毫秒總數。

  • date_String:它是一個日期字串,包含年份、月份、日期等。

  • year, month, day, hour, minute, second, milli_second:Date() 建構函式根據這些引數建立一個新的日期。

返回值

Date 建構函式根據傳遞的引數返回日期字串。如果我們不傳遞任何引數,它將返回帶有當前時間的日期字串。

示例

讓我們透過一些 TypeScript 示例來進一步瞭解日期物件。

示例:建立新的日期

在下面的程式碼中,首先,我們使用 Date() 建構函式建立了一個日期,並且沒有傳遞任何引數。它返回當前日期和時間。

接下來,我們傳遞了毫秒作為引數,它根據毫秒總數返回日期。

接下來,我們將日期字串格式作為 Date() 建構函式的引數傳遞,它根據日期字串返回一個新日期。

接下來,我們將年份、月份、日期等作為 Date() 建構函式的單獨引數傳遞,它使用這些引數建立一個新的日期字串。

let date: Date = new Date(); // Date Constructor
console.log(date); // Output: Current Date and Time

date = new Date(10000000000); // Passes milliseconds
console.log(date); // Output: 1970-04-26T17:46:40.000Z

date = new Date('2020-12-24T10:33:30'); // Passes date string
console.log(date); // Output: 2020-12-24T10:33:30.000Z

date = new Date(2020, 11, 24, 10, 33, 30, 0); // Passes year, month, day, hour, minute, second, millisecond
console.log(date); // Output: 2020-12-24T10:33:30.000Z

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

let date = new Date(); // Date Constructor
console.log(date); // Output: Current Date and Time

date = new Date(10000000000); // Passes milliseconds
console.log(date); // Output: 1970-04-26T17:46:40.000Z

date = new Date('2020-12-24T10:33:30'); // Passes date string
console.log(date); // Output: 2020-12-24T10:33:30.000Z

date = new Date(2020, 11, 24, 10, 33, 30, 0); // Passes year, month, day, hour, minute, second, millisecond
console.log(date); // Output: 2020-12-24T10:33:30.000Z

輸出

上述示例程式碼的輸出將顯示當前日期和提供的自定義日期。

示例:訪問日期和時間元件

您可以使用 getFullYear() 方法從日期字串中獲取年份。類似地,getMonth() 和 getDate() 方法分別用於從日期字串中獲取月份和日期。

let someDate = new Date();
console.log(`Year: ${someDate.getFullYear()}`);  // Outputs current year
console.log(`Month: ${someDate.getMonth()}`);    // Outputs current month (0-indexed)
console.log(`Day: ${someDate.getDate()}`);       // Outputs current day

編譯後,它將生成相同的 JavaScript 程式碼。

let someDate = new Date();
console.log(`Year: ${someDate.getFullYear()}`);  // Outputs current year
console.log(`Month: ${someDate.getMonth()}`);    // Outputs current month (0-indexed)
console.log(`Day: ${someDate.getDate()}`);       // Outputs current day

輸出

上述示例程式碼的輸出將顯示當前日期的年份、月份和日期。

示例:向當前日期新增天數

我們可以使用不同的方法來操作日期字串。這裡,我們使用了 setDate() 方法將日期字串中的天數增加 7 天。

getDate() 方法返回日期,我們向其新增 7。然後,我們將新的一天傳遞給 setDate() 方法的引數。

setDate() 方法會自動管理更改月份或年份。例如,如果當前日期是 30,並且您想向其新增 7 天,它將返回帶有下一月的新日期。

let date = new Date();
date.setDate(date.getDate() + 7);  // Adds 7 days to the current date
console.log(date);  // Outputs the date 7 days in the future

編譯後,它將生成相同的 JavaScript 程式碼。

let date = new Date();
date.setDate(date.getDate() + 7);  // Adds 7 days to the current date
console.log(date);  // Outputs the date 7 days in the future

輸出

它的輸出將顯示比當前日期早七天的日期。

示例:格式化日期

我們可以使用不同的選項來格式化日期字串。這裡,我們使用了 DateTimeFormatOptions() 方法來格式化日期字串。

它將 'en-US' 作為第一個引數,這是一個國家程式碼,並將選項物件作為第二個引數。選項物件包含星期幾、年份、月份和日期的格式詳細資訊。

let today = new Date();
let options: Intl.DateTimeFormatOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let formattedDate = new Intl.DateTimeFormat('en-US', options).format(today);
console.log(formattedDate);  // E.g., 'Tuesday, April 27, 2024'

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

let today = new Date();
let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let formattedDate = new Intl.DateTimeFormat('en-US', options).format(today);
console.log(formattedDate); // E.g., 'Tuesday, April 27, 2024'

輸出

上述示例程式碼的輸出將生成以美國格式格式化的今天日期。

示例:處理時區

這裡,我們在下面的程式碼中處理不同的時區。首先,我們使用 Date 物件的 UTC() 方法根據 UTC 建立日期,並將其作為 Date() 建構函式的引數傳遞。

接下來,我們使用 toLocaleString() 方法根據時區更改日期字串。toLocaleString() 方法將國家程式碼作為第一個引數,並將包含 timeZone 屬性的物件作為第二個引數。

let utcDate = new Date(Date.UTC(2024, 0, 1, 0, 0, 0));
console.log(utcDate.toISOString());  // Outputs '2024-01-01T00:00:00.000Z'
console.log(utcDate.toLocaleString('en-US', { timeZone: 'America/New_York' }));  // Adjusts to Eastern Time

編譯後,它將生成相同的 JavaScript 程式碼。

let utcDate = new Date(Date.UTC(2024, 0, 1, 0, 0, 0));
console.log(utcDate.toISOString());  // Outputs '2024-01-01T00:00:00.000Z'
console.log(utcDate.toLocaleString('en-US', { timeZone: 'America/New_York' }));  // Adjusts to Eastern Time

輸出

其輸出如下:

2024-01-01T00:00:00.000Z
12/31/2023, 7:00:00 PM

TypeScript 中的 Date 物件繼承自 JavaScript,提供了一套全面的功能來管理日期和時間。透過有效地利用 Date 物件,開發人員可以執行各種日期和時間操作,這對於依賴時間資料的應用程式至關重要。

廣告