JavaScript 05. 문자열과 숫자

 문자열 관련 기본 메소드 

1) toUpperCase() : 문자열을 대문자로 반환
2) toLowerCase() : 문자열을 소문자로 반환
3) CharAt(i) : i번째 인덱스의 문자 반환
4) indexOf("위치찾고자하는 문자") : 문자의 위치를 반환 
    -> 해당 문자가 존재하지 않을 경우 -1을 반환 
5) lastIndexOf("위치찾고자하는 문자") : 뒤에서 부터 찾고자하는 문자의 위치를 반환 
6) subString(시작인덱스) :  입력한 시작인덱스부터 끝까지의 문자열을 반환
    subString(시작인덱스, 끝인덱스) : 시작인덱스부터 끝인덱스까지의 문자열을 반환
7) split("구분자"): 구분자로 문자열을 나누기 -> 배열로 반환 

<button onclick="stringTest();">문자열 처리 메소드</button>
    <div id="area1" class="area big"></div>
    <script>
        function stringTest(){
            const area1 = document.getElementById("area1");

            let str1 = "Hello World";
            area1.innerHTML = "str1 :" + str1 + "<br>";

            area1.innerHTML += "toUpperCase() :" + str1.toUpperCase() +"<br>"; 
            area1.innerHTML += "toLowerCase() :" + str1.toLowerCase() + "<br>";
            area1.innerHTML += "문자열의 길이 :" + str1.length + "<br>";
            
            for(let i=0; i<str1.length; i++){
                area1.innerHTML += i+"번째 인덱스 : " + str1.charAt(i) + "<br>";
            }

            area1.innerHTML += "앞에서부터 첫 l의 위치 : " + str1.indexOf("l") + "<br>";
            area1.innerHTML += "뒤에서부터 첫 1의 위치 : " + str1.lastIndexOf("l") +"<br>" ;
            area1.innerHTML += "l의 위치(인덱스 5에서부터 탐색) : " + str1.indexOf("l",5) + "<br>";
            area1.innerHTML += "앞에서부터 첫 a의 위치 : " + str1.indexOf("a") + "<br>";
            // 해당 문자가 존재하지 않을 경우 -1 을 반환 

            area1.innerHTML += "substring(시작인덱스) : " + str1.substring(6) + "<br>"
            area1.innerHTML += "substring(시작인덱스,끝인덱스) : " + str1.substring(0,2) + "<br>"

            let str2 = "사과,바나나,복숭아,딸기";
            let fruits = str2.split(","); //["사과","바나나","복숭아","딸기"]
            area1.innerHTML += "fruits :" + fruits + "<br>"
            console.log(fruits ,typeof(fruits));  //배열 
            for(let i=0;i<fruits.length; i++){
                area1.innerHTML += fruits[i] + " ";
            }
           
        }
    </script>

 

 

 

---

 문자열 관련 html메소드 

1) bold() : 글자를 굵게 표현 == <b>태그
2) italics() :글자를 기울여서 표현 == <i>태그 
3) small() :글자를 작게 표현 ==<small>
4) sub() : 글자를 아래 첨자로 표현 == <sub>
5) sup(): 글자를 위첨자로 표현 == <sup>
6) link("url") : 문자열에 <a>태그 

<button onclick="stringHtmlTest();">문자열html메소드</button>
    <div id="area2" class="area small"></div>
    <script>
        function stringHtmlTest(){
            const area2 = document.getElementById("area2");
            let str = "javascript";

            area2.innerHTML = "str : " + str + "<br>";
            area2.innerHTML += "bold() : "+ str.bold()+ "<br>"; //<b></b>
            area2.innerHTML += "italics() : "+ str.italics() + "<br>"; //<i>
            area2.innerHTML += "small() : "+str.small() + "<br>"; //<small>
            area2.innerHTML += "sub() : " + str.sub() +"<br>" //<sub>
            area2.innerHTML += "sup() : " + str.sup()+ "<br>" //<sup>
            area2.innerHTML +=  "link() : " +str.link("http://www.naver.com");  //<a>

        }
    </script>

---

숫자(수학) 관련 메소드 ( Math.)

1) Math.abs(): 절대값
2) Math.random(): 랜덤값
3) Math.round() : 반올림
4) Math.floor() : 버림
5) Math.ceil() : 올림

 <div id="area3" class="area small"></div>
    <script>
        function mathTest(){
            const area3 = document.querySelector("#area3");

            area3.innerHTML = "절대값 : " + Math.abs(-123) + "<br>";
            area3.innerHTML += "랜덤값 : " + Math.random() + "<br>"; 
            area3.innerHTML += "반올림 : " + Math.round(123.653) + "<br>"; //위치지정 불가 
            area3.innerHTML += "버림 : " + Math.floor(123.678) + "<br>"
            area3.innerHTML += "올림 : "+ Math.ceil(123.123); 
 
        }
    </script>

---

 

문자열과 숫자간의 산술연산 / 형변환

1) 덧셈 : 숫자와 문자열의 덧셈은 자동 형변환이 되지않아 문자열로 반환됨 ( 덧셈시에는 강제형변환)
2) 덧셈을 제외한 산술연산시 문자열이 숫자로 자동형변환된 후 산술연산됨 (단, 문자열에는 숫자만 존재해야됨)

강제형변환방법 ( 문자열 -> 숫자형)
1) Number(문자열)
2) parseInt(문자열) - 정수값으로 반환 
3) parseFloat(문자열) 

<button onclick="arithmetic();">산술연산</button>
    <div id="area4" class="area small"></div>
    <script>
        function arithmetic(){ 
            const test6 = "7" - 7;  //0
            const test7 = "7" * 7; //49
            const test8 = "7"/ 7; // 1
            const test0 = "7" % 4; //3

            const area4 = document.querySelector("#area4");
            area4.innerHTML= "test6 :" + test6 + "<br>";
            area4.innerHTML += "test7 :" + test7 + "<br>";
            area4.innerHTML += "test8 :" + test8 + "<hr>";

            // 2 , "3" 덧셈연산 
            const test9 = 2 + "3" // "23"
            const test10 = 2 + Number("3"); //5
            const test11 = 2 + parseInt("3"); //5
            const test12 = 2 + parseFloat("3");

            area4.innerHTML += test10 +", " + test11 + ", "+ test12 + "<br>";

            // 2, "1.234"
            const test13 = 2 + "1.234"; //"21.234"

            const test14 = 2 + Number("1.234");
            const test15 = 2 + parseInt("1.234"); // "1.234" => 1
            const test16 = 2 + parseFloat("1.234"); // "1.234" => 1.234

            area4.innerHTML += test14 +", " + test15 + ", " + test16;

        }
    </script>