자바스크립트 문법 (18) String객체

(18) String 객체

문자열 객체는 프로그램에서 '검색'하거나 데이터베이스 검색에 많이 사용된다. 특히 정규표현식과 결합하면, 끝말잇기 게임같은 프로그램에 주로 사용된다. 빅데이터가 급부상하면서 웹 크롤링이 중요한 추세이므로 웹개발에 있어 String객체를 숙지할 필요가 있다.

1 IndexOf ( substr , [,start] ) , lastIndexOf ( substr , [,start] )

indexOf 메소드는 substr에 해당하는 문자열을 전방 or 후방에서 검색하여 해당 자리값을 반환해준다. 주의해야 할 사항은, 소환하는 index값은 절대값 위치라는 점이다. 예제를 보자.

---

<script type="text/javascript">

var str1 = "비올때 먹는 치킨은 보통 치킨맛과 다른 치킨맛이다";

console.log(str1.indexOf('치킨')); // 7

console.log(str1.lastIndexOf('치킨'));// 22 

console.log(str1.indexOf('치킨',8));// 14

console.log(str1.lastIndexOf('치킨',20));// 14

</script>

---

indexOf매소드로 검색을 할때, 첫 시작은 0부터 계산한다. 현재 치킨의 '치'가 7번째 위치에 온다. lastIndexOf( )매소드는 문장의 뒤에서부터 '치킨'을 찾는다. 위의 예문에서, 뒤에서부터 치킨을 검색하다보면, '다른 치킨맛'이 바로 검색된다.

'다른 치킨맛'의 치킨은 왼쪽(절대위치)을 기준으로 22번째 위치해 있다. 여기서 주의해야 할 점은, 뒤에서부터 계산한다고해서 뒤에서부터 0~이라고 계산하지 않는다는 점이다.

위치는 무조건 왼쪽을 기준으로 위치값 자체를 전송해준다.

indexOf('치킨',8); 같은 경우, 왼쪽으로부터 8번째부터 검색을 시작한다. 8번째 위치한 형태소는 '킨'이다. 이후 치킨은 '보통 치킨맛'의 '치킨'이다. 보통 치킨맛의 위치는 14번째에 위치해있다.

lastIndexOf('치킨',20) 같은 경우, 가장 뒤쪽에서부터 치킨을 검색한다. 하지만 좌측에서 20번째부터 왼쪽으로 검색해서 '치킨'을 찾는다. 따라서 '보통 치킨맛'의 '치킨'이 검색되고, 해당 자리값은 14이다.

2 startsWith( ), endsWith( ), includes( )

---

var str1 = "비올 때 먹는 치킨은 보통 치킨과 다른 치킨맛이다.";

console.log(str1.startsWith('치킨',8));  // true

console.log(str1.startsWith('치킨'));    // false

console.log(str1.endsWith('치킨'));     // false

console.log(str1.endsWith('치킨',10));  // true

console.log(str1.search('치킨'));     // 8

---

startsWith( ) , endsWith( ), includesWith( ) 매소드는 ES2015부터 새롭게 추가된 매소드들이다.

startsWith('문자열')는 시작을 '문자열'로 하는지를 true or false로 알려준다.

endsWith('문자열')은 끝이 '문자열'로 끝나는지를 역시 true or false로 알려준다.

위의 코드에서 꽤 유용한 매소드가 search('문자열')이다. search('문자열') 같은 경우, 해당 문자열을 검색해서 위치값을 전송한다. 만일 사용자가 원하는 위치값이 있다면, 당연히 true역할로 사용할 수도 있고, 위치값을 기준으로 문자열 변경과 같은 기능에 활용할 수도 있다. 

3 charAt( ), slice( ), substring( ), substr( ), split( ) 

---

[예제]

var str1 = "비올 때 먹는 치킨은 보통 치킨과 다른 치킨맛이다.";

console.log(str1.charAt(20)); // 른 

console.log(str1.slice(14,18)); // 치킨과

console.log(str1.slice(13,7)); // 공백출력

console.log(str1.substring(14,18)); // 치킨과

console.log(str1.substring(13,7)); // 치킨은 보

console.log(str1.substr(14,9)); // 치킨과 다른 치 

console.log(str1.split('치킨')); // ["비올 때 먹는" , "은 보통", "과 다른", "맛이다."]

---

위에서부터 하나씩 살펴보자. charAt( )매소드는 해당 위치에 오는 자리값에 해당하는 글자를 뽑아낸다. 여기서는 20번째 오는 글자가 '른'이다. 위의 코드에서 slice( ) 매소드는 substring( ) 매소드와 다소 혼동할 소지가 높은 매소드이다. 가령, str1.slice(14,18)과 str1.substring(14,18)은 같은 결과값 '치킨과'를 출력한다. 

하지만 뒤에 오는 값이 시작보다 작을 경우, substring(start,end )매소드는 end부터 end+1부터 start까지 출력한다. 반면, slice(start,end)같은 경우는, 그대로 공백을 출력한다.

str1.substr(13,7 )매소드는 13번째 글자부터 시작해서 7번째까지 출력한다. 여기서는 '치킨과 다른 치'까지이다.

str1.split('치킨') 매소드는, '치킨'문자열을 제외하고, 앞뒤로 잘라서 배열을 만든다. 

  

4 concat( ) , repeat( ), trim( ). length 

- concat('문자열')매소드는, 기존의 문자열에 해당 매소드에 사용한 문자열을 덧붙인다.

- trim( )매소드는, 문자열 전후에서 공백을 삭제한다.

- repeat(숫자)는 숫자만큼 해당 문자열을 반복한다.

- length는 문자열의 총 길이를 반환한다.

---

[예제]

console.log(str1.concat(' 문자열 붙이기'));  //  비올 때 먹는 치킨은 보통 치킨과 다른 치킨맛이다. 문자열 붙이기

console.log(str1.repeat(2)); // 비올 때 먹는 치킨은 보통 치킨과 다른 치킨맛이다.비올 때 먹는 치킨은 보통 치킨과 다른 치킨맛이다.

console.log(str1.trim( )); // 비올 때 먹는 치킨은 보통 치킨과 다른 치킨맛이다.

console.log(str1.length); // 28

---