자바스크립트 parseInt() 함수를 활용한 문자열 숫자 변환하기

 

 

안녕하세요!

이번 포스팅에서는 자바스크립트의 내장 함수인 parseInt() 함수에 대해 자세히 알아보려고 합니다. 정수로 변환해야 하는 문자열이 있을 때 유용하게 활용할 수 있는 parseInt() 함수에 대한 내용을 다뤄보겠습니다. 문자열을 정수로 변환하는 프로세스와 함께 
parseInt() 함수의 활용법에 대해서도 알아보겠습니다.

---

parseInt() 함수의 소개

---

parseInt() 함수는 자바스크립트에서 제공하는 내장 함수 중 하나로, 문자열을 정수로 변환하는 기능을 수행합니다. 이 함수는 주어진 문자열을 분석하고, 해당 문자열이 숫자로 시작하는 부분을 추출하여 정수로 변환합니다. 문자열의 첫 부분부터 숫자로 변환 가능한 부분까지만 고려하며, 숫자로 변환할 수 없는 부분이 나타나면 변환을 중단합니다. parseInt() 함수는 변환된 정수 값을 반환하며, 필요한 경우 진수(base)를 인자로 지정하여 다양한 진법의 문자열도 변환할 수 있습니다. 이 함수를 사용하여 문자열을 숫자로 변환하거나 진법 변환을 수행할 수 있습니다.

 

---

parseInt() 함수의 기본 사용 방법

자바스크립트의 parseInt() 함수는 문자열을 정수로 변환하는 함수입니다. 이 함수는 문자열을 파싱하고 그 결과를 정수로 반환합니다. 다음은 parseInt() 함수의 기본 사용법에 대한 설명입니다.

---

함수의 기본 사용법

parseInt(string, radix);

 

• string
  변환할 문자열입니다. 숫자로 시작하는 부분까지만 변환합니다. 숫자로 시작하지 않는 부분이 나타나면 변환을 멈춥니다.
  
  
• radix (optional)
  변환할 숫자의 진법을 지정합니다. 기본값은 10진법입니다. 보통 10진법을 사용하지만, 다른 진법(예: 16진법, 8진법)의 숫자를 파싱할 때에는 이 인자를 사용합니다.

 

함수의 사용 예시

const num1 = parseInt("123");       // 기본적으로 10진법으로 변환됩니다. 결과: 123
const num2 = parseInt("0101", 2);   // 2진법으로 변환됩니다. 결과: 5
const num3 = parseInt("0x1A", 16);  // 16진법으로 변환됩니다. 결과: 26
const num4 = parseInt("17", 8);     // 8진법으로 변환됩니다. 결과: 15

주의할 점은 parseInt() 함수는 숫자로 변환할 수 있는 부분까지만 변환하며, 변환할 수 없는 문자가 나타나면 변환을 멈춥니다. 이러한 동작을 이해하고 사용하는 것이 중요합니다.

또한, parseInt() 함수는 소수점 이하의 부분은 무시하고 정수로 변환합니다. 만약 소수를 포함한 숫자를 파싱하고 싶다면 parseFloat() 함수를 사용해야 합니다.

---

parseInt() 함수의 NaN 처리

parseInt() 함수는 문자열을 정수로 변환하는 데 사용되지만, 모든 입력이 유효한 숫자로 변환될 수 있는 것은 아닙니다. 때로는 변환할 수 없는 문자열이 주어지는 경우가 있는데, 이럴 때 parseInt() 함수는 NaN (Not-a-Number) 값을 반환합니다. 이를 처리하려면 몇 가지 주의사항을 알고 있어야 합니다.

---

1. 숫자로 변환할 수 없는 문자열
만약 변환하려는 문자열이 숫자로 변환될 수 없는 문자열인 경우, parseInt() 함수는 NaN을 반환합니다. 이는 "Not-a-Number"를 나타내는 값으로, 숫자가 아니라는 것을 나타냅니다.

2. 공백과 숫자 변환
parseInt() 함수는 문자열의 처음부터 시작하여 숫자로 변환할 수 있는 부분까지만 변환합니다. 따라서 문자열의 앞쪽에 공백이 있으면 해당 공백은 무시하고 변환을 진행합니다. 하지만 문자열 중간에 숫자 변환이 불가능한 문자가 나타나면 변환을 멈추고 그전까지 변환한 숫자 부분을 반환합니다.

3. 진법과 NaN
parseInt() 함수의 두 번째 인자로 진법을 지정할 수 있습니다. 하지만, 진법 값이 유효하지 않거나 2보다 작거나 36보다 큰 경우에는 결과가 NaN이 될 수 있습니다.


예를 들어, 다음은 parseInt() 함수의 NaN 처리에 관련된 예시입니다:

const num1 = parseInt("123");     // 유효한 숫자로 변환됩니다. 결과: 123
const num2 = parseInt("abc");     // 숫자로 변환할 수 없는 문자열, 결과: NaN
const num3 = parseInt("   456");  // 앞의 공백은 무시, 결과: 456
const num4 = parseInt("123abc");  // "123"까지 변환 후 변환 불가능한 문자, 결과: 123
const num5 = parseInt("10", 2);   // 2진법으로 변환할 수 없는 문자 "10", 결과: NaN

따라서 parseInt() 함수를 사용할 때에는 반환된 값이 NaN인지 체크하여 올바른 처리를 할 수 있어야 합니다. 이를 위해 isNaN() 함수를 사용하거나 엄격한 비교(===)를 통해 확인할 수 있습니다.

