[JavaScript] 숫자 100000을 100,000으로 바꾸는 방법

가격 정보 등 큰 숫자를 표시할 때 세 자리마다 쉼표를 넣어서 표기해주는 편이 단위를 파악하기 쉽다. 이때 쓸 수 있는 간단한 내장 메소드가 있는데 바로 toLocaleString()이다. 

 

날짜 데이터에만 쓰는 줄 알았는데, 숫자에도 적용 가능하다. 단 숫자에 바로 적용하면 syntax error가 뜨기 때문에 숫자를 변수에 담아서 사용해야 한다. 

 

	// 틀린 예시: SyntaxError
	100000.toLocaleString()
	// 옳은 예시:
	const num = 100000;
	num.toLocaleString() // '100,000'

view raw toLocaleString hosted with ❤ by GitHub

메소드 이름에서 알 수 있듯이 쉼표가 찍힌 string을 반환한다. 

 

쇼핑몰 상품 카드 등에서 가격을 표시하는 컴포넌트를 만들 때 다음과 같이 작성할 수 있다. 

 

	function Item({ item, handleClick }) {
	return (
	<li key={item.id} className="item">
	<img className="item-img" src={item.img} alt={item.name}></img>
	<span className="item-name" data-testid={item.name}>
	{item.name}
	</span>
	<span className="item-price">{item.price.toLocaleString()}</span>
	<button className="item-button" onClick={(e) => handleClick(e, item.id)}>
	장바구니 담기
	</button>
	</li>
	);
	}

view raw ItemComponent hosted with ❤ by GitHub