코밍이의 하루

[JS] 내장 객체 - 문자열 객체 본문

웹언어 공부/JS

[JS] 내장 객체 - 문자열 객체

코밍이 2021. 8. 11. 23:43

1. 개발 환경

구분 내용
사용 언어 HTML5, JS
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

 

2. 주요 문법

1) 문자열 객체

- 문자형 데이터를 객체로 취급하는 것

- JS에서 가장 많이 사용

기본형
① var 참조 변수 = new String(문자형 데이터)
ex) var t = new String("hello javascript");

② var 참조 변수 = 문자형 데이터
ex) var t ="hello javascript";

2) 문자열 객체의 메소드 및 속성

종류 설명
charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환
indexOf("찾을 문자") 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호 반환, 만일 찾는 문자가 없으면 -1 반환
lastIndexOf("찾을 문자") 문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호 반환, 만일 찾는 문자가 없으면 -1 반환
match("찾을 문자") 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자 반환, 만일 찾는 문자가 없으면 null 반환
replace("바꿀 문자", "새 문자") 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환
search("찾을 문자") 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호 반환
slice(a, b) 앞의 a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자 반환
substring(a, b) a 인덱스부터 b 인덱스 이전 구간의 문자를 반환
substr(a, 문자 개수) 문자열에 a 인덱스로부터 지정한 문자 개수만큼 문자열 반환
split("문자") 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환
toLowerCase() 문자열에서 영문 대문자를 모두 소문자로 바꿈
toUpperCase() 문자열에서 영문 소문자를 모두 대문자로 바꿈
length 문자열에서 문자의 개수 반환
concat("새로운 문자") 묹열에 새로운 문자열 결합
charCodeAt(index) 문자열 index에 해당 문자의 아스키 코드값을 반환
fromCharCode(아스키 코드 값) 아스키 코드값에 해당하는 문자 반환
trim() 문자의 앞 또는 뒤에 공백 문자열 삭제

 

3. 소스 코드 및 실행 결과

- string_ob1_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 문자 객체 </title>
    <script>
        var t = "Hello Thank you good luck to you";
        document.write(t.charAt(16),"<br />");
        document.write(t.indexOf("you"),"<br />");
        document.write(t.indexOf("you",16),"<br />");
        document.write(t.lastIndexOf("you"),"<br />");
        document.write(t.lastIndexOf("you",25),"<br />");
        document.write(t.match("luck"),"<br />");
        document.write(t.search("you"),"<br />");
        document.write(t.substr(21,4),"<br />");
        document.write(t.substring(6,12),"<br />");
        document.write(t.replace("you","me"),"<br />");
        document.write(t.toLowerCase(),"<br />");
        document.write(t.toUpperCase(),"<br />");
        document.write(t.length,"<br />");

        var s =t.split(" ");

        document.write(s[0],"<br />");
        document.write(s[4],"<br />");

        var str = "A";
        var t = str.charCodeAt(0);

        document.write(t, "<br />");
        document.write(String.fromCharCode(65),"<br />");
    </script>
  </head>
  <body>
  </body>
</html>

string_ob1_test.html

 

 

- string_ob2_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 문자 객체 </title>
    <script>
        var userName = prompt("당신의 영문 이름은?","");

        var upperName = userName.toUpperCase();
        document.write(upperName, "<br>");

        var userNum = prompt("당신의 연락처는?", "");
        var result = userNum.substring(0, userNum.length - 4) + "****";
        document.write(result, "<br>");
    </script>
  </head>
  <body>
  </body>
</html>

string_ob2_test.html

 

- string_ob3_test.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset = "UTF-8">
    <title> 문자 객체 </title>
    <script>
        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; }

        for(var i = 0; i < arrUrl.length; i++){
            if(userEmail.indexOf(arrUrl[i]) > 0){
                check2 = true;
            }
        }

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

string_ob3_test.html

저작자표시 비영리 변경금지

'웹언어 공부 > JS' 카테고리의 다른 글

[JS] 함수  (0) 2021.08.13
[JS] 브라우저 객체  (0) 2021.08.12
[JS] 내장 객체 - 배열 객체  (0) 2021.08.11
[JS] 내장 객체 - 수학 객체  (0) 2021.08.11
[JS] 내장 객체 - 날짜 정보 객체  (0) 2021.08.11
'웹언어 공부/JS' Related Articles more