본문 바로가기

자바스크립트

[자바스크립트] - 문자열 객체String Object / 문자열 객체의 메서드, 속성

 문자열 객체(String Object) 

문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용된다. 
즉, 문자형 데이터는 문자열 객체이다.
문자형 데이터는 배열처럼 첫번째 글자부터 index 번호를 0번부터 부여받는다.
이 인덱스 번호를 이용하면 특정 문자 구간을 잘라내거나 특정 문자를 추가하는 등 다양하게 활용할 수 있다.  

*index로 잘라내는 애들은 전부다 그 앞에 있는 번호까지만 잘라낸다
        
[기본형]
var 참조변수 = '문자형데이터'
" "따옴표 안에 들어오면 문자형 객체다


▶ 자주 쓰는 문자열 객체의 메서드 및 속성

.charAt(index)  문자열에서 인덱스 번호의 해당하는 '문자'를 반환 / 변수.charAt(16) 하면 16번째 문자 반환
.indexOf('찾을 문자') 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 일치하는 문자가 없으면 -1을 반환.
.lastIndexOf('찾을 문자')  문자열 오른쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 일치하는 문자가 없으면 -1을 반환한다.
.replace('바꿀 문자', '새 문자') 

문자열 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아서 제일 먼저 찾은 문자를 새 문자로 바꾼다. 
.substring(a,b)  a인덱스 구간부터 b인덱스 앞에 있는 문자까지를 잘라서 반환한다. 배열의 slice랑 같은 얘다
.substr(a,문자갯수)  문자열에서 a 인덱스부터 지정한 문자 갯수만큼 잘라 문자열을 반환한다. 
.split('문자')  지정한 문자를 기준으로 문자 데이터를 나눠 배열에 저장하여 반환한다.
.length  문자열에서 문자의 갯수를 반환함. 공백과 기호도 포함하여 문자 갯수로 반환한다. 
   


[문자열 객체의 메서드 및 속성]
 
1. .charAt(index) ☆
: 문자열에서 인덱스 번호의 해당하는 '문자'를 반환한다.

var str = "Hello Thank you good luck to yo";

document.write(str.charAt(16), "<br>"); //g가 나온다.



2. .indexOf('찾을 문자') ☆☆☆
로그인하는 사이트에 필수적으로 쓰임. 찾을 문자에 @를 넣어서 이메일주소가 올바른지 확인한다.  
: 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 일치하는 문자가 없으면 -1을 반환한다. 

 var str = "Hello Thank you good luck to yo";

document.write(str.indexOf("you"), "<br>"); //12가 반환 제일먼저 일치하는 y -12번째
document.write(str.indexOf("you", 16), "<br>"); //문자열 인덱스 16번부터 뒤에 나오는 you의 index값을 반환

* 찾을 문자 뒤에 , 로 구분하고 숫자를 써주면 그 번호부터 찾게 된다. 


 
3. .lastIndexOf('찾을 문자') ☆
: 문자열 오른쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 
만약 일치하는 문자가 없으면 -1을 반환한다.

var str = "Hello Thank you good luck to you";

document.write(str.lastIndexOf("you"), "<br>"); //29
 document.write(str.lastIndexOf("you", 25), "<br>");

*  찾을 문자 뒤에 ,로 구분하고 숫자 써주면 그 번호부터 찾음
문자열 인덱스 25번부터 찾아 앞에 나오는 you의 index값을 반환
        
4. .match('찾을 문자')
: 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 
일치하는 문자가 없다면 Null을 반환하지만, 잘쓰지는 않는다. null이 나오면 코드를 짜기가 어려워진다.  match 보다는 indexOf을 쓴다. 

5. .replace('바꿀 문자', '새 문자') ☆
 : 문자열 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아서 제일 먼저 찾은 문자를 새 문자로 바꾼다. 

var str = "Hello Thank you good luck to you";

document.write(str.replace("you", "me"), "<br>"); //Hello Thank me good luck to you로 바뀐다.



6. .search('찾을 문자')
: 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아서 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다.
하지만 일치하지 않았을 때 아무것도 반환해주지 않아서 잘 안쓴다.
        
7. .slice(a, b)
: a개의 문자를 자르고 b번째 문자를 자른 후 남은 문자를 반환함. 잘 안쓴다. 
        
8. .substring(a,b) ☆
: a인덱스 구간부터 b인덱스 앞에 있는 문자까지를 잘라서 반환한다. 배열의 slice랑 같은 얘다

var str = "Hello Thank you good luck to you";

document.write(str.substring(6, 12), "<br>"); //Thank가 나온다.

공백을 포함해서 인덱스 6번부터 11번까지의 문자를 반환

그래서 원하는 b인덱스+1 로 적어줘야한다. 

9. .substr(a,문자갯수) △
: 문자열에서 a 인덱스부터 지정한 문자 갯수만큼 잘라 문자열을 반환한다. 
무언가를 암호화할때 종종 사용한다. 

10. .split('문자') ☆☆☆
: 지정한 문자를 기준으로 문자 데이터를 나눠 배열에 저장하여 반환한다.
 ※ split을 쓰는 순간부터 배열로 바뀐다.

var str = "Hello Thank you good luck to you";

var result = str.split(" "); 
document.write(result[0], "<br>"); //Hello가 나온다. 
document.write(result[2], "<br>"); //you가 나온다.

" " 에 공백을 넣어놔서, 공백을 기준으로 문자를 잘라서 배열로 result에 반환. 
        
11. .toLowerCase()
: 문자열 안에 있는 대문자를 모두 소문자로 바꾼다. 

var str = "Hello Thank you good luck to you";

document.write(str.toLowerCase(), "<br>"); //hello thank you good luck to you



12. .toUpperCase()
: 문자열 안에 있는 소문자를 모두 대문자로 바꾼다. 

var str = "Hello Thank you good luck to you";

document.write(str.toUpperCase(), "<br>"); //HELLO THANK YOU GOOD LUCK TO YOU



13. .length ☆
: 속성. 문자열에서 문자의 갯수를 반환함. 공백과 기호도 포함하여 문자 갯수로 반환한다. 

var str = "Hello Thank you good luck to you";

document.write(str.length, "<br>"); // 32 공백포함



14. .concat('새로운 문자')
: 문자열의 새로운 문자를 더한다. 근데 문자결합연산자 쓰면 되니깐 잘 안쓴다. 

15. .charCodeAt(index)
: 문자열 index의 해당하는 아스키코드값을 반환함. 

16. .fromCharCode(아스키코드값)
: 아스키코드값에 해당하는 문자를 반환함.

17. .trim() 
: 문자의 앞이나 뒤에 붙은 공백문자열을 삭제한다.