JavaScript 日期和時間的格式化

yuzhihui發表於2023-02-17

一、日期和時間的格式化

1、原生方法

1.1、使用 toLocaleString 方法

Date 物件有一個 toLocaleString 方法,該方法可以根據本地時間和地區設定格式化日期時間。例如:

const date = new Date();
console.log(date.toLocaleString('en-US', { timeZone: 'America/New_York' })); // 2/16/2023, 8:25:05 AM
console.log(date.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })); // 2023/2/16 上午8:25:05

toLocaleString 方法接受兩個引數,第一個引數是地區設定,第二個引數是選項,用於指定日期時間格式和時區資訊。

1.2、使用 Intl.DateTimeFormat 物件

Intl.DateTimeFormat 物件是一個用於格式化日期和時間的建構函式。可以使用該物件來生成一個格式化日期時間的例項,並根據需要來設定日期時間的格式和時區。例如:

const date = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
});
console.log(formatter.format(date)); // 2/16/2023, 8:25:05 AM

可以在選項中指定需要的日期時間格式,包括年、月、日、時、分、秒等。同時也可以設定時區資訊。

2、使用字串操作方法

可以使用字串操作方法來將日期時間格式化為特定格式的字串。例如:

const date = new Date();
const year = date.getFullYear().toString().padStart(4, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hour = date.getHours().toString().padStart(2, '0');
const minute = date.getMinutes().toString().padStart(2, '0');
const second = date.getSeconds().toString().padStart(2, '0');
console.log(`${year}-${month}-${day} ${hour}:${minute}:${second}`); // 2023-02-16 08:25:05

以上程式碼使用了字串模板和字串操作方法,將日期時間格式化為 YYYY-MM-DD HH:mm:ss 的格式。可以根據實際需要來修改格式。

3、自定義格式化函式

3.1、不可指定格式的格式化函式

可以編寫自定義函式來格式化日期時間。例如:

function formatDateTime(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`;
}

function pad(num) {
  return num.toString().padStart(2, '0');
}

const date = new Date();
console.log(formatDateTime(date)); // 2023-02-16 08:25:05

以上程式碼定義了一個 formatDateTime 函式和一個 pad 函式,用於格式化日期時間並補齊數字。可以根據需要修改格式,因此通用性較低

3.2、可指定格式的格式化函式

下面是一個通用較高的自定義日期時間格式化函式的示例:

function formatDateTime(date, format) {
  const o = {
    'M+': date.getMonth() + 1, // 月份
    'd+': date.getDate(), // 日
    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小時
    'H+': date.getHours(), // 小時
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    S: date.getMilliseconds(), // 毫秒
    a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
    A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
  };
  if (/(y+)/.test(format)) {
    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      );
    }
  }
  return format;
}

這個函式接受兩個引數,第一個引數是要格式化的日期時間,可以是 Date 物件或表示日期時間的字串,第二個引數是要格式化的格式,例如 yyyy-MM-dd HH:mm:ss。該函式會將日期時間格式化為指定的格式,並返回格式化後的字串。

該函式使用了正規表示式來匹配格式字串中的佔位符,然後根據對應的日期時間值來替換佔位符。其中,y 會被替換為年份,M、d、h、H、m、s、q、S、a、A 分別表示月份、日期、小時(12 小時制)、小時(24 小時制)、分鐘、秒、季度、毫秒、上午/下午、AM/PM。

使用該函式進行日期時間格式化的示例如下:

const date = new Date();
console.log(formatDateTime(date, 'yyyy-MM-dd HH:mm:ss')); // 2023-02-16 08:25:05
console.log(formatDateTime(date, 'yyyy年MM月dd日 HH:mm:ss')); // 2023年02月16日 08:25:05
console.log(formatDateTime(date, 'yyyy-MM-dd HH:mm:ss S')); // 2023-02-16 08:25:05 950
console.log(formatDateTime(date, 'yyyy-MM-dd hh:mm:ss A')); // 2023-02-16 08:25:05 上午

可以根據實際需要修改格式化的格式,以及支援更多的佔位符和格式化選項。

4、使用第三方庫

除了原生的方法外,還有很多第三方庫可以用來格式化日期時間,例如 Moment.js 和 date-fns 等。這些庫提供了更多的日期時間格式化選項,並且可以相容不同的瀏覽器和環境

const date = new Date();
console.log(moment(date).format('YYYY-MM-DD HH:mm:ss')); // 2023-02-16 08:25:05
console.log(dateFns.format(date, 'yyyy-MM-dd HH:mm:ss')); // 2023-02-16 08:25:05

 

以上是幾種常用的日期時間格式化方法,在進行日期時間格式化時,可以使用原生的方法、自定義函式或第三方庫,選擇合適的方法根據實際需要進行格式化。

二、日期和時間的其它常用處理方法

1、建立 Date 物件

要建立一個 Date 物件,可以使用 new Date(),不傳入任何引數則會使用當前時間。也可以傳入一個日期字串或毫秒數,例如:

const now = new Date(); // 當前時間
const date1 = new Date("2022-01-01"); // 指定日期字串
const date2 = new Date(1640995200000); // 指定毫秒數

2、日期和時間的獲取

Date 物件可以透過許多方法獲取日期和時間的各個部分,例如:

const date = new Date();
const year = date.getFullYear(); // 年份,例如 2023
const month = date.getMonth(); // 月份,0-11,0 表示一月,11 表示十二月
const day = date.getDate(); // 日期,1-31
const hour = date.getHours(); // 小時,0-23
const minute = date.getMinutes(); // 分鐘,0-59
const second = date.getSeconds(); // 秒數,0-59
const millisecond = date.getMilliseconds(); // 毫秒數,0-999
const weekday = date.getDay(); // 星期幾,0-6,0 表示週日,6 表示週六

3、日期和時間的計算

可以使用 Date 物件的 set 方法來設定日期和時間的各個部分,也可以使用 get 方法獲取日期和時間的各個部分,然後進行計算。例如,要計算兩個日期之間的天數,可以先將兩個日期轉換成毫秒數,然後計算它們之間的差值,最後將差值轉換成天數,例如:

const date1 = new Date("2022-01-01");
const date2 = new Date("2023-02-16");
const diff = date2.getTime() - date1.getTime(); // 毫秒數
const days = diff / (1000 * 60 * 60 * 24); // 天數

4、日期和時間的比較

可以使用 Date 物件的 getTime() 方法將日期轉換成毫秒數,然後比較兩個日期的毫秒數大小,以確定它們的順序。例如,要比較兩個日期的先後順序,可以將它們轉換成毫秒數,然後比較它們的大小,例如:

const date1 = new Date("2022-01-01");
const date2 = new Date("2023-02-16");
if (date1.getTime() < date2.getTime()) {
  console.log("date1 在 date2 之前");
} else if (date1.getTime() > date2.getTime()) {
  console.log("date1 在 date2 之後");
} else {
  console.log("date1 和 date2 相等");
}

5、日期和時間的操作

可以使用 Date 物件的一些方法來進行日期和時間的操作,例如,使用 setDate() 方法設定日期,使用 setHours() 方法設定小時數,使用 setTime() 方法設定毫秒數等等。例如,要將日期增加一天,可以使用 setDate() 方法,例如:

const date = new Date();
date.setDate(date.getDate() + 1); // 增加一天
console.log(date.toLocaleDateString()); // 輸出增加一天後的日期

6、獲取上週、本週、上月和本月的開始時間和結束時間

以下是 JavaScript 獲取本週、上週、本月和上月的開始時間和結束時間的程式碼示例:

// 獲取本週的開始時間和結束時間
function getThisWeek() {
  const now = new Date();
  const day = now.getDay() === 0 ? 7 : now.getDay(); // 將週日轉換為 7
  const weekStart = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day + 1);
  const weekEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (6 - day) + 1);
  return { start: weekStart, end: weekEnd };
}

// 獲取上週的開始時間和結束時間
function getLastWeek() {
  const now = new Date();
  const day = now.getDay() === 0 ? 7 : now.getDay(); // 將週日轉換為 7
  const weekStart = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day - 6);
  const weekEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day);
  return { start: weekStart, end: weekEnd };
}

// 獲取本月的開始時間和結束時間
function getThisMonth() {
  const now = new Date();
  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
  const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  return { start: monthStart, end: monthEnd };
}

// 獲取上月的開始時間和結束時間
function getLastMonth() {
  const now = new Date();
  const monthStart = new Date(now.getFullYear(), now.getMonth() - 1, 1);
  const monthEnd = new Date(now.getFullYear(), now.getMonth(), 0);
  return { start: monthStart, end: monthEnd };
}

上述程式碼中,getThisWeek()、getLastWeek()、getThisMonth() 和 getLastMonth() 函式分別返回當前時間所在的本週、上週、本月和上月的開始時間和結束時間。這些函式使用了 Date 物件的方法,例如 getFullYear()、getMonth() 和 getDate() 等。它們可以用於獲取需要進行時間區間計算的場景,例如統計某個時間範圍內的資料等。

使用這些函式獲取時間區間的示例:

const thisWeek = getThisWeek();
console.log(thisWeek.start); // 本週的開始時間
console.log(thisWeek.end); // 本週的結束時間

const lastWeek = getLastWeek();
console.log(lastWeek.start); // 上週的開始時間
console.log(lastWeek.end); // 上週的結束時間

const thisMonth = getThisMonth();
console.log(thisMonth.start); // 本月的開始時間
console.log(thisMonth.end); // 本月的結束時間

const lastMonth = getLastMonth();
console.log(lastMonth.start); // 上月的開始時間
console.log(lastMonth.end); // 上月的結束時間

使用這些函式可以方便地獲取需要的時間區間,並進行後續的操作。

7、根據出生日期計算年齡

以下是一個根據出生日期計算年齡的程式碼示例,包括了對閏年的處理:

function calculateAge(birthDate) {
  const birthYear = birthDate.getFullYear();
  const birthMonth = birthDate.getMonth();
  const birthDay = birthDate.getDate();
  const now = new Date();
  let age = now.getFullYear() - birthYear;
  
  if (now.getMonth() < birthMonth || (now.getMonth() === birthMonth && now.getDate() < birthDay)) {
    age--;
  }
  
  // 檢查閏年
  const isLeapYear = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
  const isBirthLeapYear = isLeapYear(birthYear);
  
  // 調整閏年的年齡
  if (isBirthLeapYear && birthMonth > 1) {
    age--;
  }
  
  if (isLeapYear(now.getFullYear()) && now.getMonth() < 1) {
    age--;
  }
  
  return age;
}

這個函式接收一個 Date 物件作為引數,代表出生日期。該函式計算當前日期與出生日期之間的時間差,以確定年齡。其中,使用 Date 物件的 getFullYear()、getMonth() 和 getDate() 方法獲取出生日期的年、月和日。使用當前日期的年、月和日計算出年齡。如果當前月份小於出生月份,或當前月份等於出生月份但當前日期小於出生日期,則年齡減一。在這個函式中,定義了一個 isLeapYear() 函式,用於檢查給定的年份是否為閏年。然後,在計算年齡時,呼叫這個函式,檢查出生年份和當前年份是否為閏年。如果出生年份為閏年且出生月份在二月或之後,則年齡減一。如果當前年份為閏年且當前月份在一月或之前,則年齡減一。這樣,就可以正確計算含有閏年的出生日期的年齡了。

這種計算年齡的方法僅是基於當前日期和出生日期之間的時間差,而不是考慮具體的月份和日期。因此,對於生日還未到的人,計算的年齡會比實際年齡小一歲。

使用這個函式計算年齡的示例:

const birthDate = new Date("1990-01-01");
const age = calculateAge(birthDate);
console.log(age); // 33

上述程式碼中,構造了一個 Date 物件,它代表出生日期。然後呼叫 calculateAge() 函式,將出生日期作為引數傳入。該函式返回當前日期與出生日期之間的時間差,以確定年齡。最後列印計算出的年齡。

8、其他相關的知識點

 在使用 Date 物件時,需要注意以下幾點:

  • 月份從 0 開始,0 表示一月,11 表示十二月;
  • getDate() 方法返回的是日期,而 getDay() 方法返回的是星期幾;
  • Date 物件的年份是完整的四位數,例如 2023;
  • 使用 new Date() 建立 Date 物件時,返回的是當前時區的時間,如果需要使用 UTC 時間,可以使用 new Date(Date.UTC())。

 

JavaScript 中的 Date 物件提供了許多方法和屬性,可以用於處理日期和時間,根據具體情況選擇適合的方法和技巧。

 

相關文章