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

📝 JavaScript

 

🖥️ String 객체

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

 

주의할 점!

 

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

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

 

​

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

​

종류	기능
split("문자")	지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환 let str = "amazingkwebkstudy"; str.split("k"); // 배열 형식으로 반환 arr = ["amazing", "web", "study"]
toLowerCase()	문자열에서 영문 대문자를 모두 소문자로 변환 let str = "Amazing Web Study"; str.toLowerCase(str); // "amazing web study" 반환
toUpperCase()	문자열에서 영문 소문자를 모두 대문자로 변환 let str = "Amazing Web Study"; str.toUpperCase(str); // "AMAZING WEB STUDY" 반환
length	문자열에서 문자의 개수를 반환 let str = "hello welcome"; str.length() // 13 반환
concat("새로운 문자")	문자열에 새로운 문자열을 결합 let str = "hello"; str.concat("web"); // "helloweb" 반환
charCodeAt(index)	문자열 index에 해당 문자의 아스키 코드값을 반환 let str = "ABC"; str.charCodeAt(0); // A의 아스키코드값인 65 반환
from CharCode(아스키코드 값)	아스키 코드값에 해당하는 문자를 반환. String.fromCharCode(65); // "A" 반환
trim()	문자의 앞 또는 뒤에 공백 문자열을 삭제 str = " hello "; str.trin(); // "hello" 반환

 

​

[ 예시 ]

 

<script>

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

    document.write(t.toLowerCase(), "<br>");
    // 영문자가 모두 소문자로 치환됨 => "hello thank you good luck to you"
    document.write(t.toUpperCase(), "<br>");
    // 영문자가 모두 대문자로 치환됨 => "HELLO THANK YOU GOOD LUCK TO YOU"
    document.write(t.length(), "<br>");
    // 문자열의 문자 총 개수를 반환(공백도 문자로 취급) => 32
    
    
    let s = t.split(" ");
    // 공백문자 기준으로 문자를 분리해서 배열에 저장됨
    
    document.write(s[0], "<br>"); // s의 인덱스 0에 저장된 문자열 출력 => "Hello"
    document.write(s[4], "<br>"); // s의 인덱스 4에 저장된 문자열 출력 => "luck"

    document.write(t.indexOf("you", 16), "<br>");
    // 인덱스 16 위치로부터 가장 먼저 발견한 "you"의 인덱스값 반환 => 29
    
    
    let str = "A";
    let t = str.charCodeAt(0); 
    // 변수에 저장된 문자열 중 0번 인덱스의 문자 "A"의 아스키코드값을 반환
    document.write(t, "<br>"); 
    // "A"의 아스키코드값 65 출력
    document.write(String.fromCharCode(65), "<br>"); 
    // 코드값 65에 해당하는 문자 반환
    

</script>

 

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

 

 

1-1. split()

 split("구분 문자") : 구분 문자를 기준으로 문자 데이터를 나누어 배열에 저장해서 반환  

 

아래 코드는 문자열 "hello my friend"를 공백을 기준으로 분할하여 배열에 저장한 후, 해당 배열을 콘솔에 출력

<script>
    let t = "hello my friend";
    let arr = t.split(" "); // 문자열을 공백을 기준으로 분할하여 배열로 저장
    console.log(arr); // 배열 출력 결과 ["hello", "my", "friend"]
</script>

1-2. toLowerCase()

 toLowerCase() : 문자열에서 영문 대문자를 모두 소문자로 변환 

<script>
    let t = "Hello Thank You";
    document.write(t.toLowerCase()); 
    // 모두 소문자로 치환
    // hello thank you
</script>

1-3. toUpperCase()

 toUpperCase() : 문자열에서 영문 소문자를 모두 대문자로 변환 

<script>
    let t = "Hello Thank You";
    document.write(t.toLowerCase()); 
    // 문자열을 모두 대문자로 치환
    // HELLO THANK YOU
</script>

1-4. length

 length : 문자열에서 문자의 개수 반환 

<script>
    let t = "javascript is fun";
    document.write(t.replace("you", "me"));
    // 문자열에서 문자의 개수 반환, 이 때 공백문자도 포함됨. 
    // 17
</script>

 

1-5. concat()

 concat("새로운 문자") : 문자열에 새로운 문자열을 결합 

<script>
    let t = "java";
    document.write(t.concat("script"));
    // 문자열에 새로운 문자열을 결합 
    // javascript
</script>

 

1-6. charCodeAt()

 charCodeAt(index) : 문자열 index에 해당 문자의 아스키 코드 값을 반환 

<script>
    let str = "ABC";
    document.write(str.charCodeAt(0)); // 0번 인덱스에 담긴 A의 아스키코드값 반환
    // 65
</script>

 

 

1-7. fromCharCode()

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

<script
    document.write(String.fromCharCode(65));
    // 아스키코드 65에 해당하는 문자를 반환
    // A
</script>

 

1-8. trim()

 trim() 

<script>
    let t = " hello ";
    document.write(t.trim());
    // 문자열의 앞 뒤 공백을 제거한 문자열 반환
    // hello
</script>

 

✅ 2. 사용자로부터 입력받은 이메일의 유효성 검사하는 프로그램 짜기

 

2-1. 문제

위에서 배운 문자열 객체 메서드를 이용해서 사용자로부터 입력 받은 이메일의 유효성을 검사하는 프로그램 짜기

 

- 사용자로부터 이메일주소를 입력받는다.

- 메일주소에 @가 포함되어 있고,  ".co.kr" 또는".com" 또는 ".net" 또는 ".or.kr" 또는 ".go.kr" 중에 한 가지 문자열이 포함되어 있으면 유효한 이메일이므로 화면에 입력받은 이메일 주소를 출력한다.

- 메일 주소에 위의 문자열이 포함되어 있지 않으면 "이메일 형식이 잘못되었습니다." 라고 경고 창을 띄운다(alert)

 

2-2. 풀이

<script>
    var userEmail = prompt("Enter your Email address");
    var arrUrl = [".com", ".co.kr", ".net", ".or.kr", ".go.kr"];

    var check1 = false; // @ 포함 유무 체크
    var check2 = false; // Url 포함 유무 체크

    if (userEmail.indexOf("@")>0) {check1=true;}
    // 이메일이 @를 포함하고 있으면 check1에 true를 저장

    for (var i=0; i < arrUrl.length; i++) {
        if(userEmail.indexOf(arrUrl[i])>0) {
            check2 = true;
        }
    }
    // 입력한 이메일과 arrUrl의 단어를 하나씩 비교해서 
    // 1개라도 일치하면 check2에 true 저장

    if (check1&&check2) {
        document.write(userEmail);
    } else {
        document.write("이메일 형식이 잘못되었습니다.");
    }
</script>