JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中獲取月份和日期的名稱

簡介

約會是我們日常生活的常規部分,我們通常都知道一天,或者至少在任何特定時間點我們所處的月份。這被證明是一個很好的時間參考點,顯示月份或日期的名稱可以幫助用戶了解何時 ,相對於他們目前的狀態,某事已經發生或將要發生。

在 JavaScript 中,我們可以通過多種方式實現這一點。

重要的是要注意,如果您正在處理一個小項目,開始為一些基本的東西安裝包可能會令人沮喪。小項目應該使用 JavaScript 的內置方法來實現,只有在必要時才應該引入依賴關係。

在 JavaScript 中獲取和顯示一天或一個月的名稱可以簡化為:

let now = new Date().toLocaleDateString('en-us', { weekday:"long", month:"long", day:"numeric"});
console.log(now)

這導致:

Friday, March 4

我們可以在這裡調整一些參數以獲得不同的結果和效果,值得注意的是如何 toLocaleDateString() 方法有效,以及可用的語言環境。您還可以從該方法中提取單數日期或月份名稱!

日期 JavaScript 中的對象

Date object 是一種內置數據類型,用於處理 dates . Date 對像是使用 new 創建的 關鍵字,即 new Date() 提供了許多用於格式化和管理數據的內置方法。

默認情況下,一個新的 Date 實例不帶任何參數,創建一個對應當前日期和時間的對象(即根據計算機的系統設置):

let dateTime = new Date();
console.log(dateTime); // Mon Mar 07 2022 18:07:01 GMT+0100 (Central European Standard Time)

現在,我們來看看如何提取day 從這個輸出中,得到他們的名字!

從 JavaScript 的日期對像中獲取日期

有多種方法可以從 Date 中提取日期 目的。我們使用了 toLocaleString() 在介紹中 - 但您也可以使用 getDay() 提取確切的字段 !

使用 getDay() 方法

getDay() 返回該 Date 的星期幾(一個表示一周中的一天的數字,介於 0 和 6 之間) 對象:

// Get current day
let day = new Date().getDay();
console.log(day); //6

// Get day in the week of a certain date
let day = new Date("October 14, 2020 09:38:00").getDay();
console.log(day); //3

充分了解一周中有 7 天,我們可以簡單地將一周中的天數映射到 inedx!但是,值得注意的是一周中的天數從星期日開始 並在星期六結束 :

Sunday=0, 
Monday=1, 
Tuesday=2,
...,
Saturday=6.

讓我們按照預期的順序創建一個星期的名稱數組,並根據 getDay() 返回的索引(星期幾)獲取名稱 :

let daysArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let day = new Date().getDay();
let dayName = daysArray[day];
console.log(dayName); // "Saturday"

如果您在多個場合使用該邏輯,您還可以將此功能包裝在可調用函數中:

const getDayName = (dayIndex) =>{
    let daysArray = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    return daysArray[dayIndex];
}
  
const dayName = getDayName(new Date().getDay());
console.log(dayName); // "Saturday"

使用 toLocaleDateString() 方法

為您執行索引邏輯的更直接的方法是 toLocaleDateString() !此外,它還為您定義的語言環境提供格式選項,因此您可以根據用戶的位置動態調整格式。

此方法有四個基本選項 - weekday , year , monthday ,並允許我們將日期名稱設置為更長或更短:

let dayName = new Date().toLocaleDateString('en-us', { weekday:"long"})
console.log(dayName); // "Saturday"
  
let dayNameSt = new Date().toLocaleDateString('en-us', { weekday:"short"})
console.log(dayNameSt); // "Sat"

從 JavaScript 的日期對像中獲取月份

到目前為止,我們已經能夠看到如何獲得這一天,我知道你正在猜測這個月的工作方式。說實話,你們中的大多數人(如果不是所有人)都會做對的。我們會像白天一樣使用這兩種方法,但只需更改一點語法。

使用getMonth() 方法

