ITWILL : String객체, 짤라오는 함수 4종류 .substring(), slice(), substr(), charAt(), .indexOf()와 .lastIndexOf()차이, .concat(), .split(), ID자릿수를 제한하는 이메일 유효성검사

ITWILL학원 : 8강 JS기초 BY 정규태강사

1. 문자열객체(String)

문자열객체는 배열처럼 데이터를 저장한다.

let name = new String("Hong") //문자열객체

let name2 = "Kim" //문자열데이터(문자열상수)

둘 다 문자열객체로 사용할수있다.

문자열객체는 두가지타입의 function을 가지고있다.
스타일을 지정하는 타입의 함수와 데이터를 처리하는 타입의 함수이다.

1. 스타일을 지정하는 함수

폰트를 굵게 표시한다.
하지만 스타일을 지정하는 함수는 실제론 거의 사용하지않는다.
실무에선 스타일은 css로 지정한다
그렇지만 굳이 css를 쓰지않더라도 이렇게 스타일을 지정할 수있다는 사실을 알고있어야한다.

참고로 toUpperCase()와 toLowerCase()는 사용할 수 도 있다

document.write("name : " + name.bold()); //굵게 출력
document.write(name.toUpperCase()+"<br>"); //모두 대문자로 출력
document.write(name.toLowerCase()+"<br>"); //모두 소문자로 출력

체이닝기법
함수를 연결하여 한번에 사용하는 형태이다.

document.write(msg.fontcolor("red").fontsize("15").bold())

위의 코드를 통해 msg의 글씨색깔은 빨간색이며 폰트사이즈는 15이고 굵게 출력된다.

2. 데이터를 처리하는 함수

아래 함수들(2번부터 ) 모두가 데이터를 처리하는 함수이다.

2. .length

길이를 구하는 함수이다

3. 짤라오는 함수 4종류 .substring(), slice(), substr(), charAt()

substring(시작인덱스,끝인덱스)는 시작부터 끝 인덱스 앞자리까지 짤라온다.
substring(인덱스) 이처럼 인덱스를 하나만 적는 경우에는 시작인덱스로 취급하여 시작인덱스부터 끝까지 다 짤라온다.

let name3 = "이번년도는 복세편살!"
document.write(name3.substring(2,6))
document.write(name3.substring(2))
//출력값 
년도는
년도는 복세편살!

이것과 비슷한 함수로는 아래 세 가지가 있다.

1. slice(시작,끝) : 시작인덱스부터 끝인덱스의 앞자리까지 짤라오는 함수

2. substr(시작인덱스,갯수) : 시작인덱스부터 갯수만큼 짤라오는 함수

3. .charAt(인덱스) : 해당 인덱스에 있는 문자데이터를 가져온다.

   let name3 = "이번년도는 복세편살!"
   document.write(name3.charAt(0)) //첫번째글자 가져오기
   document.write(name3.charAt(name3.length-1)) //제일 끝 글자가져오기
   // 출력값
   이
   !

예시 1. 주민번호로 성별 구분 코드

짤라오는 함수를 이용하여 주민번호로 성별을 구분하는 코드를 작성해보자
총 4가지 방법의 함수로 짤라올수가 있다!

let num = prompt("주민번호를 -와 함께 입력하세요")
	
let checkNum = num.substring(7,8); //첫번째방법 substring사용
let checkNum = num.slice(7,8); //두번째방법 slice사용
let checkNum = num.substr(7,1); //세번째방법 substr사용
let checkNum = num.charAt(7); //네번째방법 charAt사용


if(checkNum === "2" || checkNum === "4"){
	document.write("여성입니다")
}else if(checkNum === "1" || checkNum === "3"){
	document.write("남성입니다")
}

예시 2. 전화번호 중간자리 가리기

위에서 배운 함수로 출력이 가능하나 마지막방법인 charAt는 1자리만 가져오는 것이기때문에 불가능하다.
따라서 3가지 방법으로 코드를 작성할 수 있다.

