[javascript] 자바스크립트 문자열 숫자로 변환하는 방법

자바스크립트에서는 문자열을 숫자로 바꾸는 다양한 방법을 제공합니다.

• Number('12');
• parseInt('12', 10);
• parseFloat('12.99');
• console.log(+'12');
• console.log(-'12');

Number 객체로 문자열을 숫자로 변환

문자열을 숫자로 바꾸는 첫 번째 방법은 Number 객체를 사용하는 것 입니다. 아래 예제에서 data 라고 이름지은 변수에 문자열 "12"를 할당해 보겠습니다.

const data = '12';

이 data 라는 변수에 typeof 연산자를 사용하면 이 변수는 문자열을 가지고 있다는 결과를 얻을 수 있습니다.

console.log(typeof data);

이제 Number 객체를 통해 data 변수의 문자열 값을 숫자로 다음과 같이 바꿔 보겠습니다.

Number(data);

앞서 변수의 타입을 체크했던 방법 대로 Number 객체 사용의 결과 값이 어떤 타입인지 확인해 보겠습니다.

console.log(typeof Number(data));

만일 Number 객체에 숫자로 바꿀 수 없는 문자열을 넘기면 Number 객체는 NaN(Not a Number을 리턴합니다.

console.log(Number("awesome"));

자바스크립트의 parseInt() 메소드로 문자열을 숫자로 바꾸기

문자열을 숫자로 변환하는 다른 방법은 parseInt() 메소드를 사용하는 것 입니다. parseInt() 메소드는 매개변수로 변환할 문자열과 옵셔널하게 진법 값을 받습니다. radix로 표현하는 진법 값은 2 부터 36 까지의 숫자를 가질 수 있습니다. 예를 들면 radix를 2로 입력했다면 parseInt() 메소드는 이진수 결과를 반환하게 됩니다. 마찬가지로 10을 입력하면 십진수 결과를 리턴합니다.

const data = '12';
console.log(parseInt(data, 10));

여기서 입력 문자열로 소수점을 입력하면 어떤 결과가 나올까요?

const data = '12.99';
console.log(parseInt(data, 10));

위의 결과와 같이 parseInt() 메소드는 결과 값으로 소수점이 무시된 숫자를 리턴 합니다. 만일 문자열을 소수점까지 변환하고 싶다면 parseFloat() 메소드를 사용하면 됩니다.

자바스크립트의 parseFloat() 메소드로 문자열을 숫자로 변환하기

parseFloat() 메소드는 부동수소점 숫자(floating point number)를 리턴합니다. 부동소수점 숫자의 예를 들면 12.99나 3.14 같은 숫자입니다. 이제 위의 예제에서 사용했던 parseInt() 메소드 대신 parseFloat() 메소드를 사용하면 다음과 같은 결과를 볼 수 있습니다.

const data = '12.99';
console.log(parseFloat(data));

만약 문자열의 앞이나 뒤에 공백이 들어있을 경우에도 parseInt() 메소드나 parseFloat() 메소드는 별 이상없는 결과를 리턴합니다.

const data = '             12.99             ';
console.log(parseFloat(data));

하지만 숫자가 아닌 다른 문자가 앞에 있으면 parseInt(), parseFloat()은 NaN을 리턴합니다.

const data = 'A12.99';
console.log(parseFloat(data));

자바스크립트로 숫자 변환 시 더하기 연산자 사용하기

"+", "-" 연산자로도 문자열을 숫자로 변환할 수 있습니다. 이 방법은 위의 메소드 사용과 동일하게 입력 값으로 숫자로 변환할 수 없는 문자가 들어있을 경우 NaN을 리턴합니다.

const data1 = '12';
const data2 = '12.34';

console.log(data1, +data1);
console.log(data1, -data1);
console.log(data2, +data2);
console.log(data2, -data2);