[javascript] 자바스크립트 date parse 날짜 파싱 배우기 (date to string)

오늘은 자바스크립트에서 날짜 데이터를 다루는 방법에 대해서 정리해 보려고 한다. 날짜 파싱은 date 형태의 값을 문자열 형태의 원하는 포맷 형식으로 변경하는 방법이다. 날짜 관련한 기능은 화면 개발에서 빼놓을 수 없는 부분 중 하나인데, 특히 날짜 포맷 처리하는 방법은 매우 중요한 부분이다.

 

---

Date to string parsing

자바스크립트에서 date 형태의 날짜를 문자열 형태의 원하는 포맷으로 변경하는 것이며, 화면에서 날짜 데이터를 표현할 때에는 날짜 포맷이 맞지 않은 경우에는 원하는 문자열 형태의 포맷으로 변경을 해줘야한다. 

자바스크립트에서는 Date 객체를 사용하여 날짜와 시간을 나타내며, 이 객체에는 다양한 메서드가 있어 날짜를 원하는 형식의 문자열로 변환할 수 있다.
Date 객체에서는 일반적으로 제공되는 메서드가 있는데, toString(), toLocaleString(), toLocaleDateString(), toLocaleTimeString() 등이 있다. 이러한 메서드를 사용하여 날짜를 문자열로 변환할 때는 주어진 날짜를 locale에 맞게 표시할 수도 있고, 사용자가 정의한 형식에 맞게 표시할 수도 있다.

다양한 형식의 날짜 문자열을 만들기 위해 자바스크립트에서는 형식 지정자를 사용할 수도 있다. 형식 지정자를 사용하면 날짜의 연도, 월, 일, 시간, 분, 초 등을 특정 형식으로 표시할 수 있다. 이러한 형식 지정자를 사용하여 날짜를 원하는 형태의 문자열로 변환하는 것을 date formatting 이라고도 한다.


toString()

var dateString = new Date().toString();
// 예시 "Sat Apr 16 2024 15:30:00 GMT+0300 (Eastern European Summer Time)"
console.log(dateString);

날짜를 기본적인 형태의 문자열로 변환한다. 
date.toString()은 현재 날짜와 시간을 포함하는 문자열을 반환한다. 반환된 문자열은 요일, 월, 일, 연도, 시간, 분, 초, 타임존 정보 등을 포함한다. 이러한 형식은 시스템 설정 및 브라우저에서 사용하는 타임존에 따라 다를 수 있다.


toLocaleString()

var dateString = new Date().toLocaleString();
// 예시 "4/16/2024, 3:30:00 PM"
console.log(dateString);

Date 객체를 해당 지역 설정에 맞는 문자열로 변환하여 반환한다. 이때 반환되는 문자열은 시스템 또는 사용자의 지역 설정에 따라 다른 형식을 갖는다.

new Date().toLocaleString()은 현재 날짜와 시간을 해당 지역 설정에 맞는 형식으로 표시한 문자열을 반환한다. 반환된 문자열을 날짜와 시간을 나타내며, 날짜 형식과 시간 형식은 사용자의 컴퓨터나 브라우저의 지역 설정에 따라 달라질 수 있다. 예를 들어, 미국 지역 설정을 사용하는 경우 "4/16/2024, 3:30:00 PM"과 같은 형식이 될 수 있다.



toLocaleDateString()

var dateString = new Date().toLocaleDateString();
// 예시 "4/16/2024"
console.log(dateString);

Date 객체를 해당 지역 설정에 맞는 날짜 형식의 문자열로 변환하여 반환한다. 반환되는 문자열은 해당 지역 설정에 따라 다른 형식을 가진다.

new Date().toLocaleDateString()은 현재 날짜를 해당 지역 설정에 맞는 날짜 형식의 문자열로 반환한다. 반환된 문자열은 연도, 월, 일을 나타내며, 사용자의 컴퓨터나 브라우저의 지역 설정에 따라 달라질 수 있다. 예를 들어 미국 지역 설정을 사용하는 경우 "4/16/2024"와 같은 형식이 될 수 있다.



