Web/JavaScript
[days03] 숫자와 관련된 함수
다연
2020. 12. 11. 19:23
반응형
문자와 숫자의 연산
document.write(5+"5"+"<br>"); //55
document.write(5-"5"+"<br>"); //0
document.write("5"-"5"+"<br>"); //0
document.write("5"*"5"+"<br>"); //25
document.write("5"/"5"+"<br>"); //1
//java int short long float double
//js 그냥 집어넣으면 알아서
//number -> 항상 64비트 부동소수점 형태로 저장
document.write(0.1+0.2 +"<br>");//0.30000000000000004
var y = 9999999999999999999;
document.write(y+"<br>");//10000000000000000000 오차가 있다
var x =100/"apple";
document.write(x); //NaN (오류가 아님)
//숫자가 아니니? 함수 isNaN() 있음
document.write(isNaN(x)+"<br>"); //true*기억하기*
NaN의 type도 number이고
Infinity의 type도 number이다.
1. toString() : 숫자를 문자열로 변환하는 함수
toString(10) 10진수 문자열로 반환하는 함수
<script>
var x= 10;
document.write(x.toString(10)+"<br>"); //10
document.write(x.toString(2)+"<br>"); //1010
document.write(x.toString(8)+"<br>"); //12
document.write(x.toString(16)+"<br>"); //a
</script>
2. toExponential() : 지수 표기법을 사용 + 반올림해서숫자->문자열로 반환하는 함수
<script>
var x = 9.656;
document.write(x.toExponential()); //9.656e+0
document.write(x.toExponential(2)); //9.66e+0
//매개변수2의 의미 ? 소수점 뒤의 문자 개수
</script>
3. toFixed() : 소수 자릿수 숫자->문자열 반환
<script>
var x = 9.656;
document.write(x.toFixed()); //10(매개변수가 없으면 0과 똑같음) (소수점 없고 반올림된 것)
document.write(x.toFixed(2)); //9.66
</script>
4. toPrecision() : 지정된 길이로 작성된 숫자 -> 문자열로 반환
숫자->문자 형변환
<script>
var x = 9.656;
document.write(x.toPrecision()); //"9.656" (문자열)
document.write(x.toPrecision(2)); //9.7 (문자열) 매개변수 자리만큼 출력하겠다
document.write(x.toPrecision(3)); //9.66 (문자열)
</script>
문자열을 숫자로 바꾸는 함수
Number()
<script>
console.log(Number(true)); //1
console.log(Number("10")); //10
console.log(Number(" 10")); //10
console.log(Number("10 ")); //10
console.log(Number(" 10 ")); //10
console.log(Number(3.13)); //3.13
console.log(Number("10,33")); //NaN
console.log(Number("10 33")); //NaN
console.log(Number("admin")); //NaN
console.log(Number("12A")); //NaN
console.log(Number(new Date("2020-12-11"))); //1607644800000
//1970.1.1을 기준으로 계산한 ms값
var x = Number.MAX_VALUE;//1.7976931348623157e+308
var x = Number.MIN_VALUE; //5e-324
</script>parseInt()
<script>
console.log(parseInt("10,33")); //10
console.log(parseInt("10 33")); //10
console.log(parseInt("admin")); //NaN
console.log(parseInt("12A")); //12
console.log(parseInt("10.33")); //10
</script>parseFloat()
<script>
console.log(parseFloat("10")); //10
console.log(parseFloat("10.33")); //10.33
console.log(parseFloat("12a")); //12
console.log(parseFloat("12 year")); //12
console.log(parseFloat("year 12 year")); //NaN
console.log(parseFloat("12 100 200")); //12
</script>숫자로 변환할 수 없는 경우 NaN를 반환한다.
계산기 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
input[type=text]{
text-align: center;
width: 200px;
border: 1px solid gray;
}
input[type=text]:focus {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" id="n1" autofocus tabindex="1"/> <!-- 탭키 누르면 자동으로 순번대로 넘어가게 -->
+
<input type="text" id="n2" tabindex="2"/>
<input type="button" tabindex="3" value="계산하기" onclick="exec()"/>
<div id="demo"></div>
<script>
function exec() {
//입력도 하고 유효성검사도 했다 치고
var n1 = document.getElementById("n1").value;
var n2 = document.getElementById("n2").value;
//var result = n1+n2; //12+2 = 122 출력
//string+string 이기 때문
//var result = Number(n1)+Number(n2); //12+2 = 122 출력
//var result = parseInt(n1)+parseInt(n2); //12+2 = 122 출력
var result = parseFloat(n1)+parseFloat(n2); //12+2 = 122 출력
document.getElementById("demo").innerText= result;
}
</script>
</body>
</html>
반응형