Front/Js
JavaScript(문자열과 숫자)
devel0per
2022. 9. 22. 14:51
문자열과 숫자
문자열 관련 메소드(내장함수)
- toUpperCase() : ()안의 문자열을 대문자로 변환한다.
- toLowerCase() : ()안의 문자열을 소문자로 변환한다.
- indexOf() : ()안의 요소가 해당 문자열의 몇번 째 인덱스에 존재하는지 출력한다.
- lastIndexOf() : ()안의 요소가 해당 문자열에서 뒤로부터 몇번 째 인덱스에 존재하는지 출력한다.
- substring() : substring(시작인덱스), substring(시작인덱스, 개수) : 문자열을 파싱해준다.
- split() : () 안에 존재하는 기준으로 문자열을 잘라준다.
<body>
<h1>문자열과 숫자</h1>
<h3>문자열 관련 메소드(내장함수)</h3>
<button onclick="stringMethod();">문자열 처리 메소드</button>
<div id="area1" class="area big"></div>
<script>
function stringMethod(){
var str1="hello World";
var area1 = document.getElementById("area1");
area1.innerHTML="str1 : "+str1+"<br>";
area1.innerHTML+="toUpperCase(): "+str1.toUpperCase()+"<br>";
area1.innerHTML+="toLowerCase(): "+str1.toLowerCase()+"<br>"; //j)()괄호는 함수일때만
area1.innerHTML+="문자열의 길이 : "+str1.length+"<br>"; //j)length는 속성이라 ()안함
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 +="앞에서부터 첫 g의 인덱스 : "+str1.indexOf("g")+"<br>";
//해당 문자가 없는 경우 -1을 반환한다.
area1.innerHTML +="substring(시작인덱스) : "+str1.substring(6)+"<br>";
area1.innerHTML +="substring(시작인덱스,개수) : "+str1.substring(0,2)+"<br>";
var str2 ="사과,바나나,키위,딸기,체리,블루베리";
let fruits=str2.split(",");
area1.innerHTML += "fruits : "+fruits+"<br>";
area1.innerHTML += "fruites의 자료형 : "+typeof(fruits)+"<br>";
for(var i=0; i<fruits.length; i++){
area1.innerHTML += "fruits "+i+"번째 인덱스 :"+fruits[i]+"<br>";
}
console.log(fruits);
}
</script>숫자(수학) 관련 메소드(내장함수)
특이상황 : 모든 메소드는 Math 객체에서 받아와 사용한다
- abs() : 절대값
- random() : 난수 발생
- round() : 반올림
- floor() : 소수점 버림
- ceil() : 반올림
- sqrt() : 제곱근
<script>
function mathMethod(){
let area2=document.getElementById("area2");
//Math 내장 객체를 제공
area2.innerHTML+="절대값 : "+Math.abs(-55)+"<br>";
area2.innerHTML+="랜덤값 : "+Math.random()+"<br>"; //0.0이상 1.0미만의 수를 반환
area2.innerHTML+="반올림 : "+Math.round(123.532)+"<br>";
area2.innerHTML+="버림 : "+Math.floor(123.222)+"<br>";
area2.innerHTML+="올림 : "+Math.ceil(22.66)+"<br>";
area2.innerHTML+="제곱근 : "+Math.sqrt(4)+"<br>";
}
</script>문자열과 숫자간의 산술연산
특이상황 : 문자열에 숫자만 존재하면 자동으로 숫자가 되어 연산된다.
강제형변환(문자열 -> 숫자)
- Number(문자열)
- paresInt(문자열)
- parseFloat(문자열)
<script>
function arithmethic(){
let test1 = 7+7; //14
let test2 = 7+"7"; //77
let test3 = "7"+7; //77
let test4 = "7"+7+7; //777
//그 외의 산술연산
//문자열이 자동형변환으로 숫자가 되어 연산된다.
//단,문자열에 숫자만 있어야 한다.
var test5 = "7"*7; //49
var test6 = "7"-7; //0
var test7 = "7"/7; //1
area3.innerHTML+="test5 : "+test5+"<br>";
area3.innerHTML+="test6 : "+test6+"<br>";
area3.innerHTML+="test7 : "+test7+"<br>";
//강제형변환 (문자열 -> 숫자)
//Number(문자열)
//parseInt(문자열)
//parseFloat(문자열)
let iNum=2; //숫자
let sNum="3"; //문자열
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+="test8 : "+test8 + "<br>"; //2+"3"=23
area3.innerHTML+="test9 : "+test9 + "<br>";
area3.innerHTML+="test10 : "+test10 + "<br>";
area3.innerHTML+="test11 : "+test11 + "<br>";
const fNum = "15.23";
const test12 = iNum+fNum; //215.23
const test13 = sNum+fNum; //315.23
const test14 = iNum+Number(fNum); //17.23
const test15 = iNum+parseInt(fNum); //17
const test16 = iNum+parseFloat(fNum); //17.23
area3.innerHTML+="test12 : "+test12 + "<br>";
area3.innerHTML+="test13 : "+test13 + "<br>";
area3.innerHTML+="test14 : "+test14 + "<br>";
area3.innerHTML+="test15 : "+test15 + "<br>";
area3.innerHTML+="test16 : "+test16 + "<br>";
}
</script>