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부터 전체 문자를 포함하게 됩니다. 


      저작자표시

      'Web > JavaScript' 카테고리의 다른 글

      [javascript] 18. Math - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 17. Number Method - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 16. Numbers - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 14. 문자열(Strings) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 13. 이벤트(Events) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13
      [javascript] 12. 범위(Scope) - 자바스크립트 강좌 JS / CSE  (0) 2015.06.13

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바