반응형
이번에는 String 객체를 알아볼께요. 글자를 자르거나 필요한 글자를 탐색, 원하는 글자만 가져오거나 문자열의 결합등 (이 놀라운 모든 구성이 초특가! 3만9천9백원 ) 문자열로 할 수 있는 모든것을 할 수 있습니다.
document.write(str.length); // 공백도 문자열로 인식, 결과 : 14
document.write(str.toLowerCase()); // 영문자를 소문자로 바꿔 변환. [결과 : jquery study !]
document.write(str.toUpperCase()); // 영문자를 대문자로 바꿔 변환. [결과 : JQUERY STUDY !]
document.write(str.indexOf("y")); // 처음인덱스(0)부터 "y"를 찾아 최초로 일치하는 인덱스 번호를 반환.
// 없을경우 -1을 반환. ,대소문자 구분. [결과 : 5]
document.write(str.indexOf("k")); // [결과 : -1]
document.write(str.lastIndexOf("y")); // 처음인덱스부터 "y"를 찾아 일치하는 가장 마지막 인덱스 번호를 반환.
// 없을경우 -1을 반환.,대소문자 구분. [결과 : 11]
document.write(str.charAt(5)); // 5인덱스에 저장된 문자 데이터를 반환. [결과 : y]
document.write(str.substring(4,5)); // 4번인텍스 부터 5번 인덱스 전까지의 문자 데이터 반환. [결과 : r]
document.write(str.substr(5,4)); // 5번인텍스 부터 4글자를 반환. [결과 : y St (공백도 문자)]
document.write(str.replace("y","bye")); // 텍스트 중 i을 bye로 치환해서 반환,대소문자 구분. [결과 : jQuerbye Study !]
document.write(str.concat("good")); // 끝에 good을 결합하여 반환. [결과 : jQuery Study !good]
document.write(str.split(" ")); // " "(공백)을 기준으로 데이터 분리 [결과 : jQuery,Study,!]
document.write(str.slice(4,5)); // 4번인텍스 부터 5번 인덱스 전까지의 문자 데이터를 잘라서 반환. [결과 : r]
위에서 배운 String 객체를 이용하여 예제를 한번 풀어보도록 할께요.
예제1. 질의 응답창을 이용하여 아이디를 입력 받고 입력받은 아이디는 두글자만 노출되고 나머지는 *로 출력하시오
var id = prompt("아이디를 입력하세용","");
var result = "";
for (var i = 0; i < id.length; i++) {
if(i<=1){
result+= id.charAt(i);
}else{
result+= "*";
}
};
document.write(result);
var id = prompt("아이디를 입력하세용","");
var result = "";
for (var i = 0; i < id.length; i++) {
if(i<=1){ result+= id.charAt(i); }
else{ result+= "*"; }
};
document.write(result);
예제2. 질의 응답창을 이용하여 이메일을 입력 받고 입력받은 형식이 잘못 되었으면 다시 작성 하도록 하시오.
var email = prompt("이메일을 입력하세요.","");
var result = email.indexOf("@");
//데이터가 없으면 -1을 반환,//문자가 하나만 존재한다면 indexOf 와 lastIndexOf의 값은 같아야 한다. 비교시 참조.
if(result < 0 || result != email.lastIndexOf("@")){
alert("이메일 형식이 아닙니다.");
location.reload();
}
else{ document.write(email); }
반응형
'IT > JavsScript' 카테고리의 다른 글
페이지 최상단 스크롤 이동 (feat. iframe) (0) | 2021.03.12 |
---|---|
parseInt를 사용하여 문자형 데이터를 Number형 데이터로 바꾸기 (0) | 2021.03.12 |
컨펌(confirm)창에서 이벤트(Event) 핸들링 하기 (0) | 2021.03.12 |
Date 객체 톺아보기 (0) | 2021.03.12 |
자바스크립트(Javascript) 문자열 자르기(substr, split) (0) | 2021.03.11 |
광고차단(애드블록)프로그램이나 브라우저를 사용중이시면 프로그램을 비활성화이나 블로그 주소를 예외 처리 해주시면 광고가 노출됩니다. 귀찮고 번거롭겠지만 광고 클릭은 저에게는 큰 힘이 됩니다. 🙇🏻♂️🙇🏻♀️
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)