在 JavaScript 中獲取月份名稱

  2. 貼士文章
  3. JavaScript 貼士
  4. 在 JavaScript 中獲取月份名稱
Nithin Krishnan 2023年10月12日
JavaScript JavaScript DateTime
  1. 在 JavaScript 中使用 toLocaleString 函式
  2. 在 JavaScript 中使用 Intl.DateTimeFormat 物件
  3. 在 JavaScript 中使用自定義程式碼從一個給定的日期中獲取月份名稱
在 JavaScript 中獲取月份名稱

在 JavaScript 中，我們有一個日期物件的 getMonth() 方法。它返回從 0 開始的一個月的索引。但現實世界場景中的大多數應用程式都要求本月使用字母名稱，以便終端使用者更容易閱讀。編寫程式碼來表示給定月份索引的月份名稱可能很困難。讓我們看看在 JavaScript 中獲取月份名稱的幾種方法。

在 JavaScript 中使用 toLocaleString 函式

我們可以使用 javascript 的 toLocaleString 函式從日期物件中獲取月份名稱。它提供了以 toLocaleString 函式支援的給定語言返回月份名稱的選項。

toLocaleString 函式的語法

toLocaleString()
toLocaleString(locales)
toLocaleString(locales, options)

引數：

該函式通常在不帶任何引數的情況下使用來獲取日期字串。toLocaleString 接受兩個可選引數，第一個是語言鍵（例如，en-US 代表英語，ar-EG 代表阿拉伯語等），第二個是作為 options 傳遞的一組配置選項。options 是一個物件。

返回型別：

toLocaleString 以 MM/DD/YYYY, hh:mm:ss a 格式返回表示日期的字串值。a 表示 AM / PM

我們可以使用該函式來獲取月份名稱的長短形式。較長的顯示完整的月份名稱，而較短的僅列出輸出中月份名稱的前三個字元。用法如下。

const dateObj = new Date('1-1-2021');
const dateString = dateObj.toLocaleString();
const enDateString = dateObj.toLocaleString('en-US');
const monthNameLong = dateObj.toLocaleString('en-US', {month: 'long'});
const monthNameShort = dateObj.toLocaleString('en-US', {month: 'short'});
console.log(dateString);
console.log(enDateString);
console.log(monthNameLong);
console.log(monthNameShort);

輸出：

1/1/2021, 12:00:00 AM
1/1/2021, 12:00:00 AM
January
Jan

我們通過將 { month: 'long' } 作為 option 傳遞來獲得更長的月份名稱。對於較短的月份名稱，我們需要將月份配置設定為 short，如 { month: 'short' }。

注意

  • 所有瀏覽器都支援 toLocaleString，包括 Internet Explorer 瀏覽器。
  • 將日期字串輸出與在變數中儲存為字串的日期進行比較可能無法在瀏覽器中提供一致的結果。例如，以下程式碼在 Firefox 和 Internet Explorer 以及舊版本的 MS Edge 瀏覽器中的執行方式可能不同。
('1/5/2021, 6:00:00 PM' ===
 new Date('2021-01-05T12:30:00Z').toLocaleString('en-US')) ?
    true :
    false;

Chrome 中的輸出：

true

Internet Explorer 中的輸出：

false

這是因為 Internet Explorer 和舊版本的 Edge 在日期字串的開頭和結尾插入了控制字元。你可以嘗試在 chrome 和 Internet Explorer 中通過 new Date("2021-01-05T12:30:00Z").toLocaleString("en-US") 檢查字串輸出的長度以觀察差異。IE 將長度表示為 32，而 chrome 將其表示為 20。此外，IE 控制檯中第零位置的字元為""，而在 chrome 中，它給出了 "1"。

在 JavaScript 中使用 Intl.DateTimeFormat 物件

Intl.DateTimeFormat 返回一個 DateTimeFormat 物件。它有一個 format 函式，它將目標日期作為輸入，並根據我們設定的 options 對其進行格式化。它類似於 toLocaleString 函式。不同之處在於 toLocaleString 應用於資料型別為日期的物件。而在 Intl.DateTimeFormat 中，我們將日期作為引數傳遞給 format 函式。引數名稱因各種日期格式方案而異（有關更多詳細資訊，請參閱 MDN 文件）。所有瀏覽器都支援 Intl.DateTimeFormat。我們可以使用 Intl.DateTimeFormat 獲取月份的長短名稱，如下面的程式碼所示。

new Intl.DateTimeFormat('en-US', {month: 'short'})
    .format(new Date('1-1-2021')) new Intl
    .DateTimeFormat('en-US', {month: 'long'})
    .format(new Date('1-1-2021'))

輸出：

Jan
January

注意

  • Intl.DateTimeFormat 建構函式用於格式化日期。Intl.DateTimeFormat 在 date 物件的格式方面具有更大的靈活性。我們可以使用它來獲取本地語言的日期字串。它甚至支援在其 options 物件中提供後備語言的選項。
  • 所有網路瀏覽器都支援它，包括舊版本的 Internet Explorer。

在 JavaScript 中使用自定義程式碼從一個給定的日期中獲取月份名稱

如果我們不想使用上面兩個內建的 JavaScript 方法，我們可以編寫一個自定義程式碼來獲取相應日期的月份名稱。我們可以用各種方式編寫程式碼。我們可以使用兩個陣列：一個儲存長月份名稱，另一個儲存較短的月份名稱。但以下是使用月份名稱的單個陣列來返回全名和短名稱的簡潔高效的程式碼。讓我們看看下面的程式碼。

const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
  'September', 'October', 'November', 'December'
];

getLongMonthName =
    function(date) {
  return monthNames[date.getMonth()];
}

getShortMonthName =
    function(date) {
  return monthNames[date.getMonth()].substring(0, 3);
}

    console.log(getLongMonthName(new Date('1-1-2021')));
console.log(getShortMonthName(new Date('1-1-2021')));
console.log(getLongMonthName(new Date('11-5-2021')));
console.log(getShortMonthName(new Date('11-5-2021')));
console.log(getLongMonthName(new Date('12-8-2021')));
console.log(getShortMonthName(new Date('12-8-2021')));

輸出：

January
Jan
November
Nov
December
Dec

我們在上面的程式碼片段中使用了兩個函式：一個用於獲取全名，另一個用於獲取較短的名稱。

  • 我們編寫了 getLongMonthName() 函式，該函式將日期物件作為引數並返回與其對應的完整月份名稱。它使用 javascript 中的內建函式 getMonth()。日期物件的 getMonth() 函式返回月份索引。我們使用這個索引從儲存月份全名的 monthNames 陣列中獲取月份名稱。
  • 我們有 getShortMonthName 函式，它有一個額外的步驟來縮短月份名稱。它使用與 getLongMonthName 相同的邏輯。我們使用 javascript 的 substring() 函式將最終結果截斷為三個字元。因此，我們得到作為引數傳遞的日期的短月份名稱。
  • 我們可能需要修改 monthNames 陣列以支援一種以上的語言，以允許程式碼的本地化和國際化。我們可以使用不同的字串陣列來儲存各種語言的月份名稱。較短的月份名稱可能只是前三個字元，這可能並不總是正確的。每種語言都有其較短月份名稱的表示形式。因此，我們可能需要為此類語言使用兩個陣列：一個包含較長的月份名稱，另一個包含較短的月份名稱。getLongMonthName() 中的邏輯仍可用於獲取與作為引數傳遞的日期值對應的月份名稱。

相關文章 - JavaScript DateTime