[Javascript] 내장 객체 - String 객체 1

String 객체의 특정 메소드를 찾으러 오신 분은 ctrl + F 로 검색하시길 바랍니다.

 

자바스크립트에 기본적으로 탑재되어 특별한 선언없이 바로 사용가능한 객체를 내장 객체라고 합니다. 그 중에서 이번 포스트에서는 문자열을 다루는데 도움을 주는 String 객체를 소개하겠습니다.

 

내장 객체를 앞으로 몇가지 더 소개할건데 이 중에서 문자열, 숫자, 논리를 다루는 String, Number, Boolean 객체를 래퍼 객체라고도 합니다. 래퍼(Wrapper)의 의미는 단어 뜻 그대로 단순한 값인 문자열, 숫자, 논리를 포장(wrap)하여 객체로 이용하기 위해 붙여졌습니다. 기본적으로 자바스크립트에서 자동적으로 데이터형과 객체를 호환시켜주기 때문에 따로 코드상에서 기술해줄 필요는 없고 위의 세가지 객체를 래퍼 객체라고 부른다~정도만 아시면 됩니다. 

---

1. String 객체

String 객체는 문자열을 다루기 위한 객체입니다. 간단히 생각하면 문자열을 자르거나, 바꾸거나, 검색하기도 하는 객체라고도 볼 수 있습니다.

 

 

2. String 객체의 종류

※ 메소드 인수에서 []안의 내용은 생략가능한 인수!

2-1. 문자열 검색

indexOf(찾을 문자, [시작 인덱스]);
lastIndexOF(찾을 문자, [시작 인덱스]);

indexOf()와 lastIndexOf()는 문자열에서 문자를 찾습니다. indexOf()는 문자열의 왼쪽에서 오른쪽으로, lastIndexOf()는 오른쪽에서 왼쪽으로 이동하며 검색합니다. 시작 인덱스를 인수로 전달한다면 해당 인덱스부터 검색을 시작합니다.

문자열에서 문자를 찾으면 찾은 문자의 인덱스를 반환합니다. 만약 문자열에서 찾을 문자가 여러개라면 가장 처음 등장한 문자의 인덱스를 반환합니다. 또 찾을 문자가 존재하지 않는다면 -1을 반환합니다.

찾을 문자를 문자열로 설정이 가능한데 이때는 첫글자의 인덱스를 반환합니다.

 

let str = '자바스크립트 자바스크립트';

console.log(str);
console.log(str.indexOf('바'));
console.log(str.lastIndexOf('바'));

인덱스는 0부터 셉니다

 

startsWith(찾을 문자, [시작 인덱스]);
endsWith(찾을 문자, [시작 인덱스]);

startsWith()과 endsWith()는 각각 문자열이 찾을 문자로 시작하는지와 찾을 문자로 종료되는지 검색합니다. 마찬가지로 검색 시작 인덱스를 인수로 넘길 수 있습니다.

결과는 논리형으로 문자를 찾으면 true 찾지 못하면 false를 반환합니다.

 

let str = '자바스크립트 자바스크립트';

console.log(str.startsWith('자'));
console.log(str.endsWith('바'));

 

 

includes(찾을 문자);

문자열에서 해당 문자(열)이 포함되어있는지 검색합니다. 포함되어있다면 true, 없다면 false를 반환합니다.

 

let str = '자바스크립트 자바스크립트';

console.log(str.includes('트 자'));
console.log(str.includes('트자'));

 

 

 

2-2. 부문 문자열 취득

charAt(인덱스);

해당 인덱스의 문자를 추출합니다.

 

 

substr(시작 인덱스, [추출할 갯수]);

substr()은 지정된 시작점+1 부터 문자를 추출합니다. 추출할 갯수가 명시되어있다면 추출할 갯수만큼, 그렇지 않다면 문자열 종료까지 문자를 하나씩 추출합니다.

 

split(문자열, [분할 갯수]);

split()은 문자열을 인수로 지정된 문자열로 부분 분할해 결과를 배열로 반환합니다. 만약 분할 갯수를 지정한다면 그 갯수만큼만 지정됩니다.

let str = '자바스크립트 자바스크립트';

console.log(str.split('스'));

let str = '자바스크립트 자바스크립트';

console.log(str.split('스', 2));

 

substring(시작 인덱스, [종료 인덱스]);
slice(시작 인덱스, [종료 인덱스]);

substring()과 slice()는 둘 다 시작 인덱스 + 1에서 종료 인덱스(종료 인덱스가 없다면 문자열 종료까지)까지의 문자열을 반환합니다.

 

같아보이는 두 가지 메소드에는 두가지 차이점이 있습니다.

 

1. 시작 혹은 종료 인덱스에 음수를 지정하는 경우

substring()에서 음수는 무조건 0으로 인식됩니다. 그러나 slice()에서 음수는 종료점으로부터의 인덱스로 인식합니다.

다음 예시와 표를 참조하시면 이해하기 쉬울것입니다.

let str = '자바스크립트';

console.log(str.substring(-2, 4));
//문자열 인덱스 0부터 3까지 추출

console.log(str.slice(2, -2));
.//문자열 인덱스 2부터 3까지 추출

아래 표는 인덱스

자	바	스	크	립	트
0	1	2	3	4	5
-5	-4	-3	-2	-1

 

2. 시작 인덱스가 종료 인덱스 보다 큰 경우

이 경우에는 substring()은 자동적으로 종료 인덱스와 시작 인덱스를 교체해서 무조건 작은 인덱스에서 시작하여 큰 인덱스로 진행되게 해줍니다. 그러나 slice()는 따로 처리없이 공백 문자열을 반환합니다.(해당하는 문자열이 존재하지 않으므로 공백 문자열 반환)

let str = '자바스크립트';

console.log(str.substring(2, 0)); //(0, 2)로 교환
console.log(str.slice(2, 1));
console.log(str.substring(2, -4));
//substring에서 음수는 0으로 교환되는데 이 법칙이 다시 적용되서 (0, 2)와 같아짐

---

검색과 부분 문자열을 추출하는 메소드를 알아봤는데 다음 포스트에서 몇가지를 더 다루겠습니다.