더보기
JavaScript의 문자열과 숫자에 대해 알아보자
문자열 관련 메소드(함수)
변수명.toUpperCase() 👉🏻 모든 문자를 대문자로
변수명.toLowerCase() 👉🏻 모든 문자를 소문자로
변수명.length 👉🏻 문자열의 길이 반환
변수명.charAt(i) 👉🏻 문자열의 인덱스(i번째)에 해당하는 문자 반환
변수명.indexOf("찾고자하는문자") 👉🏻 변수 내에 찾고자 하는 문자가 처음으로부터 몇 번째 인덱스에 있는지
변수명.lastIndexOf("찾고자하는문자") 👉🏻 변수내에 찾고자 하는 문자가 (2개 이상이라면) 가장 마지막에 존재하는 인덱스를 반환
변수명.substring(인덱스) 👉🏻 변수의 인덱스에 해당하는 문자부터 반환(0부터)
변수명.substring(처음인덱스, 끝인덱스) 👉🏻 변수의 처음 인덱스에 해당하는 문자부터 끝 인덱스-1까지 반환
변수명.split("나눌문자") 👉🏻 변수에 담긴 문자를 나눌 문자 기준으로 떼서 배열 형식으로 반환
typeof(변수명) 👉🏻 변수의 자료형에 대해 반환
<button onclick="showStringMethod();">문자열 처리 메소드</button>
<div id="area1" class="area big"></div>
<script>
function showStringMethod() {
// 테스트용 문자열 변수
var str1 = "Hello World";
// 테스트 결과를 출력할 div 요소 객체
var area1 = document.getElementById("area1");
area1.innerHTML = "str1: " + str1 + "<br>";
area1.innerHTML += "toUpperCase(): " + str1.toUpperCase() + "<br>";
area1.innerHTML += "toLowerCase(): " + str1.toLowerCase() + "<br>";
area1.innerHTML += "문자열의 길이: " + str1.length + "<br>";
for(var i = 0; i < str1.length; i++) {
area1.innerHTML += i + "번째 인덱스: " + str1.charAt(i) + "<br>";
}
area1.innerHTML += "앞에서부터 첫 l의 위치: " + str1.indexOf("l") + "<br>";
area1.innerHTML += "뒤에서부터 첫 l의 위치: " + str1.lastIndexOf("l") + "<br>";
area1.innerHTML += "앞에서부터 첫 a의 위치: " + str1.indexOf("a") + "<br>";
// 해당 문자가 존재하지 않을 경우 -1을 반환
area1.innerHTML += "substring(시작인덱스): " + str1.substring(6) + "<br>";
area1.innerHTML += "substring(시작인덱스, 끝인덱스): " + str1.substring(0, 2) + "<br>";
// 시작인덱스 <= 글자 < 끝인덱스
// 테스트용 문자열2
var str2 = "사과, 바나나, 복숭아, 키위";
var fruits = str2.split(","); // ["사과", "바나나", "복숭아", "키위"]
area1.innerHTML += "fruits: " + fruits + "<br>";
area1.innerHTML += "fruits의 자료형: " + typeof(fruits);
console.log(fruits);
}
</script>
숫자(수학) 관련 메소드
Math.abs(숫자) 👉🏻 절대값
Math.random() 👉🏻 0.0 ~ 0.99999... 사이의 랜덤 숫자를 반환
Math.round(숫자) 👉🏻 반올림, 위치 지정 X
Math.floor(숫자) 👉🏻 버림
Math.ceil(숫자) 👉🏻 올림
Math.sqrt(숫자) 👉🏻 제곱근
<button onclick="showMathMethod();">수학 관련 메소드</button>
<div id="area2" class="area small"></div>
<script>
function showMathMethod() {
// 테스트 결과를 출력할 div 요소
var area2 = document.getElementById("area2");
// 자바스크립트에서는 Math 내장 객체 제공
area2.innerHTML = "절대값: " + Math.abs(-123) + "<br>";
area2.innerHTML += "랜덤값: " + Math.random() + "<br>";
// Math.random() 메소드는 0.0 ~ 0.99999... 사이의 숫자를 반환 (자바와 동일)
area2.innerHTML += "반올림: " + Math.round(123.567) + "<br>"; // 위치 지정 X
area2.innerHTML += "버림: " + Math.floor(123.456) + "<br>";
area2.innerHTML += "올림: " + Math.ceil(123.456) + "<br>";
area2.innerHTML += "제곱근: " + Math.sqrt(4) + "<br>";
}
</script>
*문자열과 숫자 간의 산술 연산
👉🏻 문자열과 숫자 간에 산술연산이 이루어지면 어떻게 형 변환이 이루어질까?
<button onclick="arithmetic();">산술연산</button>
<div id="area3" class="area big"></div>
<script>
function arithmetic() {
var test1 = 7 + 7; // 14
var test2 = 7 + "7"; // "77"
var test3 = "7" + 7; // "77"
var test4 = "7" + 7 + 7; // "777"
var test5 = "7" + (7 + 7); // "7" + 14 => "714"
// 테스트 결과를 출력할 div 요소
var area3 = document.getElementById("area3");
area3.innerHTML = "test1: " + test1 + "<br>";
area3.innerHTML += "test2: " + test2 + "<br>";
area3.innerHTML += "test3: " + test3 + "<br>";
area3.innerHTML += "test4: " + test4 + "<br>";
area3.innerHTML += "test5: " + test5 + "<br>";
// 덧셈 연산의 경우 숫자형 => 문자열형으로 자동형변환이 이루어짐
// 문자열과 숫자 간의 그 이외의 산술연산이 가능함
var test6 = "7" * 7;
var test7 = "7" - 7;
var test8 = "7" / 7;
area3.innerHTML += "<hr>";
area3.innerHTML += "test6: " + test6 + "<br>";
area3.innerHTML += "test7: " + test7 + "<br>";
area3.innerHTML += "test8: " + test8 + "<br>";
// 나머지 산술연산의 경우 문자열형 => 숫자형으로 자동 형변환이 이루어짐
// 단, 이 경우 문자열에는 숫자만 존재해야 함
}
</script>
강제 형변환
NaN: Not a Number(문자열이 숫자형태로 바뀔 때 숫자 이외의 문자들이 존재한다면 발생)
isNaN(판단할값): 판단할 값이 숫자가 아닐 경우 true / 숫자일 경우 false를 반환
👉🏻 해당 값이 숫자인지 문자인지 등을 판별할 때 사용하면 좋음
1. 문자열을 숫자로
👉🏻 Number(문자열)
👉🏻 parseInt(문자열): 소수점 제시 시 소수점이 절삭됨
👉🏻 parseFloat(문자열)
<button onclick="arithmetic();">산술연산</button>
<div id="area3" class="area big"></div>
<script>
function arithmetic() {
// 테스트용 변수
var iNum = 2; // 숫자
var sNum = "3"; // 문자열
var test9 = iNum + sNum; // 2 + "3" => "2" + "3" => "23"
var test10 = iNum + Number(sNum); // 2 + 3 => 5
var test11 = iNum + parseInt(sNum); // 5
var test12 = iNum + parseFloat(sNum); // 5
area3.innerHTML += "<hr>";
area3.innerHTML += "test9: " + test9 + "<br>";
area3.innerHTML += "test10: " + test10 + "<br>";
area3.innerHTML += "test11: " + test11 + "<br>";
area3.innerHTML += "test12: " + test12 + "<br>";
// 각 함수의 차이점
// 테스트용 변수
var fNum = "1.234";
var test13 = iNum + fNum; // 2 + "1.234" => "2" + "1.234" => "21.234"
var test14 = iNum + Number(fNum); // 2 + "1.234" => 2 + 1.234 => 3.234
var test15 = iNum + parseInt(fNum); // 2 + "1.234" => 2 + 1 => 3 (소수점이 절삭됨)
var test16 = iNum + parseFloat(fNum); // 3.234
area3.innerHTML += "test13: " + test13 + "<br>";
area3.innerHTML += "test14: " + test14 + "<br>";
area3.innerHTML += "test15: " + test15 + "<br>";
}
</script>
2. 숫자를 문자열로
👉🏻 String(숫자)
<button onclick="arithmetic();">산술연산</button>
<div id="area3" class="area big"></div>
<script>
function arithmetic() {
// 테스트용 변수
var a = 1; // 숫자
var b = 2; // 숫자
var test17 = a + b; // 1 + 2 => 3
var test18 = String(a) + String(b); // 1 + 2 => "1" + "2" => "12"
area3.innerHTML += "<hr>";
area3.innerHTML += "test17: " + test17 + "<br>";
area3.innerHTML += "test18: " + test18 + "<br>";
}
</script>
간단한 사칙연산 계산기 만들기
<h3>* 간단한 사칙연산 계산기 만들기</h3>
<!-- input type="number"은 아무리 숫자값만 입력 가능하더라도 실제로 다뤄지는 값은 문자열 타입 -->
정수1 : <input type="number" id="num1"> <br>
정수2 : <input type="number" id="num2"> <br>
<label id="result"></label> <br>
<button onclick="plus();">덧셈</button>
<button onclick="minus();">뺄셈</button>
<button onclick="product();">곱셈</button>
<button onclick="division();">나눗셈</button>
<script>
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
function plus() {
// var sum = num1.value + num2.value; // "10" + "20" => "1020"
var sum = Number(num1.value) + Number(num2.value); // 10 + 20 => 30
document.getElementById("result").innerHTML = "결과: " + sum;
}
function minus() {
var sum = Number(num1.value) - Number(num2.value);
document.getElementById("result").innerHTML = "결과: " + sum;
// 주석은 선생님 풀이! 이렇게도 가능함
// var num1 = Number(document.getElementById("num1").value);
// var num2 = Number(document.getElementById("num2").value);
// document.getElementById("result").innerHTML = "결과: " + (num1 - num2);
}
function product() {
var sum = Number(num1.value) * Number(num2.value);
document.getElementById("result").innerHTML = "결과: " + sum;
}
function division() {
var sum = Number(num1.value) / Number(num2.value);
document.getElementById("result").innerHTML = "결과: " + sum;
}
</script> |
 |
 |
 |
| 덧셈 버튼 | 뺄셈 버튼 | 곱셈 버튼 | 나눗셈 버튼 |