728x90
반응형
1. 문자열 합치기
1) + 로 합치기
2) concat()사용하여 합치기
<body>
<p>문자열 합치기<button onclick="strTest01();">확인</button></p>
<script type="text/javascript">
function strTest01(){
var str01 = "String";
var str02 = "Test";
//+
var str03 = str01 + str02;
alert("String + Test =" + str03);
//concat()
var str04 = str01.concat(str02, " ", "재밌다.");
alert(str04);
}
</script>
</body>
<출력결과>
2. 다른 자료형 합치기
String 문자에 + 숫자를 더하면 String 형태로 합쳐진다.
<body>
<p>다른 자료형 합치기<button onclick="strTest02();">확인</button></p>
<script type="text/javascript">
function strTest02(){
var num01 = 5;
var num02 = 7.2;
var bool = true;
var result = "String" + num01 + num02 + bool;
alert(result + " : " + typeof(result));
}
</script>
</body><출력결과>
3. 문자열 비교하기
1) 동등연산자 == : 비교하는 자료형이 자동으로 형변환
2) 엄격한 비교 ===: 보여지는 값이 같더라도 type이 다르면 false (사용권장)
<body>
<p>문자열 비교하기<button onclick="strTest03();">확인</button></p>
<span id="res"></span><br>
<script type="text/javascript">
function strTest03(){
var str = prompt("이름을 입력하세요");
var span = document.getElementById("res");
//동등연산자 ==
if(str=="kh"){
span.textContent = str+"님, 환영합니다.";
} else if(str=="qclass"){
span.textContent = str+"님, 진짜로 환영합니다.";
} else {
span.textContent = "이름을 다시 한 번 확인해 주세요.";
}
//동등연산자를 사용하면, 비교하는 자료형이 자동으로 형 변환 된다.
var num01 = 10;
if(num01=="10"){
span.textContent = "==: 숫자 10이 맞습니다.";
} else {
span.textContent = "==: 숫자 10이 아닙니다.";
}
//===연산자: 엄격한 비교
if(num01==="10"){
alert("===: 숫자 10이 맞습니다.");
} else {
alert("===: 숫자 10이 아닙니다.");
}
var strObj = new String("kh");
var strVal = "kh";
if(strObj==strVal){
alert("==: 문자가 같다.");
} else {
alert("==: 문자가 다르다.");
}
if(strObj === strVal){
alert("===: 문자가 같다.");
} else {
alert("===: 문자가 다르다.");
}
}
</script>
</body>
<첫번째 if 구문 출력화면>
<나머지 if구문 출력화면>
num01에 담아준 10은 숫자이고 if 조건안에 "10"은 String이기 때문에
숫자는 같아보이지만 type이 다르므로 ===했을때 false 출력!
strObj는 객체를 생성하여 담아주었고 strVal은 그저 String 타입으로 담아 주었다.
따라서 일반 동등연산자 ==비교를 하면 값이 같게 나오지만,
===로 엄격한 비교를 하면 두 변수는 담고 있는 type이 객체, string으로 다르므로
false가 된다.
728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]DOM_img생성(연습) (0) | 2020.07.30 |
|---|---|
| [JS]DOM_element생성 (0) | 2020.07.30 |
| [JS]Math (0) | 2020.07.28 |
| [JS]date_D-day (0) | 2020.07.28 |
| [JS]date_경과날짜 (0) | 2020.07.28 |