---

parseInt() 함수의 부동소수점 처리

parseInt() 함수는 문자열을 정수로 변환하는 함수로, 부동소수점 숫자를 변환하는데는 사용되지 않습니다. parseInt() 함수는 소수점 이하의 숫자 부분을 무시하고 정수 부분만 변환합니다. 따라서 부동소수점 숫자를 parseInt() 함수로 변환하면 소수점 이하 부분은 무시되고 정수만 반환됩니다.

---

예시 코드

const floatNum = 3.14;
const intNum = parseInt(floatNum); // 결과: 3

위의 경우 parseInt() 함수는 부동소수점 숫자인 3.14를 변환하여 정수 부분인 3을 반환합니다.


부동소수점 숫자를 정수로 변환하는데 parseInt() 함수를 사용하지 않는 것이 좋습니다. 만약 부동소수점 숫자를 정수로 변환하려면 다른 방법을 사용해야 합니다. 가장 간단한 방법은 소수점 이하 부분을 버리고 정수 부분만 가져오는 것입니다.

const floatNum = 3.14;
const intNum = Math.floor(floatNum); // 결과: 3

이렇게 하면 Math.floor() 함수를 사용하여 소수점 이하를 버린 정수 부분을 얻을 수 있습니다. 다른 올림이나 반올림 함수를 사용하여 원하는 결과를 얻을 수도 있습니다.

---

parseInt() 함수의 주의사항

---

1. 진법 지정
parseInt() 함수의 두 번째 인자로 진법을 지정할 수 있습니다. 이 값은 해당 숫자의 진법을 나타냅니다. 기본값은 10진법이며, 다른 진법(예: 16진법, 8진법)을 파싱하려면 해당 진법 값을 명시해야 합니다.

2. 문자열의 시작
문자열이 숫자로 시작하지 않는 경우, parseInt() 함수는 숫자로 시작하는 부분까지만 변환하고 나머지 문자는 무시합니다. 따라서 입력 문자열이 숫자로 시작하지 않으면 원하지 않는 결과가 발생할 수 있습니다.

3. 공백 처리
문자열의 앞쪽에 공백이 포함되어 있으면 parseInt() 함수는 해당 공백을 무시하고 변환을 시작합니다. 하지만 문자열 내부에 공백이 포함되어 있는 경우, 해당 부분에서 변환을 멈출 수 있습니다.

4. 부호 처리
parseInt() 함수는 부호를 처리합니다. 즉, 문자열이 '+'나 '-'로 시작하는 경우 부호가 적용되어 변환됩니다.

5. 변환 결과 확인
parseInt() 함수의 반환값이 NaN인 경우, 변환이 실패한 것을 나타냅니다. 따라서 반환값이 NaN인지 확인하여 유효한 변환이 이루어졌는지 확인하는 것이 중요합니다.

6. 진법 값 유효성
두 번째 인자로 지정하는 진법 값은 2에서 36 사이의 값을 가질 수 있습니다. 이 범위를 벗어나면 결과가 NaN이 될 수 있습니다.

7. 소수점 및 지수 처리
parseInt() 함수는 소수점 이하의 숫자나 지수 표기법을 지원하지 않습니다. 정수 부분만 변환됩니다.

8. 문자열이 빈 경우
빈 문자열("")을 parseInt()에 전달하면 결과로 NaN이 반환됩니다.

9. 자동 형변환 주의
자동으로 숫자로 변환되는 것이 아니라 명시적으로 문자열을 전달해야 합니다. 예를 들어, 숫자가 아닌 변수를 문자열로 변환하여 parseInt()에 전달해야 합니다.

10. 라디오타입 문자 처리
0x 또는 0X로 시작하는 문자열은 16진수로 간주됩니다. 하지만 '0x' 또는 '0X'가 아닌 문자열의 경우 정상적인 10진수로 처리됩니다.


예시 코드

const num1 = parseInt("123");        // 결과: 123
const num2 = parseInt("0101", 2);    // 결과: 1 (2진법)
const num3 = parseInt("0x1A", 16);   // 결과: 26 (16진법)
const num4 = parseInt("  123  ");    // 결과: 123 (앞의 공백 무시)
const num5 = parseInt("abc");        // 결과: NaN (숫자로 변환 불가능)
const num6 = parseInt("+123");       // 결과: 123 (부호 처리)
const num7 = parseInt("00123");      // 결과: 123 (앞의 0 무시)
const num8 = parseInt("42", 10.5);   // 결과: 42 (소수로 된 진법 값은 무시)
const num9 = parseInt("123.456");    // 결과: 123 (소수점 이하 무시)
const num10 = parseInt("0x1A", 8);   // 결과: 0 (8진법으로 변환 불가능)

 

 

---

최종 정리


오늘은 자바스크립트 parseInt() 함수에 대한 내용들을 정리해 봤습니다. 웹 개발을 하면서 데이터 타입을 변환하는 것은 매우 중요한 부분입니다. parseInt() 함수와 같은 기능들을 활용한다면 코드의 유지보수성과 신뢰성을 높일 수 있습니다. 


다음 포스팅에는 parseInt() 함수에서 처리하지 못한 소수점을 처리해 주는 parseFloat() 함수에 대해서 다뤄보도록 하겠습니다.

감사합니다.