[javascript] 자바스크립트 parseInt 사용 방법 (문자열을 숫자로 변환)

참고: https://www.freecodecamp.org/news/parseint-in-javascript-js-string-to-int-example/

이 튜토리얼에서는 javascript 함수 parseInt()에 대해 설명하겠습니다. 이 parseInt() 함수는 문자열을 파싱해서 숫자나 NaN(Not a Number)을 리턴합니다.

1. parseInt 작동 방식

parseInt() 함수를 사용하는 주요 목적은 문자열에서 숫자를 추출하기 위함입니다. 이 함수는 입력받은 문자열을 실제 숫자값으로 바꾸어 반환합니다. 구문은 다음과 같습니다.

parseInt(string)

다음의 예를 살펴보겠습니다.

const myNumber = '3';
console.log(2 + myNumber);
// returns 23

위의 예제에서 '3'은 실제 숫자가 아니라 문자열입니다. 문자열에 2를 더하면 숫자 형식의 문자열에 2를 더하는 것이기 때문에 결국 '23'이 됩니다. 문자열에 문자열을 붙인 것과 같은 결과를 반환합니다.

여기서 parseInt() 함수를 사용하여 '3' 문자열에서 실제 숫자를 추출할 수 있습니다. 다음은 예제 입니다.

const myNumber = '3';
console.log(2 + parseInt(myNumber));
// returns 5

여기서 parseInt() 함수는 문자열 '3'을 숫자 3으로 변환했습니다. 그러므로 2를 더하면 숫자 더하기 숫자이므로 결과는 5가 됩니다.

처음에 parseInt() 함수는 정수와 NaN을 반환한다고 했는데 NaN은 언제 반환되는 것일까요? 이런 결과는 매개변수로 입력받는 문자열에 숫자가 아닌 다른 문자로 시작했을 때 발생합니다. parseInt() 함수는 전달받은 매개변수의 앞쪽 먼저 확인 하기 때문에 "age is 50"과 같은 것은 시작부분이 숫자가 아닌 문자로 시작하기 때문에 실제 숫자로 변환하지 못하고 NaN을 반환합니다.

const age = 'age is 50';
console.log(parseInt(age));
// returns NaN

이제 문자열을 바꿔서 숫자 부분을 앞으로 이동한 결과를 알아보겠습니다.

const age = '50 is the age';
console.log(parseInt(age));
// returns 50

위의 예제에서는 문자열의 시작이 숫자로 시작하기 때문에 parseInt() 함수는 이 숫자를 결과로 반환합니다. 여기서 parseInt() 함수는 부동 소수점 값은 무시합니다. 위의 문자열에서 나이가 50.05 였으면 50을 반환하고 .05는 무시합니다. 같은 방법으로 "50 100 150 200"과 같은 문자열이 있으면 결과로 50만 반환됩니다. 이는 parseInt() 함수가 주어진 문자열의 첫 번째 값만 추출하도록 짜여졌기 때문입니다. 그리고 "50istheage" 같이 띄어쓰기 구분이 없는 문자열도 50만을 추출하여 반환하게 되어있습니다.

2. radix 매개변수

parseInt() 함수는 두 번째 매개변수로 radix를 받습니다. 이 매개변수로는 사용할 숫자 진법을 지정합니다. radix가 생략되면 10을 기본값으로 사용합니다. 구문은 다음과 같습니다.

parseInt(string, radix)

이 radix 매개변수의 범위는 2에서 36 사이의 정수입니다. 여기서 radix 값이 2보자 작거나 36보다 크면 NaN이 반환됩니다. 만약 radix 값으로 16를 넣었다면 문자열에 포함된 숫자는 10진수로 여기고 이 값을 16진법의 숫자로 반환합니다. 다음의 간단한 예를 보면:

console.log(parseInt("50", 16));

// returns 80

여기서 리턴 값은 80 입니다. 왜냐하면 10진수 50을 16진수로 변환하면 80이기 때문입니다.

3. 정리

이 튜토리얼에서 parseInt() 함수를 사용하여 문자열에서 숫자를 추출하는 방법을 살펴보았습니다. radix 또한 반환된 정수의 진법을 변환하기 위해 사용하는 것도 확인했습니다.

관련 글

자바스크립트 parseFloat 사용 방법