문자열에 대해 알아보자!

자바스크립트 문자열

간단한 텍스트를 처리하기 위해서는 문자열을 자주 사용하는데 오늘은 문자열을 다루는 방법에 대해 살펴보겠습니다!

❣️문자열에 접근하기

원시 유형과 객체

let str = "hello"
str.length //s

자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 래퍼객체라고 부릅니다.

 

number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라져버립니다. 필요할 때만 임시로 객체로 바꿔 사용하고 사용이 끝나면 다시 원시 유형으로 되돌아오는데, 이것을 오토박싱이라고 합니다.

 

문자열의 길이 : length 프로퍼티

문자열의 길이를 찾을 때는 배열에서처럼 length 프로퍼티를 사용합니다. 이때  str 문자열에 포함된 공백도 문자열의 길이에 포함됩니다.

문자열.length

예시

let str = "Good morning!";
let greeting = "안녕하세요?";
str.length	//14
greeting.length	//6

문자열에서 문자의 위치 활용하기 : charAt(), indexOf() 메서드

charAt()메서드

문자열에서 특정 위치의 문자를 가져올 때 이 charAt() 함수르 사용합니다. 위치는 인덱스로 표시되는데, 인덱스는 0부터 시작합니다.

문자열.charAt(위치)

예시

let str = "Good morning!";
str.charAt(3)	// "d"
str[5]	// "m"

 

 

indexOf()메서드

문자열에서 부분 문자열이 어디에 있는지 검색할 때 indexof()메서드를 사용하면 편리합니다. indexOf() 메서드는 괄호 안의 문자열이 나타난 위치를 알려주고 위치 값을 생략할 경우에는 문자열이 나타난 첫 번째 위치를 알려줍니다.

indexOf(문자열)
indexOf(문자열, 위치)

예시

let str1 = "Good morning, everyone. Beautiful morning."
str1.indexOf("morning")	//5
str1.indexOf("evening")	//-1

문자열에 어떤 문자가 있는지 확인하기 : stratsWith(), endsWith(), includes() 메서드

startsWith() 메서드

문자열이 특정 문자나 문자열로 시작하는지 확인해야할 때 startsWith() 메서드를 사용할 수 있습니다.하지만 확인할 문자나 문자열에서 영문자의 대소문자를 구별하므로 주의해야합니다. 이때 결괏값은 boolean으로 나옵니다.

문자열.startsWith(문자 또는 문자열, 위치)

예시

str2 = "Hello, everyone."
str2.startsWith("Hello")	//true
str2.startsWith("hello")	//false
str2.startsWith("He")		//true
str2.startsWith("Hello, ev")	//true

endsWith() 메서드

문자열이 특정 문자나 문자열로 끝나는지 확인할 수 있는 endsWith() 메서드가 있습니다. 이 메서드의 결괏값도 true나 false이고 영문자의 대소문자를 구별합니다.

문자열.endsWith(문자나 문자열)

또한 문자열과 함께 길이를 함께 지정할 수 있습니다. 이때 startsWith()메서드에서는 위치를, endsWith() 메서드에서는 길이를 사용한다는 것을 기억해둡시다!

문자열.endsWith(문자열, 길이)

예시

// str2 = "Hello, everyone."
str2.startsWith("el", 1)		//true
str2.startsWith("o", 4)			//true

// str3 = "Hello, everyone."
str3.endsWith("everyone")		//true
str3.endsWith("Everyone")		//false
str3.endsWith("one")		//true
str3.endsWith("lo, everyone")		//false

includes()메서드

문자열에 특정 문자나 문자열이 포함되었는지 확인할 때 includes() 메서드를 사용할 수 있습니다. 이 메서드도 영문자의 대소문자를 구별합니다.

문자열.includes(문자열)

예시

// str2 = "Hello, everyone"
str2.indexOf("every") !== -1 //true

❣️문자열에 활용하기

문자열에서 공백 제거하기 : trim(), trimStart(),trimEnd() 메서드

문자열에는 공백을 넣을 수도 있고, 원래의 공백을 그대로 표시할 수 있습니다. 하지만 연산에 사용하기 위해 공백을 제거할 경우 String 객체에 있는 메서드를 사용하면 매우 간단하게 삭제할 수 있습니다.

 

문자열.trim()		//문자열의 앞뒤 공백을 제거합니다.
문자열.trimStart()	//문자열의 앞쪽 공백을 제거합니다.
문자열.trimEnd()	//문자열의 뒤쪽 공백을 제거합니다.

예시

let str3 = "ab cd ef"
str3.trim()		// 'ab cd ef'
str3.trimStart()		// 'ab cd ef	'
str3.trimEnd()		// '	ab cd ef'

문자열의 대소문자 바꾸기 : toUpperCase(), toLowerCase()메서드

영문자 문자열의 경우에는 모두 대문자로, 또는 모두 소문자로 바꿀 수 있습니다.

문자열.toUpperCase()	//문자열을 모두 대문자로 변환합니다.
문자열.toLowerCase()	//문자열을 모두 소문자로 변환합니다.

예시

let str4 = "Good morning."
str4.toUpperCase()	// "GOOD MORNING."
str4.toLowerCase()	// "good morning."

부분 문자열 추출하기 : substring(), slice() 메서드

문자열 중에서 특정 문자열만 추출할 때는 아래의 메서드를 사용합니다.

 

substring() 메서드

시작 위치부터 끝 위치의 직전까지 추출해서 변환합니다. 끝 위치의 직전까지 추출하고 끝 위치는 포함되지 않는다는 점을 알아둡시다! 끝 위치를 지정하지 않으면 시작 위치부터 문자열 끝까지 추출해서 반환합니다.

문자열.substring(시작 위치)
문자열.substring(시작 위치, 끝 위치)

예시

// str4 = "Good morning."
str4.substring(5)	// "morning."
str4.substring(0, 4)	// "Good"

slice() 메서드

시작 위치만 지정하면 해당 위치부터 끝까지, 시작 위치와 끝 위치를 함께 지정하면 시작 위치부터 끝 위치 직전까지 추출합니다.

문자열.slice(시작 위치)
문자열.slice(시작 위치, 끝 위치)

예시

// str4 - "Good morning."
str4.slice(0, 4)	// "Good"
str4.slice(-5, 12)	// "ning"

구분자에 따라 문자 쪼개기 : split() 메서드

문자열의 split 메서드는 문자열에서 구분자를 기준으로 문자열을 쪼개줍니다.

문자열.split(구분자)

예시

str5 = "Hello everyone"
array1 = str5.split(" ")	// ["Hello", "everyone"]