getMonth() 方法是另一個Date 方法,就是 getDay() 返回一個整數 - 返回月份的索引,由 Date 表示 實例。返回的月份將在 0..11 之間 ,從一月開始 並在 12 月結束

let month = new Date().getMonth();
console.log(month); // 2

let month = new Date("October 14, 2020 09:38:00").getMonth();
console.log(month); // 9

讓我們定義一個月份名稱數組,並根據返回值訪問適當的名稱:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

let monthsArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let month = new Date().getMonth();
let monthName = monthsArray[month];
console.log(monthName); // "March"

我們還可以決定通過創建一個可以在應用程序的任何位置輕鬆調用的函數來使其可重用:

 const getMonthName = (monthIndex) =>{
        let monthsArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        return monthsArray[monthIndex];
}
  
const monthName = getMonthName(new Date().getMonth());
console.log(monthName); // "March"

使用 toLocaleDateString() 方法

同樣,toLocaleDateString() 方法格式化 Date 轉成字符串,顯示我們感興趣的字段,並根據配置對象進行格式化:

let monthName = new Date().toLocaleDateString('en-us', { month:"long"})
console.log(monthName); // "March"
  
let monthNameSt = new Date().toLocaleDateString('en-us', { month:"short"})
console.log(monthNameSt); // "Mar"

使用 JavaScript 庫

我們還可以介紹如何使用 Moment.js 來實現這一點 ,一個流行的 JavaScript 庫,存在於許多項目中。

Moment.js

Moment.js 被廣泛認為是最好的 JavaScript 日期時間包之一,這是有充分理由的。它使用起來非常簡單,有大量文檔,而且只有 20kb 大小(縮小,壓縮)!

如何使用 Moment.js 獲取日期名稱

Moment.js 讓獲取日期或月份的名稱變得輕而易舉 - 我們只需 format() 一個約會! 'ddd' signifier 將日期名稱格式化為短名稱,而 'dddd' 將其格式化為長格式:

// Get current date
var date = moment();

var dayName = date.format('ddd');
console.log(dayName); // "Sat"

var dayName = date.format('dddd');
console.log(dayName); // "Saturday"

如何使用 Moment.js 獲取月份名稱

同樣的邏輯也適用於月份名稱:

var date = moment();
var monthName = date.format('MMM');
console.log(monthName); // "Mar"
  
var monthName = date.format('MMMM');
console.log(monthName); // "March" 

結論

在本指南中,我們介紹瞭如何在 JavaScript 中以人類友好的格式獲取日期的日期和月份的名稱。

我們已經介紹了 getDay() , getMonth() , toLocaleString() 方法,以及 Moment.js,它簡化了流程。


Tutorial JavaScript 教程
  1. 使用 Quasar 框架和 GraphQL 構建響應式跨平台 Vue 應用程序

  2. JavaScript / 谷歌地圖中的磁偏角

  3. 在 Rails 6.1.4 中使用 Javascript 創建動態相關下拉列表

  4. 如何使用 HTML 和 JavaScript 執行表單驗證

  5. Twitter 上從 0 到 100 個關注者。我如何增加我的開發者帳戶🥳

  6. 如何使用 Prototype JS 在某個 div 之後添加 html?

  7. 一切 JavaScript 數組和數組方法!

  1. 2021 年 JavaScript 狀態調查中的新內容

  2. 消除渲染阻塞資源的 9 個技巧

  3. 使用無服務器在 AWS Lambda 上部署 Django 項目(第 4 部分)

  4. 在 PHP 項目中編譯 SCSS 和 JS

  5. 調試 TypeError:X 不是 JavaScript 中的函數

  6. 可以在javascript中未定義已定義變量的類型嗎?

  7. 將樹遍曆算法應用於 DOM

  1. 為 GraphQL 請求提供更好的 DX

  2. Formik Material UI:使用 Formik、Material-UI 和 Yup 的 React Form。

  3. 使用 Express Routing 優化 Nodejs 代碼結構

  4. 在 Airtable 上構建 AWS Lambda 函數的完整教程