Frontend/JavaScript

[JavaScript]형변환(TypeCast)

sukii 2023. 12. 29. 10:47
반응형

⚫자바스트립트 형변환
🔘자동 형변환 - 연산자에 의해 값의 자료형이 자동으로 변환
🔘강제 형변환 - 자료형 관련 함수에 의해 값의 자료형이 강제로 변환

 

실습예제👩‍💻

각 명령의 출력 결과는 옆에 주석 처리하여 작성함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<script type="text/javascript">
	//+ 연산자는 두 피연산자의 자료형이 숫자형인 경우 산술 연산 처리	
	alert(20+10);//30
	
	//+ 연산자는 두 피연산자 중 하나의 자료형이 문자형인 경우 모든 피연산자를 문자값으로
	//자동 형변환하여 결합 처리
	alert("20"+10);//2010	
	alert(20+"10");//2010	
	alert("20"+"10");//2010
	
	//alert(20-10);//10	
	//+ 연산자를 제외한 산술 연산자는 모든 피연산자를 무조건 숫자값으로 자동 형변환하여 연산 처리
	alert("20"-10);//10	
	alert(20-"10");//10	
	alert("20"-"10");//10
	
	//NaN(Not a Number) : 숫자형으로 변환할 수 없는 문자값인 경우 제공되는 상수
	// => NaN 상수를 연산 처리하면 NaN 결과 제공
	alert(20-"abc");
	
	//논리값을 산술 연산한 경우 [false]은 [0]으로 변환되고 [true]는 [1]로 자동 형변환되어 연산 처리
	// => 숫자값에 Not(!) 연산자를 사용하면 [0]은 [flase]로 자동 형변환되고 [0] 이외의 숫자값은
	//[true]로 자동 형변환되어 연산 처리
	alert(20-true);
	
	//alert("20"+10);//2010
	//Number(value) : 매개변수로 전달받은 값을 숫자값으로 변환하여 반환하는 함수
	//String(value) : 매개변수로 전달받은 값을 문자값으로 변환하여 반환하는 함수
	//Boolean(value) : 매개변수로 전달받은 값을 논리값으로 변환하여 반환하는 함수
	alert(Number("20")+10);//문자값을 Number 함수를 사용하여 숫자값으로 강제 형변환하여 연산 처리	
	</script>
</body>
</html>
반응형