toLocaleTimeString()

var dateString = new Date().toLocaleTimeString();
// 예시 "3:30:00 PM"
console.log(dateString);

Date 객체를 해당 지역 설정에 맞는 시간 형식의 문자열로 변환하여 반환한다. 반환되는 문자열은 해당 지역 설정에 따라 다른 형식을 가진다.

new Date().toLocaleTimeString()은 현재 시간을 해당 지역 설정에 맞는 시간 형식의 문자열로 반환한다. 반환된 문자열은 시, 분, 초를 나타내며, 사용자의 컴퓨터나 브라우저의 지역 설정에 따라 달라질 수 있다. 예를 들어, 미국 지역 설정을 사용하는 경우 "3:30:00 PM"와 같은 형식이 될 수 있다.

---

예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {

    // date parse
    let date01 = parseDate(new Date(), '/');
    let date02 = parseDate(new Date(), '-');
    let date03 = parseDate(new Date(), '.');
    let date04 = parseDate(new Date(), ' ');

    console.log(date01);
    console.log(date02);
    console.log(date03);
    console.log(date04);
});

/**
 * date to string 변경
 * 
 */
function parseDate (date, pattern) {

    let y = date.getFullYear();
    let m = dateAddZero(date.getMonth() + 1);
    let d = dateAddZero(date.getDate());

    return [y, m, d].join(pattern);
}

/**
 * date 10 이하 값 '0' 추가 
 * 
 */
function dateAddZero (d) {
    if (!d) {
        return d;
    }
    return d < 10 ? '0' + d : d;
}

</script>

위의 코드는 자바스크립트를 사용하여 현재 날짜를 지정된 패턴에 따라 문자열로 파싱하는 예제다.

parseDate 함수는 입력된 date 객체를 받아와서 원하는 패턴에 따라 날짜를 문자열로 파싱한다. 이 함수는 date 객체와 지정된 pattern을 매개변수로 받는다.
parseDate 함수 내부에서는 getFullYear, getMonth, getDate 메서드를 사용하여 연도, 월, 일을 추출한다.
추출된 연도, 월, 일은 각각 dateAddZero 함수를 통해 10 미만의 값에는 앞에 0을 추가하여 변환된다.
변환된 연도, 월, 일은 join 메서드를 사용하여 지정된 pattern으로 연결되고 반환된다.
마지막으로 parseDate 함수를 통해 각각의 패턴 ('/', '-', '.', ' ')에 대한 날짜 문자열리 반환되어 log를 출력한다.

실행 결과

pattern 별로 호출하였을때 정상적으로 출력된 결과 화면이다.

 

그렇다면 다음은 년월일에 추가로 시분초까지 추가를 해보겠습니다.

---

시분초 추가한 예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {

    // datetime parse
    let date05 = parseDateTime(new Date(), '-', ':');

    console.log(date05);
});

/**
 * date to string 변경
 * 
 */
function parseDate (date, pattern) {

    let y = date.getFullYear();
    let m = dateAddZero(date.getMonth() + 1);
    let d = dateAddZero(date.getDate());

    return [y, m, d].join(pattern);
}

/**
 * dateTime to string 변경
 * 
 */
function parseDateTime (date, datePattern, timePattern) {
    
    let h = dateAddZero(date.getHours());
    let m = dateAddZero(date.getMinutes());
    let s = dateAddZero(date.getSeconds());

    return `${parseDate(date, datePattern)} ${[h, m, s].join(timePattern)}`;
}

/**
 * date 10 이하 값 '0' 추가 
 * 
 */
function dateAddZero (d) {
    if (!d) {
        return d;
    }
    return d < 10 ? '0' + d : d;
}

</script>

위의 코드는 현재 날짜와 시간을 지정된 패턴에 따라 문자열로 파싱하는 예제다.

