본문 바로가기
programming/javascript

자바스크립트 숫자 변환하기 convert to number

by 개코 - 개발과 코딩 2021. 12. 7.

자바스크립트는 숫자 변환을 위한 전역 함수를 제공한다. 숫자 변환을 위한 전역함수는 3가지이며 Number(), parseFloat(), parseInt() 함수이다. 단순히 숫자로써 변환할 수 있고, 부동소숫점이 있는 숫자로도 변경이 가능하다. 정수로 변환이 되면 소숫점이하 모두 없어진다.

자바스크립트 숫자 변환하기
convert to number

자바스크립트는 문자열을 숫자로 변환이 가능하다.

숫자에서 다른 형태의 숫자로도 변경이 가능하다.

이를 가능하게 하는 것의 3가지 함수가 있다.

  • 단순히 숫자로 변환을 위한 Number() 함수
  • 부동소숫점 변환을 위한 parseFloat() 함수
  • 정수 변환을 위한 pareInt() 함수

위의 3가지는 자바스크립트 개발을 하면서 많이 사용되는 것들이기도 하다.

숫자변환

숫자로써 변환해서 사용되는 일은 많이 있다.

정확한 수치를 계산하기 위해, 또는 불필요한 자릿수를 없애기 위해 등등 많이 존재한다.

자바스크립트의 숫자형 문자열이 계산이 가능하지만 이는 어디까지나 예상치 못한 결과를 보여줄 수 있다.

가급적 숫자형태의 문자열이라고 하더라도 숫자로 변경하고 사용하는 것이 좋다.

숫자변환을 위한 함수는 모두 글로벌 전역 함수이기 때문에 모든 데이터값에 사용이 가능하다.

사용법은 다음과 같다.

Number(숫자);
parseFloat(숫자);
parseInt(숫자);

샘플코드

위에서 언급된 사용법으로 간단한 자바스크립트 예제를 만들어 본다.

함수를 사용하고 숫자를 넣어주면 그만이다.

코드가 길어보이지만 변환되는 부분들만 보도록 하자.

<!DOCTYPE html>
<html>
    <body>

        <h2>자바스크립트 숫자형 변환</h2>
        <div id="cont">
            <p id="ret1"></p>
            <p id="ret2"></p>
            <p id="ret3"></p>
        </div>

        <script>
            
            console.log("----------");
            
            let vNumber = "65.6565";

            vNumber = Number(vNumber);
            console.log(typeof(vNumber), vNumber);
            document.getElementById("ret1").innerText = vNumber;

            vNumber = parseFloat(vNumber);
            console.log(typeof(vNumber), vNumber);
            document.getElementById("ret2").innerText = vNumber;

            vNumber = parseInt(vNumber);
            console.log(typeof(vNumber), vNumber);
            document.getElementById("ret3").innerText = vNumber;

            console.log("----------");

        </script>

    </body>
</html>

결과 화면을 보자.

가시적인 부분은 같아보이지만 문자열이 숫자형 데이터로 변환된 것을 확인할 수 있다.

각 함수가 제대로 동작하는 것을 볼 수 있다.

반응형

댓글