JavaScript - date format 함수 구현 및 javascript date 함수 사용

개요

문자열 또는 날짜 객체를 받아서 원하는 형식(format)에 맞게 표시하고 싶습니다.

원하는 형식을 고정적으로 제공하고 싶을 때 사용할 함수를 직접 구현해보고,
지역에 따라 동적으로 날짜 형식을 제공하고 싶을 때 사용할 javascript date 함수에 대해 알아봅니다.

형식 제공 함수 구현

예를 들면 아래와 같은 여러 형식을 사용할 수 있습니다.

2023-09-13 01:00:00
2023.09.13
2023/09/13
2023년 09월 13일 01시 00분 00초

구현 내용은 아래 코드의 주석을 참고하시면 됩니다.

function dateFormat(date, format = "yyyy-MM-dd HH:mm:ss") {
    // 문자열 또는 Date 객체가 아닌 경우 그대로 반환
    if (typeof date !== "string" && !(typeof date === "object" && date instanceof Date)) return date;

    let originDate = date;
    // 문자열인 경우 Date 객체로 변환
    if (typeof date === "string") originDate = new Date(date);

    // 변환된 Date 객체가 유효하지 않은 경우 그대로 반환
    if (!(typeof originDate === "object" && originDate instanceof Date)) return date;
    if (isNaN(originDate.getTime())) return date;

    // format 문자열에 맞게 변환
    // 본인이 원하는 형식을 추가하거나 수정하시면 됩니다.
    return format.replace(/(yyyy|yy|MM|dd|HH|mm|ss|fff)/gi, function ($1) {
        switch ($1) {
            case "yyyy":
                return originDate.getFullYear();
            case "yy":
                return zeroFill(originDate.getFullYear() % 100);
            case "MM":
                return zeroFill(originDate.getMonth() + 1);
            case "dd":
                return zeroFill(originDate.getDate());
            case "HH":
                return zeroFill(originDate.getHours());
            case "hh":
                const hours = originDate.getHours();
                const ampm = hours < 12 ? "오전" : "오후";
                return ampm + " " + zeroFill(hours > 12 ? hours % 12 : hours);
            case "mm":
                return zeroFill(originDate.getMinutes());
            case "ss":
                return zeroFill(originDate.getSeconds());
            case "fff":
                return zeroFill(originDate.getMilliseconds(), 3);
        }
    });
}

// 자릿수를 맞추기 위한 함수
function zeroFill(value, count = 2, fillString = "0") {
    value = value.toString();
    return value.padStart(count, fillString);
}

함수 사용 예

const date = new Date();

// date 객체를 format 함수에 넣어서 원하는 형식으로 변환
console.log(dateFormat(date)); // 2023-09-13 17:32:11
console.log(dateFormat(date, "yyyy.MM.dd")); // 2023.09.13
console.log(dateFormat(date, "MM/dd yyyy")); // 09/13 2023

console.log(dateFormat(date, "yyyy.MM.dd HH:mm:ss.fff")); // 2023.09.13 17:32:11.345
console.log(dateFormat(date, "yyyy년 MM월 dd일 hh시 mm분 ss초")); // 2023년 09월 13일 오후 05시 32분 11초

// 문자열을 format 함수에 넣어서 원하는 형식으로 변환
console.log(dateFormat("2023-09-20")); // 2023-09-20 00:00:00

// 문자열이 날짜 형식이 아닌 경우 그대로 반환
console.log(dateFormat("not date format")); // not date format

🔹 직접 원하는 형식을 고정적으로 제공하고 싶을 떄는 위 함수를 원하는 대로 추가/수정하여 사용하면 됩니다.

🔹 접속 지역에 따라 동적으로 날짜 형식을 제공하고 싶을 때는 아래 javascript date 함수를 참고하시면 됩니다.

javascript date 함수

toString()

local timezone(현지 시간대)로 해석된 날짜 전체를 문자열로 반환합니다.

console.log(date.toString()); // Wed Sep 13 2023 17:32:11 GMT+0900 (한국 표준시)

toDateString()

