2024-05-12

자바스크립트에서 날짜를 다루는 방법

javascript date formatting

자바스크립트에서 날짜 형식 지정하기

기본 날짜 형식

자바스크립트에서 날짜를 생성하면 기본적으로 다음과 같은 형식으로 표시됩니다.

Fri Jul 02 2021 14:44:45 GMT+0100 (British Summer Time)

이 형식은 읽기 어렵고 일관성이 없기 때문에 사용하기에 불편합니다. 따라서 날짜를 원하는 형식으로 표시하려면 날짜 형식 지정이 필요합니다.

날짜 형식 지정 방법

자바스크립트에서 날짜 형식을 지정하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 다음과 같습니다.

toLocaleString() 메서드는 브라우저의 기본 지역 설정에 따라 날짜를 문자열로 변환합니다. 예를 들어 다음 코드는 현재 날짜를 한국어 형식으로 표시합니다.

const date = new Date();
const formattedDate = date.toLocaleString('ko-KR');
console.log(formattedDate); // 2024년 5월 11일 토요일

toDateString() 메서드는 날짜를 다음과 같은 형식으로 문자열로 변환합니다.

YYYY-MM-DD

예를 들어 다음 코드는 현재 날짜를 YYYY-MM-DD 형식으로 표시합니다.

const date = new Date();
const formattedDate = date.toDateString();
console.log(formattedDate); // 2024-05-11

toUTCString() 메서드는 날짜를 UTC(협정 세계시) 시간대 기준으로 다음과 같은 형식으로 문자열로 변환합니다.

ddd, dd MMM yyyy HH:mm:ss UTC

예를 들어 다음 코드는 현재 날짜를 UTC 시간대 기준으로 표시합니다.

const date = new Date();
const formattedDate = date.toUTCString();
console.log(formattedDate); // Sat, 11 May 2024 14:59:34 UTC

valueOf() 메서드는 날짜를 밀리초(1/1000초) 단위의 숫자로 변환합니다. 이 숫자를 사용하여 원하는 형식으로 날짜를 문자열로 변환할 수 있습니다.

예를 들어 다음 코드는 현재 날짜를 YYYY-MM-DD 형식으로 표시합니다.

const date = new Date();
const milliseconds = date.valueOf();
const formattedDate = new Date(milliseconds).toISOString().slice(0, 10);
console.log(formattedDate); // 2024-05-11

라이브러리 사용

날짜 형식을 지정하는 데 도움이 되는 라이브러리가 많이 있습니다. 인기 있는 라이브러리로는 다음과 같은 것들이 있습니다.

이러한 라이브러리는 다양한 날짜 형식 지정 기능을 제공하며, 사용하기도 쉽습니다.

  • [예제코드 : javascript] 26.자바스크립트 날짜 형


자바스크립트 날짜 형식 지정 예제 코드

현재 날짜를 한국어 YYYY년 MM월 DD일 형식으로 표시

const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = date.toLocaleDateString('ko-KR', options);
console.log(formattedDate); // 2024년 5월 11일

현재 날짜를 UTC 시간대 기준으로 YYYY-MM-DDTHH:mm:ssZ 형식으로 표시

const date = new Date();
const formattedDate = date.toISOString();
console.log(formattedDate); // 2024-05-11T14:59:34Z

특정 날짜를 DD/MM/YYYY 형식으로 표시

const date = new Date(2023, 11, 14);
const options = { day: 'numeric', month: 'numeric', year: 'numeric' };
const formattedDate = date.toLocaleDateString('en-US', options);
console.log(formattedDate); // 12/14/2023

두 날짜 간의 차이를 일 수로 계산

const startDate = new Date(2023, 0, 1);
const endDate = new Date(2024, 5, 11);
const diffInDays = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
console.log(diffInDays); // 489

Moment.js 라이브러리를 사용하여 날짜 형식 지정

const moment = require('moment');
const date = new Date();
const formattedDate = moment(date).format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // 2024-05-11 14:59:34

이 외에도 다양한 날짜 형식 지정 방법이 있습니다. 자세한 내용은 자바스크립트 날짜 관련 문서를 참조하십시오.



Intl API는 날짜, 숫자, 문자열 등을 다양한 언어와 지역 설정에 따라 형식 지정하는 데 사용할 수 있는 자바스크립트 API입니다. 날짜 형식 지정에 Intl API를 사용하려면 다음과 같은 단계를 수행해야 합니다.

  1. Intl.DateTimeFormat 생성자를 사용하여 DateTimeFormat 객체를 만듭니다.
  2. DateTimeFormat 객체의 format() 메서드를 사용하여 날짜를 원하는 형식으로 문자열로 변환합니다.

예를 들어 다음 코드는 현재 날짜를 한국어 YYYY년 MM월 DD일 형식으로 표시합니다.

const date = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const dateTimeFormat = new Intl.DateTimeFormat('ko-KR', options);
const formattedDate = dateTimeFormat.format(date);
console.log(formattedDate); // 2024년 5월 11일

String.prototype.padStart()String.prototype.padEnd() 메서드는 문자열을 왼쪽 또는 오른쪽에서 지정한 길이로 채웁니다. 날짜 형식 지정에 이러한 메서드를 사용하면 날짜 구성 요소의 길이를 일관되게 만들 수 있습니다.

예를 들어 다음 코드는 현재 날짜를 YYYY-MM-DD 형식으로 표시합니다.

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 formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // 2024-05-11

사용자 정의 함수 사용

자신만의 사용자 정의 함수를 만들어 날짜를 원하는 형식으로 문자열로 변환할 수도 있습니다. 이 방법은 더 많은 제어력을 제공하지만 코드가 더 복잡해질 수 있습니다.

예를 들어 다음 코드는 사용자 정의 함수를 사용하여 현재 날짜를 DD/MM/YYYY 형식으로 표시합니다.

function formatDate(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${day}/${month}/${year}`;
}

const date = new Date();
const formattedDate = formatDate(date);
console.log(formattedDate); // 11/05/2024

이 외에도 다양한 날짜 형식 지정 방법이 있습니다. 자세한 내용은 자바스크립트 날짜 관련 문서를 참조하십시오.

도움이 되었기를 바랍니다! 혹시 다른 질문 있으면 언제든지 물어보세요.


javascript date date-formatting

자바스크립트에서 날짜에 날짜 추가하기

Date. prototype. setDate() 메소드 사용setDate() 메소드는 날짜 객체의 날짜 값을 설정합니다.Date. prototype. setTime() 메소드 사용setTime() 메소드는 날짜 객체의 밀리초 값을 설정합니다...


자바스크립트 배열에서 마지막 요소 가져오기: 다양한 방법 비교 (2024년 5월 8일 기준)

자바스크립트에서 배열의 마지막 요소를 가져오는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 다음과 같습니다.배열 길이 이용하기배열의 길이는 length 속성으로 확인할 수 있으며, 마지막 요소의 인덱스는 배열 길이 - 1입니다...


Angular에서 을 재설정하는 방법

Angular에서 <input type="file">을 재설정하는 방법은 다음과 같습니다.clear() 메서드 사용위 코드에서 clear() 메서드를 사용하여 file 속성의 값을 null로 설정합니다. 이렇게 하면 <input type="file"> 요소의 값이 초기화됩니다...


Node.js child_process 모듈을 통한 명령줄 바이너리 실행

child_process 모듈은 Node. js 자식 프로세스를 생성하고 관리하는 기능을 제공합니다. 이 모듈을 사용하여 명령줄 바이너리를 실행하고, 입출력 데이터를 주고받으며, 프로세스 종료를 감지할 수 있습니다...