[JavaScript] 자바스크립트 문자열 객체 String 메서드 정리 1

📝 JavaScript

 

🖥️ String 객체

오늘은 자바스크립트 문자열 객체(String Object)의 메서드와 속성에 대해 알아볼게요.

 

주의할 점!

 

메서드를 사용할 때 인덱스값을 매개변수로 사용할 때가 있는데

인덱스값은 0부터 시작하며, 띄어쓰기 포함입니다.

 

​

✅ 1. String 객체의 메서드 및 속성 한 눈에 보기

​

종류	기능
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자를 반환 let str = "amazing web study"; str.charAt(2); // a를 반환
indexOf("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 찾는 문자가 없는 경우 -1을 반환 let str = "amazing web study web"; str.indexOf("web"); // 8을 반환
lastIndexOf("찾을 문자")	문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환, 찾는 문자가 없는 경우 -1을 반환 let str = "amazing web study web"; str.indexOf("web"); // 18을 반환
match("찾을 문자", ?)	찾을 문자와 일치하는 문자열을 찾아 배열로 반환 해당 문자열이 없으면 null을 반환
replace("바꿀 문자", "새 문자")	문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환 let str = "my little cat"; str.replace("my", "your"); // "your little cat"을 반환
search("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환 let str = "amazing web study"; str.search("web"); // 8을 반환
slice(a, b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환 let str = ''hello javascript"; str.slice(3, 7); // "lo j" 반환 str.slice(3, -3); // "llo javascr" 반환 -1은 뒤에서부터 첫번째 글자를 가리킴
substring(a, b)	a 인덱스부터 b 인덱스 이전 구간의 문자를 반환 let str = "hello javascript"; str.substring(3, 7); // "lo j"를 반환
substr(a ,문자 개수)	문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환 let str = "hello javascript"; str.substring(3, 2); // "lo" 반환

 

​

[ 예시 ]

 

<script>

    let t = "Hello Thank you good luck to you";

    document.write(t.charAt(16), "<br>"); // 인덱스 16에 저장된 문자 불러오기 => 16

    document.write(t.indexOf("you"), "<br>"); 
    // 왼쪽에서부터 가장 먼저 발견한 "you"의 인덱스값 반환 => 12

    document.write(t.indexOf("you", 16), "<br>");
    // 인덱스 16 위치로부터 가장 먼저 발견한 "you"의 인덱스값 반환 => 29

    document.write(t.lastIndexOf("you"), "<br>"); 
    // 오른쪽에서 왼쪽 방향으로 제일 먼저 발견된 "you"의 인덱스값 반환 => 29

    document.write(t.lastIndexOf("you", 25), "<br>");
    // 인덱스 25부터 왼쪽 방향으로 제일 먼저 발견된 "you"의 인덱스값 반환 => 12
    
    document.write(t.replace("you", "me"), "<br>");
    // 문자열 왼쪽에서부터 제일 먼저 발견된 "you"를 "me"로 치환

    document.write(t.search("you"), "<br>");
    // 왼쪽에서부터 제일 먼저 발견된 "you"의 인덱스값 반환 => 12

    document.write(t.substr(21, 4), "<br>");
    // 인덱스 21부터 네 글자 가져오기. => "luck"

    document.write(t.substring(6, 12), "<br>");
    // 인덱스 6부터 12 이전까지의 문자를 반환 => "Thank"

</script>

 

출처: (이지스퍼블리싱) 자바스크립트 + 제이쿼리 입문( p.107)

 

 

1-1. charAt()

 chatAt(인덱스번호)  : 인덱스 n번에 저장된 문자 불러오기 

<script>
    let t = "Hello Thank you good luck to you";
    document.write(t.charAt(16)); 
    // 인덱스 16에 저장된 문자 불러오기 => 16
</script>

1-2. indexOf()

 indexOf("찾을 문자") : 문자열 왼쪽에서부터 제일 먼저 발견된 "찾을 문자"의 인덱스 번호 반환 

<script>
    let t = "Hello Thank you good luck to you";
    
    document.write(t.indexOf("you")); 
    // 문자열 처음부터 제일 먼저 발견된 "you"의 인덱스값 반환 => 12
    
    document.write(t.indexOf("you", 16)); 
    // 문자열 인덱스 16 위치부터 제일 먼저 발견된 "you"의 인덱스값 반환 => 29
</script>

 

1-3. lastIndexOf()

 lastIndexOf("찾을 문자") : 문자열 오른쪽에서 왼쪽으로 제일 먼저 발견된 "찾을 문자"의 인덱스 번호 반환  

<script>
    let t = "Hello Thank you good luck to you";
    
    document.write(t.lastIndexOf("you")); 
    // 문자열 오른쪽에서 왼쪽으로 제일 먼저 발견된 "you"의 인덱스값 반환 =>29
</script>

 

1-4. replace()

 replace("바꿀 문자", "새 문자") : 문자열에서 왼쪽부터 "바꿀 문자"와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 "새 문자"로 치환 

<script>
    let t = "Hello Thank you good luck to you";
    
    document.write(t.replace("you", "me"));
    // 문자열 왼쪽에서부터 제일 먼저 발견된 "you"를 "me"로 치환
</script>

 

1-5. search()

 search("찾을 문자") : 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호 반환

<script>
    let t = "Hello Thank you good luck to you";
    
    document.write(t.search("you"));
    // 왼쪽에서부터 제일 먼저 발견된 "you"의 인덱스값 반환 => 12
</script>

 

1-6. slice()

 slice(a, b) : a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환 

<script>
	let str = "hello javascript";
    
	document.write(str.slice(3, 7)); // "lo j" 반환
	document.write(str.slice(3, -3)); // "llo javascr" 반환
	//-1은 뒤에서부터 첫번째 글자를 가리킴
    
</script>

 

 

1-7. substring()

 substring(a, b) : a 인덱스부터 b 인덱스 이전 구간의 문자를 반환

<script>
    let t = "Hello Thank you good luck to you";
    
    document.write(t.substring(6, 12));
    // 인덱스 6부터 12 이전까지의 문자를 반환 => "Thank"
</script>

 

1-8. substr()

 substr(a, 문자 개수) : 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열 반환

<script>
    let t = "Hello Thank you good luck to you";
    
    document.write(t.substr(21, 4));
    // 인덱스 21부터 네 글자 가져오기. => "luck"
</script>

 

✅ 2. match() 메서드

 

2-1. match()

match 함수는 특정 텍스트 안에 검색할 단어, 찾고싶은 단어가 있는 경우 해당 텍스트가 문구에 포함되어 있는지 확인할 수 있습니다.

 

또한 단어뿐만 아니라 정규표현식을 사용하여 특정 패턴을 검색하는 것 역시 가능합니다.

 

해당 문자열.match('찾을 단어') - match() 함수는 인자에 포함된 문자를 찾으면 이를 반환함.

 

2-2. match() 용법 

 

1) match("찾을 문자")

<script>
    // 문자열과 정규 표현식을 사용하여 match() 메서드 호출
    const str = 'Hello, World!';
    const regex = /Hello/; // 정규 표현식: 'Hello'에 일치하는 문자열 찾기
    const result = str.match(regex); // match() 메서드 호출

    // 결과 출력
    if (result) {
        document.write('찾은 문자열: ' + result[0]); // 일치하는 문자열 출력
    } else {
        document.write('일치하는 문자열이 없습니다.');
    }
</script>

 

[결과화면]

찾은 문자열 : Hello

 

 

2) match(정규표현식)

<script>
    let test  = 'love you. love me. love everything!'
    let regExp = /love/gi;

    test2 = test.match(regExp);
</script>

 

정규표현식 코드는 따로 regExp 변수에 저장하였으며, 표현식 뒤에 gi는 대소문자 구분을 허용하지 않고 모든 패턴을 검색하기 위함이다.

 

[결과화면]

['love', 'love', 'love']

// test2변수에 배열로 모든 love 텍스트가 저장됨

 

2-3. (응용) 현재 페이지가 영문페이지인지 한글페이지인지 확인하는 코드 

 

아래는 현재 페이지의 파라미터(쿼리스트링)에 'en.'이 포함되어 있는지를 확인하여 영문 페이지인지 한글 페이지인지 알려주는 코드입니다. 현재 webisfree.com의 영문사이트는 http://webisfree.com/en/ 입니다. 아래 코드는 현재 페이지의 url 주소를 검색하여 결과에 따라 한국페이지 또는 영문페이지 여부를 alert() 함수를 사용하여 보여주는 간단한 스크립트 예제입니다.

 

<script>
    if (!location.href.match('/en')) {
      alert('English page!');
    }
    else {
      alert('Korean page!');
    }
</script>

 

위 코드는 현재 url 주소에 '/en'이 포함되어 있는지 match() 함수를 사용하여 확인합니다. 만약에 현재 접속자 url에 해당 값이 포함되어 있다면 경고창을 띄우고 영문 페이지, 국문페이지를 출력할 것입니다.