Hvordan formaterer man en dato i JavaScript?

I denne artikel lærer vi om de forskellige måder at formatere et Date-objekt på til forskellige datostrenge i forskellige formater ved hjælp af JavaScript.

Vi vil se metoderne til at formatere Dato-objekter til forskellige datostrenge med forskellige formater ved hjælp af JavaScript. Uanset om du bygger en webapplikation, manipulerer data eller blot viser datoer, vil beherskelse af disse teknikker give dig mulighed for at præsentere datoer i det format, der passer bedst til dine behov. Lad os udforske alsidigheden af ​​datoformatering i JavaScript.

Nedenstående liste indeholder de forskellige måder at formatere Dato på i JavaScript:

Indholdsfortegnelse

Metode 1: Brug af toDateString() metoden

Det toDateString() metode formaterer datoobjektet til et menneskelæsbart format som Dag Måned Dato År.

Syntaks:

dateObj.toDateString(); 

Eksempel: Nedenstående kodeeksempel forklarer brugen af ​​metoden toDateString() til at formatere datoen.

Javascript
const currentDate = new Date(); const formattedDate = currentDate.toDateString(); console.log(formattedDate); 

Produktion
Fri Dec 29 2023 

Metode 2: Brug af toISOString() metoden

Det toISOString() metode vil formatere dataene til de internationale standarder efter ISO 8601-formatet.

Syntaks:

dateObj.toISOString(); 

Eksempel: Nedenstående kodeeksempel implementerer toISOString()-metoden til at formatere datoobjektet.

Javascript
const currentDate = new Date(); const formattedDate = currentDate.toISOString(); console.log(formattedDate); 

Produktion
2023-12-29T09:39:27.634Z 

Metode 3: Brug af toLocaleDateString() metoden

toLocaleDateString() metode vil formatere datodelen af ​​datoobjektet til det samme format som erhvervet af dit system eller i det angivne format.

Syntaks:

dateObj.toLocaleDateString();

Eksempel: Nedenstående kodeeksempel konverterer datoen til det format, der er erhvervet af dit system.

Javascript
const currentDate = new Date(); const formattedLocalDate = currentDate.toLocaleDateString(); const formattedInSpecifiedFormat = currentDate.toLocaleDateString("hi-IN"); console.log(formattedLocalDate); console.log(formattedInSpecifiedFormat); 

Produktion
12/29/2023 29/12/2023 

Metode 4: Brug af toLocaleString() metoden

toLocaleString() metode vil fungere på samme måde som toLocaleDateString() virker. Den eneste forskel er, at den også returnerer tiden med den formaterede streng.

Syntaks:

dateObj.toLocaleString();

Eksempel: Eksemplet nedenfor bruger metoden toLocaleString() til at formatere datoen.

Javascript
const currentDate = new Date(); const formattedLocalDate = currentDate.toLocaleString(); const formattedInSpecifiedFormat = currentDate.toLocaleString("hi-IN"); console.log(formattedLocalDate); console.log(formattedInSpecifiedFormat); 

Produktion
12/29/2023, 9:39:27 AM 29/12/2023, 9:39:27 am 

Metode 5: Brug af Intl.DateTimeFormat()-objektmetoden

Intl.DateTimeFormat() objektmetode er en kraftfuld objektmetode til at formatere datoobjektet. Den formaterer datoen til specificeret format og med de angivne muligheder for formatering af dato og klokkeslæt.

Syntaks:

const formatObj = new Intl.DateTimeFormat('en-US'); formatObj.format(dateObj); 

Eksempel: Eksemplet nedenfor formaterer datoobjektet ved hjælp af intl.DateTimeFormat()-objektmetoden.

Javascript
const currentDate = new Date(); const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {dateStyle: 'long'}); const formattedDate = dateTimeFormatter.format(currentDate); console.log(formattedDate); 

Produktion
December 29, 2023 

Metode 6: Formater dato manuelt ved hjælp af datometoder

I denne tilgang vil vi bruge de forskellige datometoder til at få datoen, datoen, måneden og året for datoobjektet og derefter sammenkæde dem for at danne en formateret datostreng.

Eksempel: Nedenstående kodeeksempel bruger de forskellige datometoder til at få dato og formatere den.

Javascript
const weekDays =  ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const monthsArr =  ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const currentDateObj = new Date(); const currentDay = weekDays[currentDateObj.getDay()]; const currentDate = currentDateObj.getDate(); const currentMonth = monthsArr[currentDateObj.getMonth()]; const currentYear = currentDateObj.getFullYear(); console.log(`${currentDay} ${currentDate} ${currentMonth}, ${currentYear}`); 

Produktion
Fri 29 Dec, 2023