parseDateTime 함수는 입력된 date, datePattern, timePattern을 받아와서 지정된 패턴에 따라 날짜와 시간을 문자열로 파싱한다. 이 함수는 date 객체와 날짜를 표시할 패턴(datePattern), 시간을 표시할 패턴(timePattern)을 매개변수로 받는다.
parseDateTime 함수 내부에서는 getHours, getMinutes, getSeconds 메서드를 사용하여 시, 분, 초를 추출한다.
추출된 시(h), 분(m), 초(s)는 각각 dateAddZero 함수를 통해 10 미만의 값에는 앞에 0을 추가하여 변환된다.
변환된 시간은 날짜를 파싱하는 parseDate 함수를 통해 날짜 문자열을 생성하고, 시간 문자열과 함께 지정된 시간 패턴으로 연결되어 반환한다.
마지막으로 parseDateTime 함수를 통해 지정된 날짜와 시간 패턴에 따른 날짜 및 시간 문자열이 반환되어 log에 출력된다.

실행 결과

결과는 시분초까지 출력이 잘 된 모습이다.

 

오늘 정리한 Date() 함수는 기본적으로 year, month, date, hours, minutes, seconds 등의 값을 호출해주는 기능을 가지고 있다.

- 년 : getFullYear()
- 월 : getMonth()
- 일 : getDate()
- 시 : getHours()
- 분 : getMinutes()
- 초 : getSeconds()

Date() 함수에는 해당 기능 말고도 많은 기능을 제공하고 있으며, 오늘 예제에서 사용한 기능 위주로 정리를 해보았다.

---

날짜 파싱할 때 주의사항

toLocaleString()의 지역화된 출력
toLocaleString() 메서드는 지역화된 날짜 및 시간 형식을 제공한다. 사용자의 locale에 따라 다르게 나타날 수 있으므로, 특정 지역에 맞게 형식을 제공해야 할 경우에 유용하다.

지역화된 형식과 표쥰 형식 차이
자바스크립트의 Date 객체를 문자열로 변환할 때, toString()과 toLocaleString() 메서드의 결과는 표준 형식과 지역화된 형식으로 나뉘는데, toString()은 표준적인 ISO 형식을 반환하는 반면, toLocaleString()은 지역화된 형식을 반환한다.

패턴을 사용한 커스텀 형식
toLocaleString() 메서드의 결과를 조정하려면 각 메서드에 대해 사용할 수 있는 다양한 옵션이 있는데, 이러한 옵션을 사용하여 날짜 및 시간 형식을 사용자 지정할 수 있다. 또한, toLocaleDateString() 및 toLocalTimeString() 메서드를 사용하여 날짜 및 시간 부분을 따로 처리할 수도 있다.

문자열에서 Date 객체로의 역변환
문자열에서 Date 객체로의 역변환이 필요한 경우에는 new Date() 생성자에 문자열을 전달하여 Date 객체를 만들 수 있다. 이 때, 문자열은 ISO 8601 형식이거나 파싱 가능한 형식이어야 한다. 가능하면 ISO 형식을 사용하는 것이 가장 안전하다.


Date 객체를 문자열로 변환할 때에는 원하는 형식과 지역화된 형식을 고려하여 적절한 메서드를 선택하고, 시간대 및 문자열의 파싱 가능성에 대해 주의해야 한다. 그리고 커스텀이 필요한 경우 패턴에 맞게 데이터를 처리하는 것이 중요하다.

---

마무리

오늘은 자바스크립트 Date 객체를 활용하여 문자열 형태로 파싱하는 방법을 정리해 보았다. Date 객체의 기본적인 메서드부터 커스텀하게 원하는 형태로 파싱하는 방법까지 정리해 보았는데, 기본 메서드를 사용할 때에는 생각보다 locale을 많이 신경쓰고 고민하는 것이 중요하고, 커스텀하게 기능을 구현한다면 다양한 상황을 고려해 구현해야 할 것이다. 

다음에는 반대로 문자열 형태의 날짜를 Date 객체로 포맷하는 방법에 대해서 정리해봐야겠다.