[자바스크립트] 형변환 Number(), parseInt(), parseFloat()의 차이

Number()

---

문자열을 인자로 받아 숫자형으로 반환합니다.

let num = Number('123'); //123

 

숫자가 아닌 경우 NaN을 반환합니다.

let num = Number('12삼'); //NaN

 

 

parseInt()

---

  Number()와  동일하게 문자열 인자를 받아 숫자형을 반환합니다.

다른 점은 숫자로 시작하는 경우에는 숫자가 끝날 때까지만 형 변환을 하여 저장합니다.

시작이 숫자가 아니면  Number()와  마찬가지로 NaN을 저장합니다.

let num1 = parseInt('1000원'); //num에 1000이 저장
let num2 = parseInt('가격 1000월'); //num에 NaN이 저장

 

구문

Number.parseInt(string)
Number.parseInt(string, radix);

 

매개변수

• string
  • 파싱 할 값입니다. 문자열이 아닐 경우 toString 추상 연산을 사용해 문자열로 변환합니다. 문자열의 선행 공백은 무시합니다.
• radix
  • string의 진수를 나타내는 2부터 36까지의 정수입니다.
  • radix를 생략하면 기본값인 10진수로 계산됩니다.
    • 하지만 radix가 항상 기본값인 10이 적용이 되지 않을 수도 있습니다. (ex. 숫자가 0x로 시작하는 경우) 그렇기 때문에 radix를 지정해주는 것이 안전합니다.

 

 

parseFloat()

---

문자형을 숫자형으로 변환하기

var 변수 = parseInt(문자);    //문자를 정수형 숫자로 변환
var 변수 = parseFloat(문자);  //문자를 실수형 숫자로 변환
var 변수 = Number(문자);      //문자를 정수&실수형 숫자로 변환

 

예제

var x = "999";      //문자형 999
var y = "99.99";    //문자형 99.99

var a = parseInt(x);    //숫자형 정수 999
var b = parseInt(y);    //숫자형 정수 99

var a = parseFloat(x);    //숫자형 실수 999
var b = parseFloat(y);    //숫자형 실수 99.99

var a = Number(x);    //숫자형 정수 999
var b = Number(y);    //숫자형 실수 99.99

 

 

미니 프로젝트

---

앞전에 공부했던 slice와  parseInt  를 사용해서 Box 1 버튼이나  Box 2 버튼을 눌렀을 때 버튼의 넓이를 뽑아내는 것을 구현해 보았습니다.

 

 

---

알고넘어가자!

 

getComputedStyle

 

인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다. 

 

 

구문

ar style = window.getComputedStyle(element[, pseudoElt]);

 

 

element

매개변수에는 element 선택자가 들어갑니다.

 

pseudoElt

일치시킬 의사 요소(pseudo element)를 지정하는 문자열입니다.

이전에는 pseudoElt 매개변수가 필수였지만 다른 주요 브라우저에서는 pseudoElt 매개

 

 

 

Reference

Number - JavaScript | MDN

parseInt() - JavaScript | MDN

Window.getComputedStyle() - Web API | MDN