숫자 표시와 변환

자바스크립트는 원시 자료형 중 하나로 "숫자(Number)" 자료형을 제공합니다.

자바스크립트의 숫자형은

134

-1508

0.27

2.344e6

과 같은 모든 숫자 표현을 말합니다.

다른 개발 언어의 정수형, 실수형, 부호없는 정수형 과 같은 세세한 숫자형의 구분 방식과 달리 자료형이 1개만 있습니다.

자바스크립트의 숫자형은 내부적으로 부호가 있는 64비트 부동소수점으로 저장됩니다.

그외에 숫자는 아니지만, 수적인 표현을 사용하기 위해 Infinity(무한), NaN(Not a Number : 숫자아님) 과 같은 보조적인 숫자형이 있습니다.

Infinity 와 NaN은 계산 결과값이 숫자로 표현할 수 없는 경우(64비트 부동소수점으로 표현할 수 없는 값)에 결과값을 대신해 표시합니다.

console.log(3 / 0);console.log(Infinity / Infinity);console.log(1 / Infinity);console.log(3 - "빼기");console.log(NaN + Infinity);

그렇다고, 정수형, 실수형 데이터의 구분이 없는 것은 아니며, 연산을 하기 전에 숫자를 캐스팅(Casting)해서 정수와 실수를 구분해 사용할 수 있습니다.

parseInt(), parseFloat() 함수 등을 사용해 부동소수점 실수형과 정수형으로 변환할 수 있습니다.

정수로 변환

전역 함수인 parseInt() 를 사용합니다.

숫자, 또는 문자열을 파라메터로 받아 정수값을 반환합니다. 정수로 변환할 수 없는 경우 NaN을 반환합니다.

두번째 파라메터로 진법(2~36 진수)을 지정할 수 있습니다. 생략 가능하며 생략하면 기본값인 10진수가 됩니다.

parseInt() 함수는 파라메터 첫번째 문자가 숫자인지를 판단해서 아니면 Nan 을 리턴합니다.

두번째 문자부터는 숫자가 아니면 해당 문자 이후를 모두 버립니다. 즉, 숫자로 인식되는 부분까지만 정수로 반환합니다.

console.log(parseInt('123,456')); // 123 반환.console.log(parseInt('3.241592')); // 3 반환.console.log(parseInt('111',2)); // 2진수 111을 10진수로 변환해서 7을 반환.console.log(parseInt('FF',16)); // 16진수 FF를 10진수로 변환해서 255를 반환.console.log(parseInt('1211',2)); // 2진수 1을 10진수로 변환해서 1을 반환. 2 이하는 무시됨.console.log(parseInt('a100')); // 첫 문자가 숫자가 아니므로 NaN을 반환

부동소수점 실수로 변환

전역 함수인 parseFloat() 을 사용합니다.

숫자, 또는 문자열을 파라메터롤 받아, 부동소수점 실수를 반환합니다. 부동소수점 실수로 변환할 수 없는 경우 NaN을 반환합니다.

console.log(1.234); // 1.234 반환console.log('3.141592'); //3.141592 반환console.log('0.03333E+2'); // 3.333 반환console.log('실수'); // NaN 반환

소수점 자리수 제한

숫자형의 메서드 toFixed() 를 사용해 소수점 자리수를 제한한 문자열로 변환할 수 있습니다.

문자열로 결과값을 반환한다는 것에 주의해야 합니다.

또,음수의 경우에는 숫자형이 반환되기 때문에 숫자를 괄호로 감싸서 마이너스 부호 적용이 먼저 이루어지도록 해야 문자열을 반환합니다.

소수점 자리수를 제한하는 toFixed()는 몇가지 규칙에 따라 숫자 변환을 합니다.

소수점 자리수를 제한하는 길이용 파라메터 1개를 받습니다.

파라메터가 없거나 0을 넘긴 경우 반올림한 정수값이 됩니다.

소수점 자리수를 줄일 경우 밑에 자리에서 반올림한 값이 됩니다.

자리수를 늘릴 경우 남는 공간만큼 0으로 채웁니다.

음수의 경우 숫자를 괄호로 감싸서 toFixed()를 적용해야 문자열이 반환됩니다.

결과 문자열을 숫자로 변수에 할당하려면 1*소수점숫자.toFixed(2); 와 같이 앞에 연산식을 붙여 결과값을 숫자형으로 캐스팅하는 트릭을 쓸 수도 있습니다.

const num = 123.4567;
console.log(num.toFixed(2)); // '123.46' 반환console.log(num.toFixed(8)); // '123.45670000' 반환console.log(0.002345E+2.toFixed(2)); // '0.23' 반환console.log(-3.141592.toFixed(2)); // -1*3.141592.toFixed(2) 와 같으며, -3.14 실수값이 반환console.log((-3.141592).toFixed(2)); // '-3.14' 문자열 반환

3자리마다 콤마 찍기

금액 표시를 하기 위해 3자리마다 콤마를 찍는 메서드나 함수가 별도로 제공되지 않기 때문에 정규표현식을 사용해서 3자리마다 콤마를 찍어야 합니다.

const num = 12345678;console.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); // 12,345,678 을 반환

/\B(?=(\d{3})+(?!\d))/g - 이 정규표현식은 소수점 이하가 긴 숫자에는 대응하지 못합니다.

내림, 올림, 반올림, 버림

자바스크립트 전역 객체인 Math 객체의 메서드들을 활용하면 소숫점 이하 숫자를 원하는 방식으로 처리할 수 있습니다.

const num = 3.141592;const minusnum = -3.6789;const halfnum = 3.5const halfminusnum = -3.5;
console.log(Math.ceil(num)); // 4 반환console.log(Math.ceil(minusnum)); // -3 반환
console.log(Math.floor(num)); // 3 반환console.log(Math.floor(minusnum)); // -4 반환
console.log(Math.round(num)); // 3 반환console.log(Math.round(minusnum)); // -4 반환console.log(Math.round(halfnum)); // 4 반환. 3.5는 4에 더 가까움.console.log(Math.round(halfminusnum)); // -3 반환. -3.5는 -3에 더 가까움.
console.log(Math.trunc(num)); // 3 반환console.log(Math.trunc(minusnum)); // -3 반환

절대값, 부호를 얻기