숫자 천단위마다 콤마(,) 추가하기

숫자에 천단위 콤마(comma) 찍기

See the Pen 숫자 콤마 함수 타입 1 by jaeheekim (@jaehee) on CodePen.

인풋박스에 포커스 아웃될 경우

See the Pen 숫자 콤마 추가 함수 2 by jaeheekim (@jaehee) on CodePen.

• toLocaleString 은 Number 타입의 내장 함수이며, 인자로 들어온 지역 값에 따른 숫자 표기 방식을 적용하여, 문자열로 반환하는 역할을 합니다. 'en'은 영어권 국가의 숫가 표기 방식을 사용하겠다는 것을 지정한 것입니다. 미국이나 영어권 국가에서는 숫자를 표기할 때, 3자리마다 숫자를 끊어 콤마를 삽입하여 사용합니다. 
• 만약 지역 값을 입력하지 않고 호출하는 경우, 해당 시스템의 지역 값에 따라서 숫자가 표기되는데, 시스템에 따라서 뒤에 소수점 2자리가 붙는 경우가 있습니다.  - Number("12345").toLocaleString('en'); ===> 12,345.00 
• 이럴 때에는 단순히 소수점을 날려버리는 코드만 추가해 주시면 됩니다. (방법1에서도 가장 마지막 라인에서 사용한 방법입니다.) - Number(data_value).toLocaleString('en').split(".")[0] ===> 12,345 
• 숫자가 아닌, Date 타입도 toLocaleString 함수를 제공하는데, 이 때에는 함수 인자값에 해당하는 지역의 Date 표기 형식의 값을 반환해줍니다.

인풋박스에 사용자가 바로 입력시에 콤마를 추가해 주기

See the Pen 숫자 콤마 찍기 함수 3 by jaeheekim (@jaehee) on CodePen.

Jaehee's e-room