[JavaScript] string을 number로 변환하는 7가지 방법

string을 number로 변환

1. parseInt(str) - 소수점을 반올림하여 정수로 반환
2. parseFloat(str) - 소수점까지 반환
3. Number(str)
4. +str (Unary Operator)
5. Math.floor(str) - 소수점을 버림하여 정수로 반환
6. str * 1
7. ~~str (Double tlide Operator) - 소수점을 버림하여 정수로 반환 (음수에서는 소수점 올림)

테스트 결과

JSBench.me 사이트로 직접 테스팅 해 본 결과 Math.floor(), parseFloat(), parseInt()가 확연히 느리고 나머지는 비슷했다.

그렇다고 협업 할 때 +”1000” ~~”1000” 1 * “1000” 이런 식으로 썼다가는 욕 먹을 게 분명해 보인다. 😙😙😙

💡 결론: Number()를 사용하자!

Airbnb JavaScript 스타일 가이드에 친절하게 설명되어 있다. 아마 Airbnb에서도 에러 방지 목적 외에 가독성을 위해 Number()를 사용하는 게 아닐까 싶다.

형변환을 하는 경우 Number를 사용하고, 문자열을 파싱하는 경우에는 기수를 인자로 넘겨 parseInt를 사용하세요.

parseInt 함수는 특정 기수(radix)에 따른 문자열 인자의 내용을 해석하고, 이에 따라 판단되는 정수 값을 만듭니다. 이때 문자열 맨앞의 공백은 무시됩니다. 만약 기수가 undefined 또는 0이라면 10으로 취급되며, 숫자가 0x 또는 0X 문자로 시작하는 경우엔 16진수로 취급됩니다. ECMAScript 3와의 차이는 8진수 해석을 허용하는가에 있습니다. 많은 구현체들이 2013부터 이러한 동작을 채택하지 않았는데, 오래된 브라우저들을 지원해야 하므로 기수를 항상 명시해야 합니다.

const inputValue = '4';

// bad 💩
const val = new Number(inputValue);

// bad 💩
const val = +inputValue;

// bad 💩
const val = inputValue >> 0;

// bad 💩
const val = parseInt(inputValue);

// good 👍
const val = Number(inputValue);

// good 👍
const val = parseInt(inputValue, 10);

여담

string to number 변환처럼 다양한 방법이 있을 때 뭘 써야 할지 혼란스러운데, 이미 대기업에서 수많은 검증으로 정해놓은 컨벤션이 있다는 건 정말이지 한 줄기 빛과 같다... 좋은 레퍼런스를 마음껏 참고할 수 있는 게 역시 개발 문화의 최고 장점이다. 👏👏👏
한줄 한줄 쓸 때마다 스스로를 검열하는 게 당장은 시간이 조금 걸리겠지만, 나중에 취직하고 협업할 때 다 시너지가 되어 돌아오지 않을까? 좋은 코딩 습관들을 몸에 익혀 두자. 💪