array.toLocaleString() 함수란?
JavaScript의 array.toLocaleString() 함수는 배열의 모든 요소를 하나의 문자열로 반환하는 메서드입니다. 이때 각 요소는 쉼표(,)처럼 해당 로케일(지역 설정)에서 통용되는 구분 기호로 연결됩니다.
이 함수는 선택적으로 locale 매개변수를 받을 수 있으며, 이 매개변수는 문자열을 변환할 때 적용할 언어 태그(예: 'en-GB', 'ko-KR')를 지정합니다. 로케일을 별도로 지정하지 않으면 브라우저의 기본 로케일이 자동으로 적용됩니다.
특히 배열에 숫자나 Date 객체가 포함된 경우, toLocaleString()은 각 요소를 지정된 로케일 형식에 맞게 변환해 준다는 점에서 일반적인 toString() 메서드와 차별화됩니다. 예를 들어 영국 로케일(en-GB)을 적용하면 날짜가 'DD/MM/YYYY' 형식으로 표시됩니다.
기본 문법
arr.toLocaleString([locales[, options]])
- locales (선택): BCP 47 언어 태그 문자열 또는 그 배열
- options (선택): 숫자·날짜 형식 등 출력 방식을 세부 조정하는 객체
예제 코드
다음은 array.toLocaleString() 함수를 활용한 전체 예제입니다. 버튼을 클릭하면 배열이 영국(en-GB) 로케일 형식의 문자열로 변환되어 화면에 다시 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript array.toLocaleString()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to convert the array to UK locale string</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = [1, 3, new Date()];
fillEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
arr = arr.toLocaleString("en-GB");
fillEle.innerHTML = arr;
});
</script>
</body>
</html>실행 결과
페이지를 처음 열면 숫자 1, 3과 현재 날짜 객체로 이루어진 배열이 화면에 그대로 출력됩니다.
“CLICK HERE” 버튼을 클릭하면 −
버튼 클릭 후에는 배열 전체가 en-GB 로케일 규칙에 따라 변환된 단일 문자열로 바뀌어 표시됩니다. 날짜 값 역시 영국식 표기법에 맞게 형식화된 것을 확인할 수 있습니다.
정리
array.toLocaleString()은 배열 내용을 사용자의 지역 형식에 맞는 읽기 쉬운 문자열로 변환할 때 유용한 메서드입니다. 국제화(i18n)가 필요한 웹 애플리케이션에서 날짜나 숫자 데이터를 현지화하여 표시할 때 특히 유용하게 활용할 수 있습니다.