문자열과 숫자
문자열 관련 메소드(내장 함수)
- 문자열 길이
- 대문자/소문자 변환
- 문자열 자르기
- charAt(index) 사용
- split으로 나누기
위의 내용을 신경쓰며 아래의 코드를 본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문자열과 숫자</title>
<style>
</style>
</head>
<body>
<button onclick="stringFunc();">문자열 처리 메소드</button>
<div id="area1" class="area big"></div>
<script>
let cnt = 0;
function stringFunc(){
var str1 = "Good Day Commander";
var area1 = document.querySelector("#area1");
area1.innerHTML = "str1 : "+str1+"<br>";
area1.innerHTML += "toUpperCase() : "+str1.toUpperCase()+"<br>";
area1.innerHTML += "toLowerCase() : "+str1.toLowerCase()+"<br>";
area1.innerHTML += "문자열의 길이 : "+str1.length+"<br>";
area1.innerHTML += "<br>";
for(var i=0; i<str1.length; i++){
area1.innerHTML += i+"번째 인덱스 "+str1.charAt(i)+"<br>";
}
area1.innerHTML += "<br>";
area1.innerHTML += "앞에서부터 첫 d의 인덱스 : "+str1.indexOf('d')+"<br>";
area1.innerHTML += "뒤에서부터 첫 d의 인덱스 : "+str1.lastIndexOf('d')+"<br>";
area1.innerHTML += "찾는 문자가 없을때(일부러없는거넣음) : "+str1.lastIndexOf('f')+"<br>";
// 없으면 -1반환
area1.innerHTML += "<br>";
area1.innerHTML += "substring(시작인덱스) : "+str1.substring(5)+"<br>";
area1.innerHTML += "substring(시작인덱스, 개수) : "+str1.substring(5, 4)+"<br>";
area1.innerHTML += "<br>";
var str2 = "햄버거, 피자, 치킨, 콜라, 사이다";
var food = str2.split(',');
for(var i=0; i<food.length; i++){
area1.innerHTML += "food : "+i+"번째 인덱스 : "+food[i]+"<br>";
}
area1.innerHTML += "<br>";
}
</script>
</body>
</html>- 결과값 :
str1 : Good Day Commander
toUpperCase() : GOOD DAY COMMANDER
toLowerCase() : good day commander
문자열의 길이 : 18
0번째 인덱스 G
1번째 인덱스 o
2번째 인덱스 o
3번째 인덱스 d
4번째 인덱스
5번째 인덱스 D
6번째 인덱스 a
7번째 인덱스 y
8번째 인덱스
9번째 인덱스 C
10번째 인덱스 o
11번째 인덱스 m
12번째 인덱스 m
13번째 인덱스 a
14번째 인덱스 n
15번째 인덱스 d
16번째 인덱스 e
17번째 인덱스 r
앞에서부터 첫 d의 인덱스 : 3
뒤에서부터 첫d의 인덱스 : 15
찾는 문자가 없을때(일부러없는거넣음) : -1
substring(시작인덱스) : Day Commander
substring(시작인덱스, 개수) :
food : 0번째 인덱스 : 햄버거
food : 1번째 인덱스 : 피자
food : 2번째 인덱스 : 치킨
food : 3번째 인덱스 : 콜라
food : 4번째 인덱스 : 사이다숫자(수학)관련 메소드
- 절대값 : Math.abs
- 랜덤감 : Math.random
- 반올림 : Math.round
- 올림 : Math.ceil
- 버림 : Math.floor
- 제곱 : Math.sqrt
위의 함수를 사용한 예제 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문자열과 숫자</title>
<style>
</style>
</head>
<body>
<button onclick="mathMethod();">수학관련 메소드</button>
<div id="area2" class="area small"></div>
<script>
function mathMethod(){
let area2 = document.getElementById("area2");
// Math 내장객체 제공
area2.innerHTML = "절대값 : "+Math.abs(-55)+"<br>";
area2.innerHTML += "랜덤값 : "+Math.random()+"<br>";
area2.innerHTML += "반올림 : "+Math.round(3.3)+"<br>";
area2.innerHTML += "올림 : "+Math.ceil(3.3)+"<br>";
area2.innerHTML += "버림 : "+Math.floor(3.3)+"<br>";
area2.innerHTML += "제곱 : "+Math.sqrt(4)+"<br>";
}
</script>
</body>
</html>- 결과값 :
절대값 : 55
랜덤값 : 0.04224596618316889
반올림 : 3
올림 : 4
버림 : 3
제곱 : 2문자열과 숫자간 산술연산
- 숫자+문자열 -> 문자열 + 문자열 -> 문자열
- 문자열+숫자 -> 문자열 + 문자열 -> 문자열
- 문자열*숫자 -> 숫자 + 숫자 -> 숫자 (문자열은 곱셈이 없으니까 숫자로 자동 형변환)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문자열과 숫자</title>
<style>
</style>
</head>
<body>
<button onclick="arithmethic();">산술연산</button>
<div class="area big" id="area3"></div>
<script>
function arithmethic(){
let test1 = 7+7;
let test2 = 7+'7';
let test3 = '7'+7;
let test4 = "7"+7+7;
// 덧셈 연산
area3.innerHTML = "----숫자와 문자열의 덧셈 연산----<br>"
area3.innerHTML += "7+7 = "+test1+"<br>"; // 숫자끼리 연산
area3.innerHTML += "7+'7' = "+test2+"<br>"; // string으로 형변환
area3.innerHTML += "test2의 타입 : "+typeof(test2)+"<br>";
area3.innerHTML += "'7'+7 = "+test3+"<br>"; // string으로 형변환
area3.innerHTML += "test3의 타입 : "+typeof(test3)+"<br>";
area3.innerHTML += "\"7\"+7+7 = "+test4+"<br>"; // string으로 형변환
area3.innerHTML += "test4의 타입 : "+typeof(test4)+"<br><br>";
// 그 외의 산술 연산
var test5 = "7"*7;
var test6 = "7"-7;
var test7 = "7"/7;
area3.innerHTML += "----숫자와 문자열의 산술 연산----<br>"
area3.innerHTML += "\"7\"*7 = "+test5+"<br>";
area3.innerHTML += "test5의 타입 : "+typeof(test5)+"<br>";
area3.innerHTML += "\"7\"-7 = "+test6+"<br>";
area3.innerHTML += "test6의 타입 : "+typeof(test6)+"<br>";
area3.innerHTML += "\"7\"/7 = "+test7+"<br>";
area3.innerHTML += "test7의 타입 : "+typeof(test7)+"<br><br>";
// 강제 형변환
// Numbers(문자열)
// parseInt(문자열)
// parseFloat(문자열)
/*
let iNum = 2; // 숫자
let sNum = "3"; // 문자열 (숫자만)
let test8 = iNum+sNum;
let test9 = iNum+Number(sNum);
let test10 = iNum+parseInt(sNum);
let test11 = iNum+parseFloat(sNum);
area3.innerHTML += "----강제 형변환----<br>"
area3.innerHTML += "iNum+sNum = "+test8+"<br>";
area3.innerHTML += "test8의 타입 : "+typeof(test8)+"<br>";
area3.innerHTML += "iNum+Numbers(sNum) = "+test9+"<br>";
area3.innerHTML += "test9의 타입 : "+typeof(test9)+"<br>";
area3.innerHTML += "iNum+parseInt(sNum) = "+test10+"<br>";
area3.innerHTML += "test10의 타입 : "+typeof(test10)+"<br>";
area3.innerHTML += "iNum+parseFloat(sNum) = "+test11+"<br>";
area3.innerHTML += "test11의 타입 : "+typeof(test11)+"<br><br>";
*/
let iNum = 2; // 숫자
let sNum = "3D"; // 문자열
let test8 = iNum+sNum;
let test9 = iNum-Number(sNum); // 문자열에 숫자만 있어야 처리 가능. 아니면 NaN(Not a Number)
let test10 = iNum-parseInt(sNum); // 문자와 같이 있을 때 문자 앞에 있는 숫자만 숫자로 처리된다.
let test11 = iNum-parseFloat(sNum);
area3.innerHTML += "----강제 형변환----<br>"
area3.innerHTML += "iNum+sNum = "+test8+"<br>";
area3.innerHTML += "test8의 타입 : "+typeof(test8)+"<br>";
area3.innerHTML += "iNum+Numbers(sNum) = "+test9+"<br>";
area3.innerHTML += "test9의 타입 : "+typeof(test9)+"<br>";
area3.innerHTML += "iNum+parseInt(sNum) = "+test10+"<br>";
area3.innerHTML += "test10의 타입 : "+typeof(test10)+"<br>";
area3.innerHTML += "iNum+parseFloat(sNum) = "+test11+"<br>";
area3.innerHTML += "test11의 타입 : "+typeof(test11)+"<br><br>";
const fNum = "15.23";
const test12 = iNum-fNum;
const test13 = sNum+fNum;
const test14 = iNum+Number(fNum);
const test15 = iNum+parseInt(fNum);
const test16 = iNum+parseFloat(fNum);
area3.innerHTML += "----실수----<br>"
area3.innerHTML += "iNum-fNum = "+test12+"<br>";
area3.innerHTML += "test12의 타입 : "+typeof(test12)+"<br>";
area3.innerHTML += "sNum+fNum = "+test13+"<br>";
area3.innerHTML += "test13의 타입 : "+typeof(test13)+"<br>";
area3.innerHTML += "iNum+Number(fNum) = "+test14+"<br>";
area3.innerHTML += "test14의 타입 : "+typeof(test14)+"<br>";
area3.innerHTML += "iNum+parseInt(fNum) = "+test15+"<br>";
area3.innerHTML += "test15의 타입 : "+typeof(test15)+"<br>";
area3.innerHTML += "iNum+parseFloat(fNum) = "+test16+"<br>";
area3.innerHTML += "test16의 타입 : "+typeof(test16)+"<br><br>";
}
</script>
</body>
</html>----숫자와 문자열의 덧셈 연산----
7+7 = 14
7+'7' = 77
test2의 타입 : string
'7'+7 = 77
test3의 타입 : string
"7"+7+7 = 777
test4의 타입 : string
----숫자와 문자열의 산술 연산----
"7"*7 = 49
test5의 타입 : number
"7"-7 = 0
test6의 타입 : number
"7"/7 = 1
test7의 타입 : number
----강제 형변환----
iNum+sNum = 23D
test8의 타입 : string
iNum+Numbers(sNum) = NaN
test9의 타입 : number
iNum+parseInt(sNum) = -1
test10의 타입 : number
iNum+parseFloat(sNum) = -1
test11의 타입 : number
----실수----
iNum-fNum = -13.23
test12의 타입 : number
sNum+fNum = 3D15.23
test13의 타입 : string
iNum+Number(fNum) = 17.23
test14의 타입 : number
iNum+parseInt(fNum) = 17
test15의 타입 : number
iNum+parseFloat(fNum) = 17.23
test16의 타입 : number
keep going on~