JavaScript toLocaleString()메서드

JavaScript toLocaleString() 메서드에 대해서

toLocaleString() 메서드는 무엇일까?

toLocaleString( ) 메서드는 배열의 요소를 나타내는 문자열을 반환한다. 요소는 toLocaleString 메서드를 사용해 문자열로 변환되고 이 문자열은 locale 고유 문자열(쉼표)에 의해 분리된다.

숫자, 날짜 및 시간 값의 형식을 지정된 로케일(지역화)에 맞게 변환해 준다. 이 함수는 로케일별로 숫자 및 날짜 형식을 다르게 나타내는 다국어 애플리케이션에서 유용하게 사용된다.

arr.toLocaleString([locales [, options]]);

locales와 options은 선택적 매개변수이다.

• locales : 로케일을 지정하는 문자열 또는 문자배열
• 지정된 로케일에 따라 숫자, 날짜 및 시간 값의 형식이 변환된다. 생략하면 실행 환경의 기본 로케일을 사용한다.
• options : 변환 옵션을 지정하는 객체이다. 다양한 옵션들이 있다.

• style : 변환 스타일을 지정한다. ‘currency’, ‘decimal’, ‘percent’, ‘unit’등의 값을 사용할 수 있다.
  • decimal : 일반적인 십진수 형식을 지정한다. 12345.6789를 12,345,679로 변환한다.

  const deci = 12345.6789;
  const option = {style:'decimal'};
  console.log( deci.toLocaleString(option));
  
  //12,345.679
  

  • percent : 백분율 형식을 저장한다. 12.34는 12%로 변환된다.
  • const per = 0.1234; const option = {style:'percent'}; console.log(per.toLocaleString('en-US',option)); //12%

const per = 0.1234;
const option = {style:'percent'};
console.log(per.toLocaleString('en-US',option));

//12%

• currency : 통화 코드를 지정한다. 예시로 USD나 KRW같은 값들을 사용할 수 있다.
• toLocaleString( ) 메서드는 인수를 받아 로케일 및 옵션을 지정할 수 있다.

const number = 1234567.89;
const options = { style: 'currency', currency: 'USD' };
console.log(number.toLocaleString('en-US',option));

//$1,234,567.89

위 코드에서 toLocaleString ( ) 메서드를 사용해 number 변수의 값을 미국 로케일에 맞게 통화 형식으로 변환했다. options 객체를 사용하여 로케일과 변환 옵션을 지정했다.

• minimumFractionDigits, MaximumFractionDigits : 변환된 값의 최소 및 최대 소수점 자릿수를 지정한다.
• weekday, era, year, month, day, hourm minute, second : 각각 요일, 연대, 년도, 월, 일, 시간, 분, 초의 출력 형식을 지정한다.

toLocaleString( ) 메서드에서 인수로 전달하는 로케일과 옵션에 따라 출력 결과가 달라진다. 이를 활용하면 지역화된 문자열, 숫자 및 날짜 형식을 생성할 수 있다.

또한 toLocaleString( ) 메서드는 Date객체와 함께 사용될 때, 날짜와 시간 값을 로케일에 맞게 변환할 수 있다.

const date = new Date();
console.log(date.toLocaleString('en-US'));

//3/18/2023, 2:09:26 PM

위 코드에서는 toLocaleString( ) 메서드를 사용하여 date 변수의 값을 미국 로케일에 맞게 날짜 및 시간 형식으로 변환했다. 인수로 ‘en-US’를 전달하여 미국 로케일을 사용하도록 지정했다.

나의 주관적인 생각

이 메서드를 유용하게 사용하려면 option에 들어간 매개변수들을 잘 활용해야 한다 생각이 든다. 보통 날짜에 관련된 기능에만 사용하는 함수인 줄 알았으나 자세히 보니 통화, 수치 등 다양한 걸 지정할 수 있었다.

.toLocaleString, one of the most underrated JavaScript features

이 분 블로그에 정리되어 있으니 참고해서 활용하면 좋을 것 같다.