자바스크립트 문자열 객체는 어떻게 사용할까!?

자바스크립트 문자열 

 

자바스크립트에서는 간단한 텍스트를 처리하기 위해 문자열을 유형을 자주 사용합니다. 

 

원시 유형과 객체

단순히 값만 가지고 있을 경우를 '원시 유형'이라고 하고 프로퍼티와 메서드를 가지고 있을 때는 '객체'라고 했습니다.  자바스크립트 에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 예를들어 문자열을 만들 때 간단한 변수에 length라는 프로퍼티를 사용하게 되면 str 변수에 length라는 프로퍼티를 정의하지 않았는데도 length 프로퍼티를 사용할 수 있습니다.

 

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

 

또한 Number와 boolena, string 유형은 별도로 프로토차입 객체가 만들어져 있습니다. 즉 숫자는 Number, 문자열은 String 객체라는 식으로 만들어 졌는데, 이런 객체를 '래퍼 객체'라고 부릅니다.

 

boolean -- ------->  Boolean 객체

number  ----------> Number 객체

string -----------> String 객체 

 

원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라지게 되는데 필요할 때만 객체를 임시로 바꿔 사용하고 사용이 끝나면 다시 원시 유형으로 되돌아오는걸 

'오토박싱'이라고 합니다.

 

 

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

문자열의 길이를 찾을 때는 배열에서 처럼 length 프로퍼티를 사용합니다.

문자열.length

 

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

문자열은 여러 개의 문자가 나열되어 있으므로 배열처럼 각 문자의 위치를 가리키는 인덱스가 있다고 가정할 때 위치와 관련된 주요 메서드입니다.

 

charAt()

특정 위치의 문자 접근하기

 

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

 

<기본형>

문자열.charAt(위치)

 

메서드를 사용한다면 str 문자열에 인덱스가 3인 요소와 인덱스가 5인 요소를 가져오는 예제입니다.

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

인덱스의 위치에 적합한 단어를 가져올 수 있습니다. 또한 표기할 때는 [ ] 대괄호를 사용해서 인덱스 번호를 사용할 수 있습니다.

 

indexOf()

문자열에서 부분 문자열의 위치를 찾기

 

2개 이상이 단어로 구성된 문자열에서 공백으로 구분되는 여러 개의 부분 문자열이 있을 때 부분 문자열이 어디있는지 검색하는 메서드입니다. indexOf() 메서드는 괄호 안의 문자열이 나타난 위치를 알려주고 '위치' 값을 생략할 경우에는 문자열이 나타난 첫 번째 위치를 알려줍니다.

 

<기본형>

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

let str = "Good morming, everyone."
str.indexOf("morning")		//5
str.indexOf("evening")		//-1
str.indexOf("morning", 5)	//5
str.indexOf("r",7)	// 17

이처럼 indexOf는 빈 문자열까지 계산해서 index의 값을 계산해 주는데 값이 있으면 값의 위치 값 없으면 -1로 값이 나오게 됩니다. 문자열과  위치의 값이 함께 나타나면 위치 기준으로 index의 값을 입력 해 줍니다. 마지막 str4의 문제처럼 r만 존재한다면 r이 7번째에 존재하므로 그 기준으로 다음 r의 index값을 입력해 줍니다.

 

 

문자열에 어떤 문자열이 있는지 확인하기 : -startsWidth(),-endsWidth(),includes() 메서드

문자열의 시작과 끝에 특정 문자나 문자열이 있는지 확인하거나 특정 문자가 포함 되어있는지 확인할 떄 사용합니다.

 

-startsWidth()

문자열이 특정 문자나 문자열로 시작하는지 확인하는 메서드 입니다. 확인할 문자열에서는 영문자의 대소문자를 구별하므로 주의해야 합니다. 결과 값은 ture나 false 입니다.

 

<기본형>

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

let str= "Hello, everyone."
str.startsWidth("Hello") //ture
str.startsWidth("hello") //false
str.startsWidth("He")	//ture
str.startsWidth("Hello, ev")	//ture
str.startsWidth("el", 1)	//ture
str.startsWidth("o", 3)		//false

 

