Angular에서 곱하기
1.4 * 1.4 = 1.959999999997 ????
왤까?
우리가 흔히 알고 있는 1.4 * 1.4 는 1.96 이다.
https://search.daum.net/search?w=tot&DA=JU5&q=%EA%B3%84%EC%82%B0%EA%B8%B0
그런데, Angular 에서 곱하기해서 결과를 보면 예상치 못한 결과가 나온다.
Angular 곱하기 테스트할 수 있는 w3school 링크
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions
Total in dollar: {{ quantity * cost }}
Angular 소스가 다음과 같이 되어있는데 곱하기를 할때 {{정수 * 정수}} 는 괜찮은 것 같다.
{{ 실수 * 실수 }} 도 잘 나오는게 있다.
그런데, 1.4 * 1.4 = 1.96 이라고 우리는 알고 있으나, {{ 1.4 * 1.4 }} 의 결과로 1.9599999999999997 이렇게 나온다.
왤까? 자바스크립트를 따라 가서 그런걸까?
chrome 콘솔창에 똑같이 1.4 * 1.4를 입력하면 저렇게 나오기는 한다.
왤까..?
부동소수점? float? double?
일단 자바스크립트에서는 이렇게 하는것 같다.
.toFixed() 를 이용해서 String으로 바꿔서 결과를 도출한다.
여기서 .toFixed(2) 함수의 경우, 소수점 2자리까지 표시하기 위한 함수이다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
이거 역시 왜 되는지 모르겠댜.. ㅠ
Angular에서 내가 원하는 결과(1.96)로 나오게 하려면 어떻게 해야할까?
위의 내용을 참고해서, 소수점 2자리까지 자르는 Angular filter를 이용해보자.
angularJS expression
https://docs.angularjs.org/guide/expression
angularJS filter
https://docs.angularjs.org/guide/filter
해당 부분을 참고했다.
expression있는 document 중간에 보면, 바로 실행해볼 수 있는 부분이 있어서 해당하는 곳에서 실행해 봤다!
1. 은 예제이다.
2. 1번의 예제를 보고 우리의 문제인 1.4 * 1.4 | currency 를 적용해보니 잘 나온다! 여기서 든 생각이 필터를 이용하면 되는구나 였다!
3. 1.4 * 1.4 의 결과를 다시 확인해보고
4. 1.4 * 1.4 | number:2 (소수점2자리까지 출력)로 필터를 적용해보았다. ! 예상한 결과로 나옴!
여기서, 의문 하나 더.
angular에서 number:2 필터나, 자바스크립트에서 .toFixed(2) 함수의 경우 소수점 2자리까지 출력하시오다.
만약에, 3자리이상까지 나와야 정상인 곱하기라면?
아래가 정상적인 결과이지만,
1.14 * 1.14 = 1.2996
위에서 본 소수점 2자리까지만 표시하는 filter 혹은 함수의 경우
javascript
AngularJS
요렇게. 예상한 문제가 생기고 만다.
가장 간단하게 해결하는 방법은 정책을 정하는것. 소수점 몇자리까지만 표시한다고.
그거 말고는 음... 어떻게 해결하면 좋을까?
사실 위에 나오는 계산기는 다음 계산기이다. 저것도 javascript로 구현된거 아닌가? 웹 페이지니까.
그럼 해결할 방법이 있다고 생각됨!!
다음 웹 계산기는 다음에 파보도록 하자...
참고할 문제 하나 더.
결과가 소수점 2자리까지만 있는 계산인데, 3자리까지 표시하라고 하면? 아마 자바스크립트는 String으로 결과가 나오는거니까 0이 붙어서 나올 것 같다. angular도 똑같으려나?
(Number(1.4) * Number(1.4)).toFixed(4)
1.4 * 1.4 | number:4
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ......화이팅...ㅎㅎㅎㅎ 이건 그냥 뭐.. ㅎㅎㅎ
서버에서 계산해서 내려줘야하나 흐햫
..기타....
구런데 1.4 * 1.4에 뭐가 있나..?
1.4 * 2.4 는 잘 나옴.. ㅎㅎ 무슨 차이일까..?
댓글