
문자열 객체(String Object) : 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용 됨.
문자열 객체 생성하기
- 문자열 객체를 생성하는 기본형은 new 키워드와 String()메서드를 사용
- 생성된 객체는 변수에 참조
var 참조 변수 = new String (문자형 데이터)
var t = new String("hello javascript"); //문자열 객체 생성
- 문자열 객체는 다음과 같이 참조 변수에 문자형 데이터만 입력해도 객체가 생성
var 참조변수 = 문자형 데이터
var t = "hello javascript"; //문자열 객체 생성
문자열 객체의 메서드 및 속성
| 종류 | 설명 |
| charAt(index) | 문자열에서 인덱스 번호에 해당하는 문자를 반환 예) var str="web he she"; str.charAt(2); // "b"를 반환(index는 0부터 시작함.) |
| indexOf("찾을 문자") | 문자열엣서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환. 만일 찾는 문자가 없으면 -1을 반환 예) var str="web he she he"; str.indexOf("he"); //"4"를 반환 |
| lastIndexOf("찾을 문자") | 문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환. 만일 찾는 문자가 없으면 null을 반환. 예) var str="web he she he"; str.lastIndexOf("he"); //11를 반환 (???몰라) |
| match("찾을 문자") | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환. 찾는 문자가 없으면 null을 반환. |
| replace("바꿀 문자", "새 문자") | 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환. 예) var str="web he she he"; str.replace("web","html"); //"html he she" |
| search("찾을 문자") | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환 예) var str="web he she"; str.search("he"); //4를 반환 |
| slice(a, b) | a개의 문자를 자르고, b번째 이후에 문자를 자른 후 남은 문자를 반환 (???몰라ㅏ) |
| substring(a, b) | a인덱스부터 b인덱스 이전 구간의 문자를 반환 예) var str="hello javascript" str.substring(3,7); //"lo j"를 반환 |
| substr(a, 문자 개수) | 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환 예) var str="hello javascript" str.substr(3, 2); // "lo"를 반환 str.str(3,2);는 문자열에서 인덱스인 3인 "l"부터 2글자인 "lo"를 반환 |
| split("문자") | 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환 예) var str="webkmobilek2002"; var arr=str.split("k"); //arr=[web, mobile, 2002] |
| toLowerCase() | 문자열에서 영문 대문자를 모두 소문자로 바꿈 예) var str="ABC"; str.toLowerCase(); //"abc"를 반환 |
| toUpperCase() | 문자열에서 영문 소문자를 모두 대문자로 바꿈 예) var str="abc"; str.toUpperCase(); //"ABC"를 반환 |
| length | 문자열에서 문자의 개수를 반환 예) var str="hello welcome"; str.length //13을 반환 |
| concat("새로운 문자") | 문자열에 새로운 문자열을 결합 예) var str="hello"; str.concat("web"); //"hello web"을 반환 |
| charCodeAt(index) | |
| fromCharCode(아스키 코드 값) | |
| trim() | 문자의 앞 또는 뒤에 공백 문자열 삭제 예) str = "hello"; str.trim(); //공백 제거된 "hello"반환 |
예제1)문자열 객체 메서드와 속성을 사용
var t = "Hello Thank you good luck to you"
//1. 인덱스 16에 저장된 문자를 불러온다. [g]
document.write(t.charAt(16),"<br />");
//2. 문자열 왼쪽에서부터 제일먼저 발견된 "you"의 인덱스 값을 반환[12]
document.write(t.indexOf("you"), "<br />");
//3. 문자열 인덱스 16위치에서부터 제일 먼저 발견된 "you"의 인덱스 값을 반환[29]
document.write(t.indexOf("you",16),"<br />");
//4. 문자열 오른쪽에서부터 왼쪽방향으로 제일 먼저 발견된 "you"의 인덱스 값 반환[29]
document.write(t.lastIndexOf("you"), "<br />");
//5. [12]
document.write(t.lastIndexOf("you",25), "<br />");
//6. 문자열 왼쪽에서부터 제일 먼저 발견된 "luck"과 일치되는 문자를 찾아 반환
document.write(t.match("luck"), "<br />");
//7. 문자열 왼쪽에서부터 제일 먼저 발견된 "you"의 인덱스 값을 반환 [12]
document.write(t.search("you"), "<br />");
//8. 문자열 인덱스 21부터 4글자를 가져옴 [luck]
document.write(t.substr(21,4), "<br />");
//9. 문자열 인덱스 6부터 12 이전까지의 문자를 가져옴 [Thank]
document.write(t.substring(6,12), "<br />");
//10. 문자열 왼쪽부터 제일 먼저 발견된 "you"를 "me"로 치환
document.write(t.replace("you","me"),"<br />");
//11. 문자열을 모두 소문자로
document.write(t.toLowerCase(),"<br />");
//12. 문자열을 모두 대문자로
document.write(t.toUpperCase(),"<br />");
//13. 문자열의 총 개수를 반환. 공백도 문자로 취급 [32]
document.write(t.length, "<br />");
//14. 공백을 기준으로 문자를 분리, 분리된 문자열은 배열에 저장되어 s에 할당
var s = t.split("");
예제2)
//사용자의 이름 정보 받기
var userName = prompt("당신의 영문 이름은?", "");
//방문자의 영문이름을 대문자로 출력
var upperName = userName.toUpperCase();
document.write(upperName,"<br />");
//사용자의 전화번호 정보 받기
var userNum = prompt("당신의 연락처는?", "");
//연락처 뒤의 4자리는 '*'로 출력되게 한다.
var result = userNum.substring(0, userNum.length - 4) + "****";
document.write(result, "<br />");
예제3) 문자열 객체 메서드를 사용해서 입력받은 이메일의 유효성을 검사하는 예제
var userEmail = prompt("이메일 주소를 입력하세요", "");
var arrUrl = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"];
var check1 = false;
var check2 = false;
if(userEmail.indexOf("@") > 0){check1 = true;}
//이메일 유효성 검사하여 "@"를 정상적으로 작성하였으면
//check1에 true를 저장
for(var i = 0; i< arrUrl.length; i++){
//arrUrl의 데이터 개수(5)를 반환
if(userEmail.indexOf(arrUrl[i])>0){
check2 = true;
//입력한 이메일과 arrUrl의 단어를 하나씩 비교하여 1개의 단어라도 일치하면 check2에 true를 저장
}
}
if(check1 && check2){
document.write(userEmail);
}else{
alert("이메일 형식이 잘못되었습니다.");
}
반응형
'퍼블리싱 > Javascript' 카테고리의 다른 글
| [javascript] 브라우저 객체모델(BOM, Browser Object Model)_2 (0) | 2021.08.02 |
|---|---|
| [javascript] 브라우저 객체모델(BOM, Browser Object Model)_1 (0) | 2021.08.01 |
| [javascript] 객체02 (배열 객체) (0) | 2021.07.26 |
| [javascript] 객체01 (날짜 정보 객체, 수학 객체) (0) | 2021.07.26 |
| [javascript] 반복문 (0) | 2021.07.25 |