ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [javascript] 15. 문자열 메소드(String Method) - 자바스크립트 강좌 JS / CSE
    Web/JavaScript 2015. 6. 13. 14:35

    JavaScript String Methods



    1. Finding a String in a String

     indexOf() 메소드는 특정 문자열을 처음 발견하는 위치를 리턴합니다.




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html>
        <body>
     
        <p id="p1">Please locate where 'locate' occurs!.</p>
     
        <button onclick="myFunction()">Try it</button>
     
        <p id="demo"></p>
     
    <script>
    function myFunction() {
    var str = document.getElementById("p1").innerHTML;
    var pos = str.indexOf("locate");
    document.getElementById("demo").innerHTML = pos;
    }
    </script>
     
        </body>
    </html>
     
     
    cs




     

     




    lastIndexOf() 메소드는 특정 문자열의 마지막 위치를 리턴합니다.




     

    1
    2
    3
     
    var str = "Please locate where 'locate' occurs!";
    var pos = str.lastIndexOf("locate");
    cs








    indexOf()와 lastIndexOf() 메소드는 둘다 텍스트를 찾지 못 하면 -1을 리턴합니다.


    두 메소드는 두번재 인자 값으로 검색을 시작할 위치를 줄 수 있습니다.



     


    2. Searching for a String in a String

     search() 메소드는 특정 문자열 값을 검색하고 이 위치를 반환합니다.




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html>
        <body>
     
        <p id="p1">Please locate where 'locate' occurs!.</p>
     
        <button onclick="myFunction()">Try it</button>
     
        <p id="demo"></p>
     
    <script>
    function myFunction() {
    var str = document.getElementById("p1").innerHTML;
    var pos = str.search("locate");
    document.getElementById("demo").innerHTML = pos;
    }
    </script>
     
        </body>
    </html>
     
     
    cs
     




     





    indexOf()와 search() 두 메소드는 같은 역할입니다.


    두 메소드는 같은 인자값을 받아들이고, 같은 값을 리턴합니다.


    두 메소드는 같으나, search() method는 문자열을 찾는데 더 강력합니다.







    3. Extracting String Parts

     문자열을 추출하는데 3가지 메서드가 있습니다:

      - slice(start, end)

      - substring(start, end)

      - substr(start, length)




    3-1. The slice() Method

     slice() 메소드는 문자열의 부분을 추출하고, 추출된 부분의 문자열을 리턴합니다.


     메소드는 2개의 인자 값을 받습니다: 시작 위치, 끝 위치

     

     

    1
    2
    3
     
    var str = "Apple, Banana, Kiwi";
    var res = str.slice(7,13);
    cs

     

    결과는 아래와 같습니다.


    1
    Banana
    cs





     인자가 음수일 경우, 위치는 문자열의 끝에서 부터 세어나갑니다.


     

    1
    2
    var str = "Apple, Banana, Kiwi";
    var res = str.slice(-12,-6);
    cs

     


     결과는 아래와 같습니다.


    1
    Banana
    cs




     두 번째 인자 값을 빠트리면, 메소드는 나머지 문자열을 잘라내게 됩니다.



     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>The slice() method extract a part of a string
        and returns the extracted parts in a new string:</p>
     
        <p id="demo"></p>
     
    <script>
    var str = "Apple, Banana, Kiwi";
    document.getElementById("demo").innerHTML = str.slice(7);
    </script>
     
        </body>
    </html>
     
     
     
    cs















    3-2. The substring() Method

     substring() 메소드는 slice()와 비슷합니다.


     차이점은 음수 인자 값을 받지 않는다는 점입니다.



     
    1
    2
    3
     
    var str = "Apple, Banana, Kiwi";
    var res = str.substring(7,13);
    cs

     



      결과는 아래와 같습니다.


    1
    Banana
    cs

     

      


    두 번째 인자 값을 빠트리면, slice()메소드와 마찬가지로 나머지 문자열을 잘라내게 됩니다.







    3-3. The substr() Method

     substr() 메소드는 slice()와 비슷합니다.


     차이점은 두 번째 인자 값이 문자열을 추출하는 길이를 지정하는데 명시한다는 것 입니다.



    1
    2
    var str = "Apple, Banana, Kiwi";
    var res = str.substr(7,6);
    cs

     


      결과는 아래와 같습니다.



    1
    Banana
    cs

      



     첫 번째 인자 값이 음수면, 문자열의 끝에서부터 세어나갑니다.


     두 번째 인자 값을 빠트리면, slice()메소드와 마찬가지로 나머지 문자열을 잘라내게 됩니다.







    4. Replacing String Content

     replace() 메소드는 특정 문자열을 지정한 문자열로 대치시킵니다.




    1
    2
    str = "Please visit Microsoft!";
    var n = str.replace("Microsoft","W3Schools");
    cs

     




    5. Converting to Upper and Lower Case
     문자열은 toUpperCase()를 써서 대문자로 변환 할 수 있습니다.


    1
    2
    3
    var text1 = "Hello World!";       // String
    var text2 = text1.toUpperCase();  // text2 is text1 converted to upper
     
    cs

     



     마찬가지로 toLowerCase()를 써서 소문자로 변환 할 수도 있습니다.


     

    1
    2
    3
    4
     
    var text1 = "Hello World!";       // String
    var text2 = text1.toLowerCase();  // text2 is text1 converted to lower
     
    cs







    6. The concat() Method

     concat() 메소드는 2개 이상의 문자열을 합칩니다.



     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>The concat() method joins two or more strings:</p>
     
        <p id="demo"></p>
     
    <script>
    var text1 = "Hello";
    var text2 = "World!"
    document.getElementById("demo").innerHTML = text1.concat(" ",text2);
    </script>
     
        </body>
    </html>
     
     
     
    cs



     







     concat() 메소드는 + 연산자 대신 사용할 수 있습니다. 아래 두 예제는 같습니다.



     

    1
    2
    3
    4
     
     
    var text = "Hello" + " " + "World!";
    var text = "Hello".concat(" ","World!");
    cs




    7. Extracting String Characters

     문자를 추출하는 안전한 2개의 메소드가 있습니다:

      - charAt(position)

      - charCodeAt(position)




    7-1. The charAt() Method

     charAt() 메소드는 특정 위치의 문자를 반환합니다.



     
    1
    2
    3
    var str = "HELLO WORLD";
    str.charAt(0);            // returns H
     
    cs

     




     

    7-2. The charCodeAt() Method
     charCodeAt() 메소드는 특정 위치의 문자의 유니코드를 리턴합니다.


    1
    2
    3
     
    var str = "HELLO WORLD";
    str.charCodeAt(0);         //    returns 72
    cs

     





    8. Accessing a String as an Array is Unsafe
     문자열을 배열로 접근 할 수 있습니다.



     
    1
    2
    3
    var str = "HELLO WORLD";
     
    str[0];                   // returns H
    cs

     




     이 방법은 불안전(unsafe)하고 불예측(unpredictable) 합니다:
      - IE5 ~ IE7까지의 브라우저에서 동작하지 않습니다.
      - 문자열이 배열처럼 보이게 됩니다.(그러나 배열이 아닙니다)
      - str[0] = "H" 은 에러를 발생하지 않습니다.(그러나 동작하지 않습니다)

     문자열을 배열로 사용하려한다면, 먼저 배열로 변환하여 사용하시길 바랍니다.





    9. Converting a String to an Array
     문자열은 split() 메소드를 이용하여 배열로 변환 할 수 있습니다



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
        <body>
     
        <p>Click "Try it" to display the first array element, after a string split.</p>
     
        <button onclick="myFunction()">Try it</button>
     
        <p id="demo"></p>
     
    <script>
    function myFunction() {
    var str = "a,b,c,d,e,f";
    var arr = str.split(",");
    document.getElementById("demo").innerHTML = arr[0];
    }
    </script>
     
        </body>
    </html>
     
     
     
    cs
     








      






     split() 메소드의 구분자를 빼트리면, 반환되는 배열은 0부터 전체 문자를 포함하게 됩니다. 


    댓글

Designed by Tistory.