Date 객체는 자바스크립트에 기본으로 내장된 데이터 타입으로, 날짜와 시간 정보를 다룰 때 사용합니다. Date 객체는 아래와 같이 new Date()를 호출하여 생성할 수 있습니다.
Date 객체를 생성한 후에는 다양한 메서드를 사용해 객체를 조작할 수 있습니다. 대부분의 메서드는 로컬 시간 또는 UTC(협정 세계시, GMT)를 기준으로 연도, 월, 일, 시, 분, 초, 밀리초 필드를 읽거나 설정하는 기능을 제공합니다.
그중 toLocaleTimeString() 메서드는 Date 객체가 나타내는 시간(시·분·초) 부분만을, 실행 환경의 로케일(지역 형식)에 맞춘 문자열로 반환합니다. 날짜와 시간을 모두 포함한 문자열이 필요하다면 toLocaleString() 메서드를 사용하면 되며, 아래 예제에서는 두 메서드의 동작 방식을 함께 살펴봅니다.
문법(Syntax)
기본 문법은 다음과 같습니다.
dateObj.toLocaleTimeString()
dateObj.toLocaleString()
예제 1: 특정 날짜 문자열 변환하기
Date 생성자에 날짜 문자열을 전달하면, 해당 날짜가 로컬 형식의 문자열로 변환되어 반환됩니다.
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script type="text/javascript">
var dateObj = new Date('September 26, 89 12:4:25:96');
document.write("Current Date: "+dateObj.toLocaleString());
</script>
</body>
</html>
실행 결과:
Current Date: 9/26/1989, 12:04:25 PM
예제 2: 유효하지 않은 날짜 처리
생성자에 전달한 날짜의 '일(day)' 값이 1부터 31 사이의 범위를 벗어나면, 이 메서드는 Invalid Date를 반환합니다.
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script type="text/javascript">
var dateObj = new Date('September 467, 1989 12:4:25:96');
document.write("Current Date: "+dateObj.toLocaleString());
</script>
</body>
</html>
실행 결과:
Current Date: Invalid Date
예제 3: 인수 없이 호출하기
Date 생성자에 아무런 인수도 전달하지 않으면, 현재 시각을 기준으로 한 문자열이 반환됩니다.
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script type="text/javascript">
var dateObj = new Date();
document.write("Current Date: "+dateObj.toLocaleString());
</script>
</body>
</html>
실행 결과:
Current Date: 18/10/2018, 15:57:04 PM
toLocaleTimeString()과 toLocaleString()의 차이
두 메서드의 차이는 반환되는 문자열의 범위입니다. 같은 Date 객체에 각 메서드를 적용하면 다음과 같은 결과를 얻을 수 있습니다.
var dateObj = new Date('September 26, 89 12:4:25:96');
dateObj.toLocaleString(); // "9/26/1989, 12:04:25 PM" → 날짜 + 시간 모두 반환
dateObj.toLocaleTimeString(); // "12:04:25 PM" → 시간만 반환즉, 화면에 날짜와 시간을 모두 표시해야 한다면 toLocaleString()을, 디지털 시계처럼 시간 정보만 필요한 경우에는 toLocaleTimeString()을 사용하는 것이 좋습니다. 필요에 따라 로케일 코드(예: 'ko-KR')나 옵션 객체를 인수로 전달하면 원하는 언어와 형식으로 출력을 지정할 수도 있습니다.