[JavaScript] 문자열을 숫자로 반환하는 메서드 Number(), parseInt()

문자열 숫자를 숫자로 만드는이유

자바스크립트에서는 "문자열 숫자"가 존재한다.

문자열 숫자란 1,2,3,4와 같이 숫자의 모양이지만 숫자로서의 기능은 하지 못하고 문자로서 존재하는 숫자,

즉 "문자형 데이터"를 말한다.

예를들어 prompt와 같은 메서드를 사용할 경우 사용자가 숫자를 입력해도 문자형 데이터로 값을 반환 받는다.

이렇게 받은 문자형 데이터는 숫자임에도 불구하고 문자형이기 때문에 산술연산이 불가능하다.

이를 가능하게 만들기 위해 Number()와 parseInt() 메서드를 사용하는 것이다.

 

---

 Number() 

Number 메서드는 말 그대로 숫자로 반환해주는 메서드이다.

Number("123"); // 123
Number("1.23") === 1.23 // true
Number("12.3"); // 12.3
Number("12.00"); // 12
Number("-1.23"); // -1.23

값이 만약 소수점이라면 소수점 그대로 표현해 준다.
그 값은 소수점 이하 17자리까지 표현해 주며 그 이상은 반올림하여 나타난다.

---

Number(); // 0
Number(''); // 0
Number(null); // 0
Number(true); // 1
Number(false); // 0

Number 메서드에서는 빈 데이터값과 논리형 데이터를 숫자로 반환하여준다.

---

Number('1st'); // NaN
Number('No1'); // NaN
Number("unicorn"); // NaN
Number(undefined); // NaN
Number("100a"); // NaN

하지만 그 값에 숫자 이외의 다른 문자형 데이터가 들어올 경우 NaN이 뜨게 된다.

NaN이란? not a number 라는 뜻으로, 숫자가 아니라는 오류 메세지

// 이외 가능한 수
Number("123e-1"); // 12.3
Number("0x11"); // 17
Number("0b11"); // 3
Number("0o11"); // 9

// 기타
Number("-Infinity"); // -Infinity

참고 사이트 : mdn

---

 parseInt() 

parseInt()는 문자형 데이터를 정수로 바꿔주는 메서드이다.

소괄호 안에는 문자형 데이터가 들어가며 만약 문자형 데이터가 아닌 수가 들어올 경우

문자열로 변환한 다음 다시 계산한다.

parseInt는 진수를 입력할 수 있는데 2진법부터 36진법까지 입력 가능하며 그 범위를 벗어나는 경우 NaN을 반환한다.

진수를 입력하지 않았을 경우 10진수로 입력되고, 값을 입력했을 경우 입력된 값을 진법으로 읽고 다시 10진법으로 변환하여 반환한다.

참고사이트 : mdn

// 기본형
parseInt(문자형 데이터);
parseInt(문자형 데이터, 진수);

 

// 문자형 숫자를 입력했을 경우
parseInt("123"); // 123
parseInt("1.23") === 1 // true
parseInt("12.3"); // 12
parseInt("12.00"); // 12
parseInt("-1.23"); // -1

parseInt()는 정수로 바꿔주기 때문에 소숫점 자리를 제외하고 보여준다.

---

// 숫자를 입력했을 경우
parseInt(123) // 123

숫자를 입력했을 경우 문자열로 한번 변환한 다음 정수로 반환한다.
123 → '123' → 123

---

// 문자와 숫자를 섞어서 입력했을 경우
parseInt("10string") // 10
parseInt("10string13") // 10
parseInt("string10") // NaN

문자와 숫자를 섞어서 입력했을 경우 문자가 나오기 이전까지의 숫자를 정수로 변환하여 내놓는다.
문자가 첫번째로 나올경우 숫자가 없는 것으로 판단하여 NaN오류가 발생한다.

---

// 공백을 함께 입력했을 경우
parseInt("    10") // 10
parseInt("10      ") // 10
parseInt("    10      15") // 10

처음에 오는 공백 문자는 없는 것으로 허용하여 이후 나오는 숫자를 반환해주지만,
숫자 뒤에 오는 공백 문자는 문자로 판단하여 삭제한다.

---

// 빈 데이터값과 논리형 데이터를 입력했을 경우
parseInt(); // NaN
parseInt(true); // NaN
parseInt(null); // NaN
parseInt(""); // NaN
parseInt(false); // NaN
parseInt("false"); // NaN

모든 빈 데이터와 논리형 데이터 값을 인식하지 못한다.

추가 참고사이트 : 블로그