[JavaScript] toLocaleString() 메서드로 숫자, 날짜 형식 변환하기

toLocaleString() 메서드

toLocaleString() 메서드는 숫자나 날짜 객체를 문자열로 변환할 때 사용할 수 있습니다. 이 메서드는 사용자의 로컬 설정에 맞춰 언어와 형식을 자동으로 조정해 줍니다.

콤마가 포함된 숫자 형식으로 변환

숫자 형식으로 변환하는 예시는 다음과 같습니다.

// 숫자 값
var number = 12345.67;

// 콤마가 포함된 문자열로 변환
var formattedNumber = number.toLocaleString();

// "12,345.67"
console.log(formattedNumber);

만약 number가 실수형이 아니라 문자열이라면?

var formattedNumber = parseFloat(number).toLocaleString();

parseFloat() 함수를 사용하여 문자열을 실수형으로 변환하는 작업을 하면 됩니다.

 

JSP 환경이라면 jquery를 사용해 total이라는 id를 가진 태그의 text를 변경할 수도 있습니다.

$('#total').text(formattedNumber);

또한, script 단에서 AJAX로 전달받은 데이터를 숫자 형식으로 화면에 보여줄 수 있을 것입니다..! 저는 이러한 경우에 자주 사용한 거 같아요.

날짜 형식으로 변환

날짜 형식으로 변환하는 예시는 다음과 같습니다.

// 날짜 객체
const date = new Date();

// 기본 사용법
console.log(date.toLocaleString()); // "2024. 5. 14. 오후 9:53:35"

추가적으로, 사용자의 언어에 맞춰서 날짜 형식을 보여줄 수 있습니다.

// 언어 지정
console.log(date.toLocaleString('en-US')); // "5/14/2024, 9:53:35 PM"