在 JavaScript 中以 12 小時 AM/PM 格式顯示日期時間

1. 在 JavaScript 中通過建立自己的函式方法以 12 小時 AM/PM 格式顯示日期時間
2. 使用 JavaScript 中的 Date.prototype.toLocaleString 方法以 12 小時 AM/PM 格式顯示 DateTime
3. 使用 JavaScript 中的 Date.prototype.toLocaleTimeString 方法以 12 小時 AM/PM 格式顯示日期時間
4. 使用 JavaScript 中的 moment.js 方法以 12 小時 AM/PM 格式顯示日期時間
5. まとめ

在 JavaScript 中，24 小時格式用作日期時間的預設值。我們還可以使用幾種不同的方法以 12 小時 AM/PM 格式顯示日期時間。

在本教程中，我們將探索這些方法。12 小時制時間將以小時、分鐘和秒 (HH:MM:SS) 格式顯示，帶有 AM/PM。

在 JavaScript 中通過建立自己的函式方法以 12 小時 AM/PM 格式顯示日期時間

將 JavaScript 日期時間格式化為 12 小時 AM/PM 格式的第一種方法是建立函式。

首先，在這種方法中僅使用本機方法來更改日期時間格式。為了以通俗易懂的方式說明這一點，請使用以下示例：應用模% 運算子來查詢 12 小時格式的日期時間並使用條件 ? 運營商申請上午或下午。

例子：

const formatAMPM = (date) => {
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12;
    minutes = minutes.toString().padStart(2, '0');
    let strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
}

console.log(formatAMPM(new Date(2022, 1, 1)));

你有 formatAMPM 函式，它將 JavaScript date 物件作為引數。呼叫 getHours 獲取函式中 24 小時格式的小時數，呼叫 minutes 獲取分鐘數。

然後，建立 ampm 變數並根據小時的值將其設定為 am 或 pm。使用 % 運算子將小時更改為 12 小時格式，以獲得除以 12 的餘數。

接下來，使用 toString() 函式將分鐘轉換為字串，然後使用 padStart 函式將字串填充為 0，如果它只有一個數字。最後，使用 strTime 將所有內容聯絡在一起。

輸出：

使用 JavaScript 中的 Date.prototype.toLocaleString 方法以 12 小時 AM/PM 格式顯示 DateTime

你將使用的第二種方法是 Date.prototype.toLocaleString 方法。此方法使使用者更容易將日期時間格式化為 AM/PM 格式。

在此方法中，你將利用稱為 toLocaleString 函式的內建函式來更改給定日期的格式。toLocaleString(): 將返回日期物件的字串表示形式。

Locale 和 options, 這兩個引數允許自定義方法的行為。

例子：

const str = new Date(2022, 1, 1).toLocaleString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
})
console.log(str);

使用 locale、object 和一些選項在你的日期物件上呼叫 toLocaleString 函式。小時 設定為數字以數字格式顯示小時。

這與分鐘相同。然後，hour12 以 12 小時格式顯示小時數。

輸出：

使用 JavaScript 中的 Date.prototype.toLocaleTimeString 方法以 12 小時 AM/PM 格式顯示日期時間

你可以使用的第三種方法是 Date.prototype.toLocaleTimeString 方法。此方法將用 toLocaleTimeString 替換 toLocaleString 並將為你提供與 toLocaleString 函式相同的結果。

例子：

const str = new Date(2022, 1, 1).toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: 'numeric',
    hour12: true
})
console.log(str);

輸出：

使用 JavaScript 中的 moment.js 方法以 12 小時 AM/PM 格式顯示日期時間

你可以使用的第四種方法是 moment.js 方法。此方法將日期物件格式化為 12 小時 AM/PM 格式。

為此，你將首先呼叫 format 方法。

其中，

• a 新增 AM/PM
• hh 是兩位數小時的格式程式碼；
• mm 是兩位數分鐘的格式程式碼。

例子：

const str = moment(new Date(2022, 1, 1)).format('hh:mm a')
console.log(str);

輸出：

まとめ

在本文中，你學習了各種方法，例如建立我們的函式 Date.prototype.toLocaleString、Date.prototype.toLocaleTimeString 和 moment.js，它們可以以 12 小時 AM/PM 格式顯示 JavaScript 日期時間。所有這些方法都同樣適用，可以很容易地使用。