Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트 toFixed() 메소드 완벽 가이드 – 숫자를 고정 소수점 문자열로 변환하기

자바스크립트 toFixed() 메소드란?

자바스크립트의 Number 객체에는 숫자의 소수점 자릿수를 지정한 길이로 고정한 뒤, 그 결과를 문자열로 반환해 주는 메소드가 있습니다. 바로 toFixed()입니다. 이 글에서는 toFixed() 메소드의 문법과 실제 활용 방법을 예제와 함께 자세히 살펴보겠습니다.

원시 값과 래퍼 객체 이해하기

자바스크립트에서 원시 값(primitive)이란 객체가 아니며 자체 메소드를 가지고 있지 않은 데이터를 말합니다. 하지만 개발을 하다 보면 원시 값을 객체처럼 다뤄야 하는 경우가 생깁니다. 이럴 때 사용하는 것이 바로 래퍼 객체(wrapper object)로, 원시 값이나 데이터 타입을 감싸서 객체로 만들어 주는 역할을 합니다.

숫자 역시 Number라는 원시 래퍼 객체를 가지고 있습니다. 이를 활용하면 문자열 형태의 숫자를 실제 Number 객체로 변환할 수 있고, 변환된 값에는 다양한 숫자 메소드를 적용할 수 있습니다.

예를 들어 화면의 입력 폼에서 사용자가 숫자를 입력했다고 가정해 봅시다. 이때 전달받은 입력값을 Number로 변환하면, 여러 가지 숫자 메소드를 사용해 원하는 작업을 손쉽게 처리할 수 있습니다.

폼과 함께 사용하는 예제

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="to-fixed">숫자를 입력하세요:</label>
     <input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
     <label for="num-digits">소수 자릿수:</label>
     <input id="num-digits" onchange=handleChange(event) type="text" name="numVal" value=""/>
 
     <input type="submit" value="Submit" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = '';
     let numVal = '';
 
     const handleChange = e => {
       if(e.target.name === "inputVal") {
         inputVal = e.target.value;
       } else {
         numVal = e.target.value;
       }
       console.log(e.currentTarget, e.target)
 
     }
     const handleSubmit = e => {
       e.preventDefault();
       console.log(e)
       const root = document.querySelector("#root");
       root.innerHTML = Number(inputVal).toFixed(Number(numVal));
       console.log(Number(inputVal).toFixed(5))
 
     }
     const inputValue = document.getElementById("to-fixed").value
   </script>
 </body>
</html>

toFixed() 메소드의 문법

위 예제에서는 Number 객체의 toFixed() 메소드를 사용해 숫자를 원하는 길이로 맞춰 출력했습니다. 이 메소드의 기본 문법은 다음과 같습니다.

const toFixedNumDigits = Number([x]).toFixed(Number([y]));

폼 데이터를 다룰 때는 한 가지를 반드시 기억해야 합니다. 바로 입력값은 항상 문자열로 전달된다는 점입니다. 따라서 toFixed() 메소드를 사용하려면 먼저 값을 Number 타입으로 변환해 주어야 합니다.

위 코드에서는 입력값을 Number(n) 래퍼로 감싸서 변환했습니다. 첫 번째 변수 x는 자릿수를 줄이거나 늘리고 싶은 부동 소수점 숫자이며, 두 번째 변수 y는 소수점 이하로 표현할 자릿수를 의미합니다.

실행 결과 예시

여러 숫자를 직접 입력해 어떤 결과가 반환되는지 코드 에디터에서 확인해 보세요.

입력 숫자지정 자릿수반환 결과
45.45678 (부동 소수점)3'45.457'
45 (정수)5'45.00000'
1e-10 (지수 표기법)3'0.00'
1.23e+20 (지수 표기법)2'123000000000000000000.00'
1.23e-10 (지수 표기법)2'0.00'

표에서 볼 수 있듯이 소수점 이하 자릿수는 입력한 y 값에 따라 달라집니다. 숫자의 길이가 지정한 자릿수에 못 미치면 원하는 길이에 도달할 때까지 0으로 채워집니다. 반대로 숫자가 너무 길어 지정한 자릿수가 소수점 이하 실제 자릿수보다 짧으면, 숫자가 잘리고 끝자리에서 반올림되어 원하는 문자열 형태로 반환됩니다.

꼭 알아두어야 할 주의 사항

참고: toFixed()가 반환하는 값은 문자열입니다. 따라서 변환된 결과를 이후 로직에서 숫자로 사용하려면, 앞선 예제에서처럼 Number 원시 래퍼를 이용해 다시 숫자로 변환해 주어야 합니다.

  • toFixed()의 인수는 0부터 100 사이의 정수만 허용되며, 범위를 벗어난 값을 넣으면 RangeError가 발생합니다.
  • 인수를 생략하면 기본값 0이 적용되어 소수점 없는 정수 형태의 문자열을 반환합니다.
  • 부동 소수점 연산의 특성상 (1.005).toFixed(2)가 "1.01"이 아니라 "1.00"을 반환하는 등 미세한 오차가 생길 수 있으므로, 정확한 반올림이 필요한 계산에서는 주의가 필요합니다.
  • NaN이나 Infinity에 호출하면 각각 "NaN", "Infinity"라는 문자열을 그대로 반환합니다.

다음에 배울 내용

toFixed()를 익혔다면 아래 주제들도 함께 살펴보세요.

  • 자바스크립트 난수(Random Number) 생성 완벽 가이드
  • 자바스크립트 parseInt 단계별 가이드
  • 자바스크립트 카운트다운 타이머 만들기 튜토리얼
  • 자바스크립트 toString 메소드
  • 자바스크립트 toUpperCase와 toLowerCase 메소드