local timezone(현지 시간대)로 해석된 날짜의 날짜 부분만 문자열로 반환합니다.

console.log(date.toDateString()); // Wed Sep 13 2023

toTimeString()

local timezone(현지 시간대)로 해석된 날짜의 시간 부분만 문자열로 반환합니다.

console.log(date.toTimeString()); // 17:32:11 GMT+0900 (한국 표준시)

toISOString()

ISO 8601 형식의 문자열을 반환합니다.
이 형식은 날짜, 시간 및 시간대 정보를 표시하는데 사용되며 항상 UTC 시간대로 표시됩니다.

UTC 시간대에 대한 내용은 아래 toUTCString() 메서드를 참고하시면 됩니다.

console.log(date.toISOString()); // 2023-09-13T08:32:11.345Z

toUTCString()

RFC 7231 형식에 따라 문자열로 반환합니다.
이 형식은 특정한 표준에 따라 날짜 및 시간 정보를 나타냅니다. 또한, 음수 연도도 허용되므로 BC(기원전) 연도를 나타낼 수 있습니다.

toGMTString() 메서드는 toUTCString()의 별칭으로, 동일한 결과를 반환합니다.

항상 UTC 시간대로 표시됩니다.

🔹 UTC 시간대

협정 세계 시간(UTC, Coordinated Universal Time): 세계 시간을 표준화하기 위해 사용되는 시간대로 지구 상의 어느 곳에서나 동일한 시간을 나타냅니다.

UTC는 다른 시간대와의 비교를 위한 기준이 되며, 다른 시간대는 UTC와의 차이를 나타내는 오프셋을 가집니다. 한국의 경우 UTC+9시간입니다.

아래 결과인 UTC 시간대는 2023-09-13 08:32:11 입니다. 거기에 9시간을 더하면 현지 시간대인 17:32:11이 됩니다.)

console.log(date.toUTCString()); // Wed, 13 Sep 2023 08:32:11 GMT

toLocaleDateString()

사용자 에이전트(브라우저)에 지정된 언어와 지역에 맞게 날짜 형식을 반환합니다.

아래 코드의 주석을 참고하여 사용법을 확인하시면 됩니다.


// 지정된 locale이 없을 경우 브라우저의 locale을 따릅니다.
console.log(date.toLocaleDateString()); // 2023. 9. 13.

// 지정된 locale이 있을 경우 해당 locale을 따릅니다.
console.log(date.toLocaleDateString("en-US")); // 9/13/2023
console.log(date.toLocaleDateString("ko-KR")); // 2023. 9. 13.

// 출력 형식을 지정하는 options 매개변수(parameter)를 사용하는 경우
// 지정되어 있지 않을 경우 기본 값은 year, month, day는 'numeric'입니다. 옵션 지정하지 않았을 때와 동일한 결과
console.log(date.toLocaleDateString("en-US", { year: "numeric", month: "numeric", day: "numeric" }));  // 9/13/2023
console.log(date.toLocaleDateString("ko-KR", { year: "numeric", month: "numeric", day: "numeric" }));  // 2023. 9. 13.

// month를 'long'으로 지정
console.log(date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })); // September 13, 2023
console.log(date.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })); // 2023년 9월 13일

// 요일까지 지정
console.log(date.toLocaleDateString("en-US", { weekday: "long" })); // Wednesday
console.log(date.toLocaleDateString("ko-KR", { weekday: "long" })); // 수요일
console.log(date.toLocaleDateString("en-US", { year: "numeric", month: "numeric", day: "numeric", weekday: "long" })); // Wednesday, 9/13/2023

// 년, 월, 일 2-digit으로 지정 (앞에 0이 붙음)
console.log(date.toLocaleDateString("en-US", { year: "2-digit", month: "2-digit", day: "2-digit" })); // 09/13/23
console.log(date.toLocaleDateString("ko-KR", { year: "2-digit", month: "2-digit", day: "2-digit" })); // 23. 09. 13.

위 options에 관한 자세한 내용은 Intl.DateTimeFormat()의 Date-time component options 부분을 참고하시면 됩니다.

(위 링크는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.)

개요