특정 문자나 문자열이 해당 위치부터 시작하는지 알 수 있습니다. 해당 위치부터 시작한다면 ture가 되지만 해당 위치가 아니라면 false라는 값이 나오게 됩니다.

 

-endsWidth()

특정 문자나 문자열로 끝나는지 확인하는 메서드 입니다. 이 메서드 역시 결과 값을 ture와 false이고 영문자의 대소문자를 구별할 수 있습니다.

 

<기본형>

문자열.endsWidth(문자나 문자열)
문자열.endsWidth(문자열, 길이)

str = "Hello, everyone."
str.endsWidth ("everyone.")	//ture
str.endsWidth ("Everyone.")	//false
str.endsWidth ("lo, everyone")	//false
str.endsWidth ("one", 16)	//ture
str.endsWidth ("el", 16)	//false

endsWidth값은 길이를 나타낼 수 있습니다. 전체 길이가 16인데 거기서 마지막 문자열이면 ture 마지막 문자열이 아니면 false의 값이 나오게 됩니다.

 

-includes()

<기본형>

문자열.includes(문자열)

str = "Hello, everyone"
str.includes("every") 	//ture
str.includes("hello") 	//false
str.includes("everyone", 7) 	//false

대소문자를 구분하고 index의 위치 값에 문자열이 위치해있지 않은 경우 false라는 값이 나오게 됩니다.

 

 

 

문자열 메서드 활용하기

 

큰따옴표나 작은따옴표로 묶기만 하면 모든 자료는 문자열이 될 수 있습니다. 그러다 보니 문자열 안에 있는 불필요한 공백을 제거해야 합니다, 영문자의 대소문자를 특정한 형태로 바꿔서 표시해야 할 수도 있는데 이럴 떄 사용할 수 있는 주요 메서드를 알아보겠습니다.

 

 

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

문자열에서 공백이란 스페이스바를 눌러 입력한 공백과 탭을 널러 입력하고 줄을 바꾸기 위해 사용한 이스케이프 문자(\n, \r) 등을 말합니다. 문자열에는 공백을 넣을 수도 있고 그대로 공백을 표시할 수 있습니다. 하지만 공백을 제거할 경우 String객체에 있는 메서드를 사용하면 매우 간단하게 삭제 할 수 있습니다.  다음의 세 가지 메서드 중  필요한 것을 사용하면 됩니다.

 

<기본형>

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

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

 

 

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

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

 

<기본형>

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

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

 

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

문자열 중에서 특정 문자열만 추출할 때는 substring()메서드와 slice()메서드를 사용합니다. 이 메서드들은 사용 형식이나 동작 방법이 모두 비슷합니다.

 

-substring()

시작 위치부터 끝 위치의 직전까지 추출해서 반환하니다. 이 떄 끝 위치의 직전까지 추출하고 끝 위치는 포함되지 않습니다. 끝 위치를 지정하지 않으면 시작 위치부터 문자열 끝 위치까지 추출해서 반환합니다.

 

<기본형>

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

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

 

slice()

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

 

<기본형>

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

str = "Good morning."
str.slice(0, 4) //"Good"
str.slice(-5, 12)	//"ning"
str.substring(-5, 12)	//"Good morning" 음수가 들어가면 0으로 바꿔서 실행

slice는 음수가 들어가서 실행이 가능 합니다. 0부터 12까지 문자열의 길이가 있으면 음수는 -13부터 -1까지 길이가 적용됩니다.

 

 

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

문자열에서 구분자를 기준으로 문자열을 쪼개줍니다.

 

<기본형>

문자열.split(구분자)

str = "Good morning"
arry1 = str.split(" ") //["Good morning"]
arry1 = str.split("")	//["G","o","o","d"," ","m","o","r","n","i","n","g"]

문자열을 단어별로 구분하려면 구분자를 공백 (" ") 으로 지정한 후 메서드를 실행해야 합니다. split()메서드는 새로운 배열을 반환합니다.

문자열을 각각의 글자로 나누어서 문자 배열로 반환하려면 구분자를 ("")큰따옴표로 지정해 줍니다. 이렇게 글자별로 구분할 때는 큰따옴표와 큰 따옴표 사이에 공백이 없어야 합니다.