JavaScript의 toLocaleString() 메서드는 Date 객체를 사용자의 지역(locale) 설정에 맞는 문자열로 변환할 때 사용합니다. 이 메서드를 활용하면 별도의 포맷 작업 없이도 각 국가·언어에 적합한 날짜와 시간 표기를 손쉽게 얻을 수 있습니다.
기본 문법
Date.toLocaleString(locales, options)
여기서 locales 매개변수는 날짜를 표시할 언어별 형식을 지정하며, options는 날짜 및 시간 구성 요소(연도, 월, 시간대 등)의 표시 방식을 세부적으로 제어할 수 있습니다.
주요 locales 코드 목록
ar-SA 아랍어 (사우디아라비아) bn-BD 벵골어 (방글라데시) bn-IN 벵골어 (인도) cs-CZ 체코어 (체코) da-DK 덴마크어 (덴마크) de-AT 오스트리아 독일어 de-CH 스위스 독일어 de-DE 표준 독일어 (독일) el-GR 현대 그리스어 en-AU 호주 영어 en-CA 캐나다 영어 en-GB 영국 영어 en-IE 아일랜드 영어 en-IN 인도 영어 en-NZ 뉴질랜드 영어 en-US 미국 영어 en-ZA 남아프리카 공화국 영어 es-AR 아르헨티나 스페인어 es-CL 칠레 스페인어 es-CO 콜롬비아 스페인어 es-ES 카스티야 스페인어 (스페인 중북부) es-MX 멕시코 스페인어 es-US 미국 스페인어 fi-FI 핀란드어 (핀란드) fr-BE 벨기에 프랑스어
예제 1: 배열과 함께 toLocaleString() 활용하기
다음 예제는 상품 배열을 업데이트하고, 갱신된 목록과 함께 현재 날짜·시간을 지역 형식으로 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h2>상품 목록</h2>
<p>버튼을 클릭하면 업데이트된 상품 목록이 표시됩니다...</p>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
var products = ["전자제품", "도서", "액세서리"];
document.getElementById("test").innerHTML = products;
function display() {
var d = new Date();
products.splice(3, 1, "반려동물 용품", "신발", "가전제품");
document.getElementById("test").innerHTML = products +" on "+d.toLocaleString();
}
</script>
</body>
</html>실행 결과
위에서 “결과 보기” 버튼을 클릭하면 다음과 같이 상품 목록과 함께 현재 날짜가 지역 형식으로 표시됩니다.
예제 2: 현재 날짜와 시간 표시하기
이번에는 버튼 클릭 시 현재 날짜와 시간을 toLocaleString()으로 변환하여 출력하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>날짜 표시하기</h2>
<button onclick="display()">결과 보기</button>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = "현재 날짜를 표시합니다...";
function display() {
var d = new Date();
document.getElementById("test").innerHTML = d.toLocaleString();
}
</script>
</body>
</html>실행 결과
“결과 보기” 버튼을 클릭하면 사용자 환경의 지역 설정에 맞는 날짜와 시간이 나타납니다.
정리
toLocaleString()은 Date 객체를 지역 설정 기반의 읽기 쉬운 문자열로 변환해 주는 유용한 메서드입니다. locales 인자로 언어·지역을 지정할 수 있고, options 인자로 연도, 월, 요일, 시간 등 원하는 정보만 선택적으로 표시할 수 있어 다국어 웹 서비스 개발 시 특히 유용합니다.