퍼블리싱/Javascript

[javascript] 객체03 (문자열 객체)

리또또 2021. 7. 28. 23:29

 

 

문자열 객체(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("이메일 형식이 잘못되었습니다.");
    }

 

반응형