[JavaScript] String(문자열 합치기, 동등연산자(==), === 연산자 등)

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>string</title>

<script type="text/javascript">

	function strTest01(){
		var str01 = "강씨네집";
		var str02 = "씨네";
		
		// +연산자
		var str03 = str01 + str02;
		alert("str01 + str02 = " + str03);
		
		// concat()
		var newString = str01.concat(str02, "대박", "짱이야");
		alert(newString);
		
		// join()
		var joinTest = ["5", "10", "15", "20"].join("+");
		alert(joinTest);
		alert(eval(joinTest));
	}
	
	function strTest02(){
		var num = 12.5;
		var bool = true;
		var result = "string" + num + 1 + bool;
		alert(result + " : " + typeof(result));
	}
	
	function strTest03(){
		var str = prompt("이름을 입력하세요");
		var span = document.getElementById("res");
		
		// == : 동등연산자
		if(str == "씨네"){
			span.textContent = str + "님, 환영합니다.";
		} else if(str == "강씨네집"){
			span.textContent = str + "님, 환영합니다.";
		} else {
			span.textContent = "이름을 확인해주세요.";
		}
		
		// 자동 형 변환
		var num = 10;
		if(num == "10"){
			alert("num == 10");
		}else {
			alert("num != 10");
		}
		
		// ===
		if(num === "10"){
			alert("num === 10");	
		}else{
			alert("num != 10");
		}
		
		var strVal = "신이난다";
		var strObj = new String("신이난다");
		
		if(strVal == strObj) {
			alert("같다.");
		} else {
			alert("다르다");
		}
		
		if(strVal === strObj){
			alert(strVal + " : " + typeof(strVal) + "\n" + strObj + " : " + typeof(strObj) + "\n같다");
		}else {
			alert(strVal + " : " + typeof(strVal) + "\n" + strObj + " : " + typeof(strObj) + "\n다르다");
		}
	}

</script>
</head>
<body>

	<p>문자열 합치기
		<button onclick="strTest01();">클릭</button>
	</p>
	
	<p>다른 자료형 합치기
		<button onclick="strTest02();">클릭</button>
	</p>
	
	<p>문자열 비교하기
		<button onclick="strTest03();">클릭</button>
		<span id="res"></span>
	</p>

</body>
</html>

기본 실행 결과입니다.

버튼 별로 다른 함수의 이벤트가 실행됩니다.

function strTest01(){
	var str01 = "강씨네집";
	var str02 = "씨네";
		
	// +연산자
	var str03 = str01 + str02;
	alert("str01 + str02 = " + str03);
		
	// concat()
	var newString = str01.concat(str02, "대박", "짱이야");
	alert(newString);
		
	// join()
	var joinTest = ["5", "10", "15", "20"].join("+");
	alert(joinTest);
	alert(eval(joinTest));
}

버튼을 누르고 ok를 누를때마다 결과입니다.

자바에서 System.out.println(); 과 자바스크립트에서의 alert();은 출력을 해준다는 면에서 비슷합니다.

+ 연산자의 경우 String 타입의 문자열을 합쳐줍니다.

concat의 경우에도 +연산자와 비슷한 역할을 합니다.

join의경우 배열에 담겨있는 값을들 join에 담겨있는 값으로 연결시켜주는 역할을 하네요.

위의 코드에서는 문자로 담겨 있어서 더했을때 문자열의 연산으로 이루어 졌지만 eval을 이용하면 숫자의 연산으로 이루어집니다.

function strTest02(){
	var num = 12.5;
	var bool = true;
	var result = "string" + num + 1 + bool;
	alert(result + " : " + typeof(result));
}

2번째 버튼을 누르면 실행되는 함수입니다.

자바와 마찬가지로 String의 연산은 다른 타입과 연산을 하더라도 String의 연산으로 이루어집니다.

function strTest03(){
	var str = prompt("이름을 입력하세요");
	var span = document.getElementById("res");
		
	// == : 동등연산자
	if(str == "씨네"){
		span.textContent = str + "님, 환영합니다.";
	} else if(str == "강씨네집"){
		span.textContent = str + "님, 환영합니다.";
	} else {
		span.textContent = "이름을 확인해주세요.";
	}
		
	// 자동 형 변환
	var num = 10;
	if(num == "10"){
		alert("num == 10");
	}else {
		alert("num != 10");
	}
		
	// ===
	if(num === "10"){
		alert("num === 10");	
	}else{
		alert("num != 10");
	}
		
	var strVal = "신이난다";
	var strObj = new String("신이난다");
		
	if(strVal == strObj) {
		alert("같다.");
	} else {
		alert("다르다");
	}
		
	if(strVal === strObj){
		alert(strVal + " : " + typeof(strVal) + "\n" + strObj + " : " + typeof(strObj) + "\n같다");
	}else {
		alert(strVal + " : " + typeof(strVal) + "\n" + strObj + " : " + typeof(strObj) + "\n다르다");
	}
}

3번째 버튼을 가장 먼저 눌렀을때 위와 같이 prompt창이 뜹니다.

함수에서 보면 "씨네" 혹은 "강씨네집"을 입력하면 환영합니다 라는 글자가 출력이 되도록 되어있고 이외에는 이름을 확인해주세요라는 글자가 출력이됩니다.

왼쪽은 씨네를 입력했을때 오른쪽은 다른 글자를 입력했을때

이름을 입력하면 다음과 같은 문구가 나옵니다.

코드에서 보면 10을 숫자로 입력해주었는데 if문으로 문자 "10"이면 해당 문구를 출력하라고 했더니 출력이 되었습니다.

자동으로 형변환을 해주는 것을 알수 있습니다.

=== 연산자의 경우 문자 "10"이 아니라고 출력이 됩니다.

var strVal = "신이난다";와 var strObj = new String("신이난다");

즉 변수와 객체를 비교하였습니다.

동등연산자 ( == )를 사용했을때는 같다고했지만 ===연산자를 사용했을때는 다르다고 나옵니다.

동등연산자( == )는 value를 비교한다면 ===연산자는 type을 비교합니다.

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] 배열(Array) (0)	2022.01.21
[JavaScript] String(문자 index찾기, 문자열추출, 분리하기) (0)	2022.01.20
[JavaScript] math (0)	2022.01.18
[JavaScript] date(날짜) (0)	2022.01.17
[JavaScript] TransObject(형변환) (0)	2022.01.16

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바