let phonenum = prompt("전화번호를 -와 함께 입력하세요")
let mobile = "010-****-" + phonenum.substring(9) //첫번째방법 substring사용
let mobile = "010-****-" + phonenum.slioce(9) //두번째방법 slice사용
let mobile = "010-****-" + phonenum.substr(9) //세번째방법 substr사용

5. .indexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 indexOf()를 사용한다.
indexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 왼쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
0
-1

현재 name3안에는 “이”가 2개가 있지만 첫번째 “이”의 index위치를 알려주고 있다.
중복되는 데이터의 첫번째 index 위치만 알려주기때문에 중복데이터가 있으면 그 위치가 어디인지 찾기가 어렵다.
그럴때 사용하는 함수가 아래에 있는 .lastIndexOf()이다.

6. .lastIndexOf()

String안에 내가 원하는 값이 있는지 찾아보는 방법으로 lastIndexOf()를 사용한다.
lastIndexOf()의 괄호안에는 찾고싶은 요소를 입력한다
해당 요소가 있는 경우에는 오른쪽에서 시작해서 제일 먼저 만나는 index의 위치를 알려주고
해당 요소가 없는 경우에는 -1이 출력된다.

let name3 = "이번년도는 복세편살이야"

document.write(name3.indexOf("이")+"<br>")
document.write(name3.indexOf("하")+"<br>")
//출력값은
11
-1

7. .concat()

괄호에 추가하고싶은 데이터를 작성하여, 데이터를 추가하는 방법에는 아래처럼 두가지가 있다.

1. 더하기 연산자사용
2. .concat()사용

let name3 = "이번년도도는 복세편살이야"
document.write(name3 + "!!!!"+"<br>")
document.write(name3.concat("!!!!")+"<br>")

//출력값
이번년도도는 복세편살이야!!!!
이번년도도는 복세편살이야!!!!

8. .split()

괄호안의 값을 기준으로 문자를 파싱(나누기)후 배열에 저장한다.

let name3 = "이번년도도는 복세편살이야"
document.write(name3.split(" ")+"<br>")
document.write(name3.split(" ")[0]+"<br>")

//출력값 : 괄호가 스페이스이므로 스페이스 기준으로 2개가 나누어진다.
이번년도도는,복세편살이야
이번년도도는

9. ID자릿수를 제한하는 이메일 유효성검사

userEmail.indexOf(“@”) >= 0)에서
0대신에 다른 숫자를 넣으면 해당 숫자에 따라 최소 ID의 자리수가 달라지는 로직을 만들수있다.
userEmail.indexOf(“@”) >= 8)인경우 8자리이상 ID만 true가 된다.

이런 로직을 잘 짜야지 좋은 개발자가 될 수 있다.

function check(userEmail){

	let check1 = false; //@유무 체크
	let check2 = false; //유효한 이메일주소 체크
	let emailArr = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"]

	if(userEmail.indexOf("@") >= 0){ //숫자에 따라 최소 ID의 자리수가 달라짐 8인경우 8자리이상id필요
		check1 = true;
	}

	for(let i=0; i<emailArr.length; i++){
		//document.write(emailArr[i] + "<br>")//출력
		if(userEmail.indexOf(emailArr[i]) >= 0){
			check2 = true;
			break;
		}
	}

	if(check1 && check2){
		document.write("사용자 이메일 확인완료 : "+ userEmail +"<br>")
	}else{
		document.write("이메일주소 오류!<br>")
	}
}

check("s.co.kr")
check("s.cd")
check("s@.co.kr")
check("2@.com")
check("2@.or.kd")
check("2@.cd")

//출력값
이메일주소 오류!
이메일주소 오류!
사용자 이메일 확인완료 : s@.co.kr
사용자 이메일 확인완료 : 2@.com
이메일주소 오류!
이메일주소 오류!