Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript 메소드:toFixed() – 숫자 메소드

자바스크립트에는 숫자에 고정 소수점을 설정한 다음 이를 문자열로 반환할 수 있는 Number 개체 메서드가 있습니다. 이 기사에서는 이 방법의 구문에 대해 설명하고 사용 방법을 설명합니다.

JavaScript의 기본 요소에 대해 이야기할 때 개체가 아니고 관련된 메서드가 없는 항목에 대해 이야기합니다. 기본 값을 가져와서 객체로 만들려면 값이나 데이터 유형을 둘러볼 수 있는 기본 래퍼로 이를 수행할 수 있습니다.

숫자에는 기본 래퍼 개체가 있습니다. 숫자의 문자열 표현을 수행할 수 있는 메서드가 있는 실제 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">Enter a number:</label>
     <input id="to-fixed" onchange=handleChange(event) type="text" name="inputVal" value=""/>
     <label for="num-digits">Num places:</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>

여기서 Number 객체의 toFixed() 메서드를 사용하여 원하는 길이로 숫자를 만듭니다. 메서드 구문은 다음과 같습니다.

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

양식을 다룰 때 한 가지 기억해야 할 것이 있습니다. 이러한 값은 문자열로 제공됩니다. 따라서 toFixed() 를 사용하려면 방법을 사용하려면 숫자 표현으로 변환해야 합니다.

여기서 Number(n) 래퍼로 입력을 캡슐화하여 이를 수행합니다. 첫 번째 변수 x는 줄이려는(또는 경우에 따라 늘리려는) 부동 소수점 숫자입니다. 두 번째 변수 y는 소수점 이하 자릿수입니다.

다음 숫자 중 몇 가지를 직접 시도하여 코드 편집기에서 무엇을 얻을 수 있는지 확인하십시오.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

Enter a number:         Num places:
//floats
45.45678                3  // Returns '45.457'
//integers
45                    	 5  // Returns '45.00000'
//exponential notation
1e-10                   3  // Returns '0.00'
1.23e+20                2  // Returns '123000000000000000000.00'
1.23e-10                2  // Returns '0.00'

보시다시피 자릿수는 Num Places 입력에 연결한 y 변수에 따라 조정됩니다. 숫자가 Num Places 값을 보상할 만큼 충분히 길지 않으면 원하는 길이에 도달할 때까지 문자열을 0으로 채웁니다.

숫자가 길고 자릿수 입력이 소수점 뒤에 있는 사용 가능한 자릿수보다 짧으면 숫자를 줄이고 끝을 반올림하여 숫자의 원하는 문자열 표현을 반환합니다.

참고 :조작되고 반환된 후 논리에서 숫자로 작업하려면 위에서 했던 것처럼 Number 기본 래퍼를 사용하여 숫자로 다시 변환해야 합니다.

다음에 무엇을 배울까요?

JavaScript 난수:완전한 가이드

JavaScript ParseInt:단계별 가이드

JavaScript 카운트다운 타이머:자습서

자바스크립트 toString

JavaScript toUpperCase 및 toLowerCase