Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

Leeyanggoo

[JS] 자바스크립트 문자열과 속성 메서드 알아보기!! 본문

2023/JavaScript

[JS] 자바스크립트 문자열과 속성 메서드 알아보기!!

Leeyanggoo 2023. 3. 29. 20:13

문자열이란?

 

자바스크립트에서 문자열(string)은 텍스트 데이터를 뜻합니다.

보통 문자열은 따옴표(", ')로 감싸서 표현하며, 불변의 속성을 가진 원시 유형입니다.

하지만 문자열은 여러 속성과 메서드를 사용해서 변경할 수 있습니다.

자바스크립트는 기본 데이터 타입인 문자열(String), 숫자(Number), 불리언(Boolean), 심볼(Symbol), null, undefined 등을 객체처럼 다룰 수 있는 래퍼 객체(wrapper object)를 제공합니다.

즉 원시 유형을 객체로 변환했다가 다시 원시 유형으로 되돌리는 것인데요, 이것을 오토박싱(autoboxing)이라고 합니다.

 

 

문자열의 길이 - length 속성

문자열의 길이를 찾을 때는 배열에서 사용하듯 length 속성을 사용합니다.

let str = "Hello"

console.log(str.length)	//5

 

문자열 위치 활용 - charAt(), indexOf() 메서드

문자열.charAt(위치)은 문자열에서 특정 문자의 위치를 가져오는 함수입니다.

배열처럼 대괄호([])를 이용해 문자열의 위치를 인덱스처럼 활용할 수 있습니다.

let str = "Hello"

str.charAt(1)	//"H"
str[5]	//"o"

 

여러 단어가 나열된 경우 공백(띄어쓰기)이 존재하는데, 이런 공백도 위치값으로 파악해 정확한 문자열의 위치를 찾으려면 indexOf(문자열, 위치) 메서드를 이용합니다.

indexOf() 메서드는 해당 문자열이 나타난 첫 번째 위치를 반환합니다.

만약 찾는 문자열이 없으면 '-1'을 반환합니다.

let str = "Hello World"

str.indexOf("World")	//7 공백도 문자열 위치값(index)으로 파악함
str.indexOf("H", 1)	//-1 위치=index 이기 때문에 0부터 시작하므로 H는 0부터 시작

 

특정 문자 검색 및 확인 - startsWith(), endsWith(), includes() 메서드

startsWith(문자(열), 위치) 메서드는 특정 문자나 문자열로 시작하는지 확인하는 메서드입니다. 위치를 함께 지정하면 해당 위치부터 시작하는지 알 수 있습니다.

endsWith(문자(열), 길이) 메서드는 특정 문자나 문자열로 끝나는지 확인하는 메서드입니다. 길이를 함께 지정하면 해당 문자의 마지막 길이를 알 수 있습니다.

includes(문자(열), 위치) 메서드는 특정 문자나 문자열이 있는지 확인하는 메서드입니다.

이 메서드들은 모두 true 혹은 false인 불린값을 반환하며, 대소문자의 구별이 필요합니다.

let str = "Hello World"

str.startsWith("Hel")	//true
str.startsWith("Wor")	//false
str.startsWith("hel")	//false
str.startsWith("W", 6)	//true 시작하는 문자열 위치

str.endsWith("Hel")	//false
str.endsWith("rld")	//true
str.endsWith("rld", 11)	//true
str.endsWith("lo", 5)	//true 끝나는 문자열 길이

str.includes("Hel")	//true
str.includes("Wor")	//true
str.includes("wor")	//false

 

문자열 메서드 활용!

 

자바스크립트에서 따옴표(", ')로 감싸면 문자열로 인식하기 때문에 불필요한 공백의 제거나, 대소문자의 변경을 해야 할 수도 있습니다.

이럴 때 사용하는 것이 문자열 메서드입니다.

 

문자열 공백 제거 - trim(), trimStart(), trimEnd() 메서드

문자열.trim()은 문자열의 앞뒤 공백을 제거합니다.

문자열.trimStart()은 문자열의 앞쪽 공백을 제거합니다.

문자열.trimEnd()는 문자열의 뒤쪽 공백을 제거합니다.

let str = " Hi, I'm Lee. "

str.trim()	//"Hi, I'm Lee."
str.trimStart()	//"Hi, I'm Lee. "
str.trimEnd()	//" Hi, I'm Lee."

 

대소문자 변경 - toUpperCase(), toLowerCase() 메서드

문자열.toUpperCase()는 문자열을 모두 대문자로 반환합니다.

문자열.toLowerCase()는 문자열을 모두 소문자로 반환합니다.

let str = "Hi, I'm Lee."

str.toUpperCase()	//"HI, I'M LEE."
str.toLowerCase()	//"hi, i'm lee."

 

문자열 추출 - substring(), slice() 메서드

문자열.substring(시작 위치, 끝 위치)는 문자열의 시작부터 끝 위치까지 추출해서 반환합니다.

끝 위치를 적지 않으면 문자열 끝까지 추출하며, 끝 위치를 지정하면 끝 위치 직전까지 추출합니다.

문자열.slice(시작위치, 끝 위치) 또한  substring()과 같은 특징을 가지고 있습니다.

다만 slice()는 위치를 지정할 때 음수를 쓸 수 있습니다. 이때 문자열 맨끝이 -1이며 시작점까지 뺀 숫자로 계산합니다.

let str = "Good Boy"

str.substring(5)	//"Boy"
str.slice(-3, 8)	//"Boy"

 

문자열 구분 - split() 메서드

문자열.split(구분 문자)는 구분하려는 문자를 기준으로 문자열을 분리해서 배열로 반환합니다.

단어별로 구분하고자 할 때는 공백(" ")으로 지정하며, 글자별로 구분할 때는 공백 없이 따옴표만("") 씁니다.

let str = "Good Boy"

str.split(" ")	//["Good", "Boy"]
str.slice("")	//["G", "o", "o", "d", " ", "B", "o", "y"]