Polyglot's language & programming story.

String 메소드 본문

Programming/JavaScript

String 메소드

Polyglot 2018. 3. 10. 22:05

String 메소드

1. 문자열의 크기를 알아보는 문자열

str.length :문자열의 길이를 반환한다.


2. 문자열안에 찾고자 하는 문자열을 찾을 때

str.indexOf("찾고자 하는 문자열") : 문자열내에서 찾고자 하는 문자열의 인덱스 값을 반환한다. (첫번째로 만난 것의 값만)

str.lastIndexOf("찾고자 하는 문자열") : 뒤에서 부터 첫번째로 만난 찾고자 하는 문자열의 인덱스 값을 반환.

str.lndexOf("찾고자 하는 문자열", 시작 인덱스): 찾고자 하는 문자열을 시작 인덱스부터 찾는다.

str.search("찾고자 하는 문자열") : indexOf처럼 찾고자 하는 문자열을 찾는다. 다만 indexOf 처럼 시작 인덱스값을 갖지 않는다.


=> 찾고자 하는 문자열이 str에 없다면 -1을 반환한다.


3. 문자열을 수정할 때


str.slice(시작, 끝) : 음수로도 표현 가능함 음수를 넣을 경우 문자열 끝에서 부터 반대로 인덱스를 매겨간다.

str.substring(시작, 끝) :slice와 비슷하나 매개변수에 음수를 넣으면 안된다.  ex ) str.substring(5,13);

str.substr(): slice와 비슷하나 두번째 매개변수는 잘라내고자 하는 문자열의 길이이다. ex ) str.substr(5, 6);

str.replace("기존 문자열", "바꾸고 싶은 문자열") : 기존의 문자열을 바꾸고 싶은 문자열로 바꾼다. 그리고 맨 앞에 매칭되는 것 단 하나만 바꾼다.  대문자랑 소문자를 구별하니 조심하자!(sensitive)


-> 대문자도 바꾸고 싶게 하려면 정규 표현식을 사용하자 /문자열/i  (insensitive)

-> 또한 정규표현식을 이용해서 기존 문자열을 다 바꾸고 싶은 문자열로 만들 수 있다. /문자열/g (global)


str.toUpperCase() : 모든 문자열을 대문자로 바꾼다.

str.toLowerCase() : 모든 문자열을 소문자로 바꾼다.

str.concat("중간에 넣을 문자열", "뒤에 넣을 문자열" .... 더 추가가능) : 2개 이상의 문자열을 합칠 때 사용한다.


모든 문자열 메소드는 새로운 문자열을 생성한다. 기존의 문자열을 수정하지 않는다.!!


4. 문자열을 추출하는 메소드

str.charAt(인덱스): 문자열의 인덱스(위치)의 문자를 추출한다.

str.charCodeAt(인덱스) : 문자열의 인덱스(위치)의 문자의 유니코드값을 추출한다.



문자열을 배열의 원소를 다루는 것처럼 접근하면 위험하다!


예) var str = "Hello World!";

        str[0];


왜냐하면

1. 어떤 브라우저는 작동이 안되고

2. 문자열을 배열으로 착각하기 쉽고

3. str[0] = "H" 이런 코드에도 에러를 발생시키지 않는다.(작동도 되지 않는다.)


만일 문자열을 배열로 읽고 싶다면, 먼저 문자열을 배열로 바꾸자!



str.split("구분 문자"): 문자열을 구분 문자로 구분하여 배열을 나눈다.


=> 구분 문자를 생략하면 배열의 0번째는 str 전부가 된다.

=> 구분 문자를 ""으로 입력하게 되면 문자열을 한 단어씩 배열에 입력한다.

<DOCTYPE html>

<html>

  <head>

  </head>

  <body>


    <h2>문자열의 크기를 알아보는 문자열</h2>

    <p id="length"></p>

    <h2>문자열안에 찾고자 하는 문자열을 찾을 때 </h2>

    <p id="indexOf"></p>

    <p id="lastIndexOf"></p>

    <p id="indexOf2"></p>

    <p id="search"></p>


    <h2>문자열을 수정할 때</h2>

    <button onclick="myFunction()">누르면 바뀌어요</button>

    <p id="slice"></p>

    <p id="substring"></p>

    <p id="substr"></p>

    <p id="replace">Hello Hello World</p>

    <p id="toUpperCase">hello world</p>

    <p id="toLowerCase">HELLO WORLD</p>

    <p id="concat"></p>


    <h2>문자열을 추출하는 메소드</h2>

    <p id="charAt"></p>

    <p id="charCodeAt"></p>

    <p id="split"></p>

    

    <script>

    var str = "Hello Hello World!";


    document.getElementById("length").innerHTML = str.length;

    document.getElementById("indexOf").innerHTML = str.indexOf("Hello");

    document.getElementById("lastIndexOf").innerHTML = str.lastIndexOf("Hello");

    document.getElementById("indexOf2").innerHTML = str.indexOf("Hello", 5);

    document.getElementById("search").innerHTML = str.search("Hello");


    document.getElementById("slice").innerHTML = str.slice(-12, -6);

    document.getElementById("substring").innerHTML = str.substring(0, 6);

    document.getElementById("substr").innerHTML = str.substr(0, 5);

    document.getElementById("concat").innerHTML = str.concat("안녕", "안녕", "월드!");


    document.getElementById("charAt").innerHTML = str.charAt(0);

    document.getElementById("charCodeAt").innerHTML = str.charCodeAt(0);

    document.getElementById("split").innerHTML = str.split(" ");


    function myFunction(){

      var str1 = document.getElementById("replace").innerHTML;

      var str2 = document.getElementById("toUpperCase").innerHTML;

      var str3 = document.getElementById("toLowerCase").innerHTML;


      document.getElementById("replace").innerHTML = str1.replace(/Hello/g, "안녕");

      document.getElementById("toUpperCase").innerHTML = str2.toUpperCase();

      document.getElementById("toLowerCase").innerHTML = str3.toLowerCase();

      }

    </script>

   

  </body>

</html>




만약 잘못된 점이 있다면, 덧글을 남겨주세요!

Comments