Javascript에서 String을 Number타입으로 바꾸기
누가 물어봐서 찾아본 김에 그냥 정리합니다. 아시다시피 Javascript는 명시적인 타입정의가 없습니다. int나 String같이 타입을 명시해서 변수를 정의하지 않고 그냥 var타입으로 정의하면 Javascript가 알아서 적절한 타입을 지정합니다. 명시적인 타입이 없다는건 때론 타입때문에 헷갈리기도 하고 원치 않는 결과가 나타나기도 합니다.
그래서 보통은 약간 편법적인 방법으로 String을 Number로 바꾼다던지 Number를 String으로 바꾼다던지 합니다.
JavaScript
// 숫자를 스트링로 바꾸기
var tt = 2
tt += "";
alert(typeof tt); // Result : string
// 스트링을 숫자로 바꾸기
tt = "2"
tt *= 1;
alert(typeof tt); // Result : number
위의 방법이 가장 간단하게 형변환을 하는 방법입니다. 쉽게 자바스크립트의 자동형변환을 이용한 겁니다. 숫자타입에 문자열을 더하면 결과가 문자열이 되고 문자열에 숫자를 곱하면 숫자타입이 되는 특성을 이용해서 결과는 달라지지 않게 타입만 변환되도록 한 것입니다.
해본 사람을 보면 알기는 하겠지만 잘 모르는 사람이 보면 어떤 의도로 한 소스인지 명확하지 않은 단점이 있기도 하고 좀더 명시적으로 타입변환이 필요할 때가 있습니다.
JavaScript
// 숫자를 스트링로 바꾸기
var tt = 2
alert(typeof tt); // Result : number
tt = String(tt);
alert(typeof tt); // Result : string
// 스트링을 숫자로 바꾸기
tt = "2"
alert(typeof tt); // Result : string
tt = Number(tt);
alert(typeof tt); // Result : number
타입변환을 하는 함수인 Number()와 String()을 이용한 소스입니다.
또한 아래처럼 parseInt()나 parseFloat()를 이용해서도 형변환을 할 수 있습니다. 함수명에서 알 수 있듯이 parseInt()는 Integer타입으로 변환을 하고 parseFloat()는 Float타입으로 변환을 합니다.
JavaScript
var tt = "2"
alert(typeof tt); // Result : string
tt = parseInt(tt);
alert(typeof tt); // Result : number
tt = "2"
alert(typeof tt); // Result : string
tt = parseFloat(tt);
alert(typeof tt); // Result : number
parseInt()나 parseFloat()는 형변환 자체가 목적은 아니기 때문에 얘기가 나온 김에 좀 더 살펴보겠습니다. parseIn()와 parseFloat()는 정수와 실수로 파싱해 주는 역할을 하고 있습니다.
parseInt(string, radix)
parseFloat(string)
API정의를 보면 위처럼 정의되어 있습니다. parseInt()에서 radix는 기수로 parse할 때 기준이 되는 진수입니다. 정수로 파싱하는 parseInt에만 정의되어 있습니다. 2~ 36진수까지를 정의할 수 있고 optional값으로 없을 경우 10진수로 parse합니다.
JavaScript
parseInt("123.456"); // 123
parseInt("100mile"); // 100
parseInt("w25"); // NaN
parseInt("05"); // 5
parseInt("09"); // 0
parseInt("0x35"); // 53
parseInt("1101", 2); // 13
parseInt("09", 10); // 9
parseInt("10", 8); // 8
parseFloat("123.456"); // 123.456
parseFloat("100.5mile"); // 100.5
parseFloat("w25"); // NaN
parseFloat("05"); // 5
parseFloat("09"); // 9
parseFloat("0x35"); // 0
Javascript에서 "0"으로 시작하는 숫자는 8진수 "0x"로 시작하는 숫자는 16진수로 정의되고 있기 때문에 5번라인에서 9가 8진수에서 사용할 수 없기 때문에 의도하지 않은 0이 나왔습니다.
js.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1{
background: yellow;
width: 150px;
}
</style>
<script type="text/javascript" src="../include/myscript.js"></script>
</head>
<body>
<div id="div1">
</div>
<p>
<button type="button" onclick="test()">버튼을 누르세요</button>
</p>
<p>
<button type="button" onclick="test2()">클릭하세요</button>
</p>
<script type="text/javascript">
//가변자료형
var now =new Date();
document.write(now);
var str =now.getYear()+1900 + "-"+(now.getMonth()+1)+"-"+now.getDate()+" " +now.getHours()+":"
+now.getMinutes()+":" +now.getSeconds();
document.write("<br>" +str);
document.getElementById("div1").innerHTML=str;
console.log("날짜 :" + now);
//
var s ;// 변수 선언(생략 가능)
s=100;
document.write(s + "<br>");
s="kim";
document.write(s + "<br>");
document.write(s.toUpperCase()+"<br/>");
</script>
</body>
</html>
2017-5-15 20:16:58
버튼을 누르세요
클릭하세요
Mon May 15 2017 20:16:58 GMT+0900 (대한민국 표준시)
2017-5-15 20:16:58100
kim
KIM
arith.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#result1{
width:200px;
height: 150px;
background:yellow;
}
#result2{
width:200px;
height: 150px;
background:lightgreen;
}
</style>
<script>
//매개변수가 있는 함수
function test(){
var x=parseInt(document.form1.a.value);
var y=Number(document.form1.b.value);
/* document.write( x+y +"<br>");
document.write(x-y +"<br>");
*/
var result=document.getElementById("result1");
result.innerHTML=(x+y)+"<br>";
result.innerHTML +=(x-y)+"<br>";
//result=(x+y)+"<br>";
//result += x-y+ "<br>";
//document.getElementById("result").innerHTML=
}
function test2(){
var x =parseInt(prompt("첫번째 정수를 입력하세요!" ));
var y =parseInt(prompt("두번째 정수를 입력하세요!"));
var result2 =document.getElementById("result2");
result2.innerHTML=(x+y)+"<br>";
result2.innerHTML +=(x-y)+"<br>";
}
</script>
</head>
<body>
<form name="form1">
a : <input name="a" size="10">
b : <input name="b" size="10">
<input type="button" value="확인" onclick="test()">
</form>
<div id="result1">
</div>
<div id="result2">
</div>
<button type="button" onclick="test2()">정수 입력 Prompt</button>
</body>
</html>
9
-3
25
19
정수 입력 Prompt
댓글 ( 4)
댓글 남기기