2022. 5. 24. 02:45ㆍProgram/JavaScript
040_자바스크립트 소수점 자리수 지정하기
[적용]
- 숫자 3.14159265를 문자열 '3.14'로 변환하고 싶을 때
- 숫자 10을 문자열 '10.00'으로 변환하고 싶을 때
[문법]
| 메소드 | 의미 | 반환 |
| 숫자값.toFixed([자리수*]) | 소수점 이하 자리수 지정 | 문자열 |
| 숫자값.toPrecision([자리수*]) | 자리수 지정 정밀도 반환 | 문자열 |
* 생략시 0
[내용]
toFixed()는 소수점의 자릿수 지정이 가능하며, 소수점 이하는 지정된 자릿수 변환 후 문자열로 반환한다.
(0.33333).toFixed(2); // 0.33(문자열)
소수점 이하의 자리수가 줄어들 경우 값을 근사치로 변환한다.
(123.5678).toFixed(1); // 123.6(근사치로 변환)
소수점 이하의 자리수가 늘어날 경우 0으로 채워진다.
(2.4).toFixed(4); // 2.4000(소수점이 네 자리가 되도록 0이 채워짐)
toPrecision()은 들어온 값을 지정한 자리수의 정밀도로 변환하여 문자열을 반환한다.
(0.33333).toPrecision(2); // 0.33(정밀도2)
(123.456).toPrecision(3); // 123(정밀도3)
toFixes()와 같이 자리수가 늘어나면 근사치 변환, 줄어들면 0으로 채워 넣는다.
(4.56).toPrecision(2); // 4.6(근사치 변환)
(10).toPrexision(4); // 10.00(정밀도 4가 되도록 0으로 채움)[예시]
내용
HTML index.html
<body>
<div class="timer">
<div class="second"></div>
</div>
</body>JavaScript main.js
/** 초 단위용 element */
const secondElement = document.querySelector('.second');
// 15초를 목표치로 지정
const goalTime = new Date().getTime() + 15 * 1000;
update();
/** 프레임 실행하는 함수 */
function update() {
// 현재 시각
const currentTime = new Date().getTime();
// 목표치까지 남은 시간
const leftTime = goalTime - currentTime;
// 남은 시간이 0초 미만이라면 타이머 정지 (생략)
// 초 단위 표시. 밀리초는 소수점 두 자리까지
secondElement.innerHTML = (leftTime / 1000).toFixed(2);
// 프레임에서 update() 재실행
requestAnimationFrame(update);
}
실행결과
실행하면 15초간 카운트다운을 한다.
밀리초 단위의 소수점은 두 자리까지 표시한다.
0초가 되더라도 타이머 정지하는 것을 생략했기 때문에 새로고침을 하기 전까지 계속 마이너스로 카운트를 된다.
0초에 카운트다운을 정지하려면 정지 코드를 넣어주면 된다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 문자열 URI 이스케이프(Escape) 처리하기 (0) | 2022.05.24 |
|---|---|
| [JavaScript] 자바스크립트 문자열 길이 맞추기 (0) | 2022.05.24 |
| [JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기) (0) | 2022.05.24 |
| [JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기) (0) | 2022.05.24 |
| [JavsScript] 자바스크립트 문자열과 식 함께 다루기 (0) | 2022.05.20 |