[Javascript] Number()와 parseInt()의 차이

 

Javascript에서

Number()와 parseInt()는

문자열을 숫자로 변환할 때 주로 사용됩니다.

 

이번에는

두 함수의 차이점을 정리해보도록 하겠습니다.

 

Number()

Number 객체는 숫자를 표현하는 wrapper 객체입니다.

Number 객체는 Java나 C#에서의 double과 비슷합니다.

즉, Number 객체는 소수점 이하 17자리를 표현할 수 있습니다.

 

Number()는

Number 객체의 Constructor로, Number 객체를 생성합니다.

 

 

parseInt()

parseInt()에 대한 설명은

이전의 포스팅을 참조하세요.

[Javascript] 문자열 숫자로 변환하기 (1) - parseInt()

 

 

Number()와 parseInt()

// Number() vs parseInt()
const num = Number('100');
const par = parseInt('100');

// 결과 출력
document.write("Number('100') : " + num);
document.write('<br>');
document.write("parseInt('100') : " + par);

Number()와 parseInt()는 

위와 같이 문자열을 숫자로 변환할 때 많이 사용합니다.

 

 

그렇다면,

문자열을 숫자로 변환하는

Number()와 parseInt()의 차이점은 무엇일까요?

 

 

차이점1

Number()는 오로지 숫자 타입의 문자열만 Number 타입으로 변환합니다.

// Number()
const num1 = Number('1'); // 1
const num2 = Number('1st'); // NaN
const num3 = Number('No1'); // NaN
const num4 = Number('No1A'); // NaN

// parseInt()
const int1 = parseInt('1'); // 1
const int2 = parseInt('1st'); // 1
const int3 = parseInt('No1'); // NaN
const int4 = parseInt('No1A'); // NaN


// 결과 출력 : Number()
document.write("Number('1') : " + num1 + "<br>");
document.write("Number('1st') : " + num2 + "<br>");
document.write("Number('No1') : " + num3 + "<br>");
document.write("Number('No1A') : " + num4 + "<br><br>");

// 결과 출력 : parseInt()
document.write("parseInt('1') : " + int1 + "<br>");
document.write("parseInt('1st') : " + int2 + "<br>");
document.write("parseInt('No1') : " + int3 + "<br>");
document.write("parseInt('No1A') : " + int4 + "<br>");

 

 

차이점2

Number()는 소수점을 표시할 수 있습니다.

 

// Number()
const num1 = Number('1.9'); // 1.9

// parseInt()
const int1 = parseInt('1.9'); // 1


// 결과 출력 : Number()
document.write("Number('1.9') : " + num1 + "<br>");

// 결과 출력 : parseInt()
document.write("parseInt('1.9') : " + int1 + "<br>");

 

 

차이점3

parseInt()는 2번째 파라미터를 이용하여, 문자열을 2진법, 16진법 숫자를 10진법으로 변환할 수 있습니다.

 

// Number()
const num1 = Number('11'); // 11

// parseInt()
const int1 = parseInt('11'); // 11
const int2 = parseInt('11', 2); // 3
const int3 = parseInt('11', 16); // 17


// 결과 출력 : Number()
document.write("Number('11') : " + num1 + "<br><br>");

// 결과 출력 : parseInt()
document.write("parseInt('11') : " + int1 + "<br>");
document.write("parseInt('11', 2) : " + int2 + "<br>");
document.write("parseInt('11', 16) : " + int3 + "<br>");

 

 

차이점4

null, boolean, empty string 등의 처리에 차이가 있습니다.

 

// Number()
const num1 = Number(); // 0
const num2 = Number(true); // 1
const num3 = Number(null); // 0
const num4 = Number(''); // 0

// parseInt()
const int1 = parseInt(); // NaN
const int2 = parseInt(true); // NaN
const int3 = parseInt(null); // NaN
const int4 = parseInt(''); // NaN


// 결과 출력 : Number()
document.write("Number() : " + num1 + "<br>");
document.write("Number(true) : " + num2 + "<br>");
document.write("Number(null) : " + num3 + "<br>");
document.write("Number('') : " + num4 + "<br><br>");

// 결과 출력 : parseInt()
document.write("parseInt() : " + int1 + "<br>");
document.write("parseInt(true) : " + int2 + "<br>");
document.write("parseInt(null) : " + int3 + "<br>");
document.write("parseInt('') : " + int4 + "<br><br>");

 

---

 

예제를 통해

Number()와 parseInt()의 차이점을 알아보았습니다.