- 자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열 유형을 자주 사용합니다.
원시 유형과 객체
앞에서 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을 때는 '객체' 라고 설명했습니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 이것이 어떻게 가능할까요? 문자열을 예로 들어 보겠습니다.
문자열을 만들 때 간단히 변수에 문자열을 할당한 후 Length라는 프로퍼티를 사용해보면 str 변수에 Length라는 프로퍼티를 정의하지 않았는데도 Iength 프로퍼티 를 사용할 수 있습니다.
let str = "hello"
str.length // 5- 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 '래퍼 객체' 라고 부릅니다.
- 자 다음은 여러가지 종류의 프로퍼티와 메서드들에대해 알아보겠습니다.
length
- 문자열의 길이를 찾을 때 사용되는 프로퍼티입니다.
- 숫자로 반환됩니다.
| 기본형 |
| 문자열.length |
charAt()
- 문자열에서 특정 위치의 문자를 가져오는 메서드입니다.
- 문자로 반환됩니다.
| 기본형 |
| 문자열.charAt(위치) |
indexOf()
- 문자열에서 부분 문자열의 위치를 찾아주는 메서드입니다.
- 숫자로 반환되며 값이 없을 경우 -1로 반환 됩니다.
| 기본형 |
| indexOf(문자열, 위치) |
startsWith(), endsWith()
- 특정 문자열로 시작하는지 확인하는 메서드입니다.
- 특정 문자열로 끝나는지 확인하는 메서드입니다.
- 불린으로 반환됩니다.
| 기본형 |
| 문자열.startsWith(문자 또는 문자열) 문자열.endsWith(문자 또는 문자열) |
includes()
- 문자열에 특정 문자열이 포함되었는지 확인하는 메서드입니다.
- 불린으로 반환됩니다.
| 기본형 |
| 문자열.includes(문자열) |
trim(), trimStart(), trimEnd()
- 문자열에서 공백 제거하기하는 메서드입니다.
- 사용자가 실수로 앞이나 뒤에 공백을 넣었을 때도 같은 값으로 인식해줍니다.
| 기본형 |
| 문자열.trim() //문자열의 앞뒤 공백제거 문자열.trimStart() //문자열의 앞 공백제거 문자열.trimEnd() //문자열의 뒤 공백제거 |
toUpperCase(), toLowerCase()
- 문자열의 대소문자 바꿔주는 메서드입니다.
- 모두 대문자로 혹은 모두 소문자로 바꾸어 줍니다.
| 기본형 |
| 문자열.toUpperCase() // 문자열을 모두 대문자로 변환 문자열.toLowerCase() // 문자열을 모두 소문자로 변환 |
substring(), slice()
- 부분 문자열을 추출해주는 메서드입니다.
- 시작위치만 적는다면 substring는 끝 위치 직전까지, slice는 끝까지 추출해주며, 끝 위치를 지정해준다면 둘 다 끝 위치 직전까지 추출해줍니다.
| 기본형 |
| 문자열.substring(시작 위치, 끝 위치) 문자열.slice(시작 위치, 끝 위치) |
split()
- 구분자에 따라 문자를 쪼개주는 메서드 입니다.
- 사용하기에 따라 단어를 짜를 수도 있고 글자별로 짜를 수도 있습니다.
| 기본형 |
| 문자열.split(구분자) |
- 이처럼 많은 문자열 프로퍼티와 메서드들을 잘 활용한다면 원하는 데이터를 추출하거나 만들 수 있습니다.
- 예를 들어 사용자가 입력한 이메일의 값을 받아올 때 개인정보 보호를 위해서 보이는 것은 앞의 3자리만 보이게 하고 싶을 때도 이러한 메서드들을 사용한다면 할 수 있습니다!!
button. addEventListener("click", function() {
let username, domain;
if(email.value !== "") { //이메일에 입력한 값이 공백이 아닐 때 실행됩니다.
username = email.value.split("@”)[O]; // 0 기준으로 앞부분을 username에 저장합니다.
username = username.substring(0, 3); //username 중 세 자리만 잘라냅니다.
domain = email.value.split("@") [1]; //@ 기준으로 뒷부분 domain에 저장합니다.
resllt.innerText = ${username}...@${domain}`; // 결과를 표시합니다.
}
});- 이메일 주소는 @을 기준으로 앞부분은 사용자 이름이고 뒷부분은 도메인 주소이므로 @앞부분과 뒷부분의 문자열을 split()메서드를 사용해서 나누어 줍니다.
- 그리고 문자열의 앞부분을 username에 , 뒷부분은 domain에 저장을 합니다. 그리고 username중에서 세 자리만 필요하므로 왼쪽부터 세 번째까지만 꺼내 다시 username에 할당하고, 수정한 username과 @, 그리고 도메인을 연결해서 출력을 해주면 됩니다.