JS toLocaleDateString 을 이용하여 Date 표현 변경하기

자바스크립트로 날짜를 나타낼 때, Date 함수를 사용하면 된다는 건 알았지만, 그 날짜를 한국식으로 표현할 때 일일이 getFullYear() 나 getMonth() 등을 이용해서 커스터마이징을 해서 사용했었는데, toLocaleDateString() 을 이용하면 아주 간단하게 표현 방법을 변경할 수 있다는 것을 알게 되었다.

 

그래서 오늘은 이에 관련해서 정리를 해보고자 한다.

JavaScript 로 날짜와 시간 표현하기

우선, 날짜를 가져오려면 아래 코드와 같이 Date 생성자 함수를 호출해주면 된다.

const today = new Date();
console.log(today);

콘솔에 찍힌 모습을 보면 아래와 같이 출력된다.

이 표현을 커스터마이징 하려면 아래와 같이 작성한다.

const today = new Date();
const dateString = today.toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
});
console.log(dateString);

콘솔에는 아래와 같이 나타난다.

더 많은 옵션을 보기 위해 해당 문서로 가서 확인했더니 아래와 같은 옵션들이 있었다.

interface DateTimeFormatOptions {
    localeMatcher?: "best fit" | "lookup" | undefined;
    weekday?: "long" | "short" | "narrow" | undefined;
    era?: "long" | "short" | "narrow" | undefined;
    year?: "numeric" | "2-digit" | undefined;
    month?: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined;
    day?: "numeric" | "2-digit" | undefined;
    hour?: "numeric" | "2-digit" | undefined;
    minute?: "numeric" | "2-digit" | undefined;
    second?: "numeric" | "2-digit" | undefined;
    timeZoneName?: "long" | "short" | undefined;
    formatMatcher?: "best fit" | "basic" | undefined;
    hour12?: boolean | undefined;
    timeZone?: string | undefined;
}

시간도 아래와 같이 표현할 수 있다.

const today = new Date();
const time = today.toLocaleDateString('ko-KR', {
    weekday: 'long',
    hour: 'numeric',
    hour12: true,
    minute: 'numeric',
    second: 'numeric'
});
console.log(time);