9-6. String 오브젝트 / 인덱스로 문자열 처리

charAt()

구분	데이터(값)
data	반환 대상
파라미터	반환 기준 인덱스(index)
반환	인덱스 번째 문자

인덱스의 문자를 반환
```
  var value = "sports";
  console.log(value.charAt(1)); // p
  console.log(value[1]); // p
```
1. JS에서 인덱스는 0부터 시작
2. 0번 인덱스는 s, 1번 인덱스는 p
3. value.charAt(1)을
  ES5에서 [1] 형태로 사용할 수 있습니다.

value[1]은 ES5 부터 사용할 수 있습니다.
자바스크립트는 프로퍼티 구조로 되어있다고 했습니다.
이 또한 마찬가지입니다. { key : value }
즉, { 0 : “s”, 1: “p”, … }

문자열 길이보다 인덱스가 크면
- 빈 문자열 반환
```
  var value = "sports";
  console.log(value.charAt(12)); // ""
```
  1. 전체 문자열 수는 6
  2. 파라미터의 인덱스가 전체 문자열 길이보다 크면 빈 문자열 반환

일반적으로 존재하지 않으면 undefined를 반환
```
  var value = "sports";
  console.log(value[12]); // undefined
```
1. value[12]에서 12번째 인덱스가 없으며 undefined 반환
2. charAt(12)에서 빈 문자열을 반환하는 것과는 차이 있음
3. 개념적으로는 undefined 반환이 적절합니다.
  undefined는 시맨틱적으로 인덱스 번째가 없다는 뉘앙스가 강합니다.

charAt(12)와 value[12]의 차이입니다.
저는 undefined로 반환되는 것이 더 낫다고 봅니다.
왜냐하면 12번째 인덱스에 값이 존재하지 않기 때문입니다.
빈문자열 ““은 값입니다.
undefined는 작성하지 않았다는 시멘틱이 강합니다.

indexOf()

구분	데이터(값)
data	검색 대상
파라미터	첫번째 파라미터 : 검색할 문자열 두번째 파라미터 : 검색 시작 위치, 디폴트(0)
반환	인덱스

data 위치의 문자열에서 파라미터의 문자와 같은 첫 번째 인덱스를 반환
검색 기준
- 왼쪽에서 오른쪽으로 검색
```
  var value = "123123";
  console.log(value.indexOf(2)); // 1
  console.log(value.indexOf(23)); // 1
```
  1. “123123”에서 2가 두 개이지만 처음 인덱스를 반환하므로 1을 반환
  2. 값을 구하게 되면 더 이상 그 뒤의 값을 구하지 않습니다.
  3. indexOf(23)에서 23이 존재하며 2가 검색된 인덱스를 반환합니다.
- 두번째 파라미터를 작성하면 작성한 인덱스부터 검색
```
  var value = "123123";
  console.log(value.indexOf(2, 3)); // 4
```
  1. indexOf(2, 3)에서 3은 3번 인덱스부터 검색하므로 1이 아닌 4를 반환
- 같은 문자가 없으면 -1 반환
```
  var value = "123123";
  console.log(value.indexOf(15)); // -1
```
```
  var value = "123123";
  console.log(value.indexOf(2, -1)); // 1
  console.log(value.indexOf(2, 9)); // -1
  console.log(value.indexOf(2, "A")); // 1
```
  1. 두번째 파라미터 값이 0보다 작으면 처음부터 검색
  2. 두번째 파라미터 값이 length보다 크면 -1 반환
  3. 두번째 파라미터가 NaN이면 처음부터 검색

indexOf()가 빌트인 String 오브젝트의 함수이긴 하지만, 두번째 파라미터 값은 Number가 넘어가야됩니다.
그래서 두번째 파라미터로 NaN이 들어가면 처음부터 검색합니다.
위와 같은 사항들은 다 외워야 될까요?
그건 아닙니다.
indexOf()의 중요 기능만 기억하시면 됩니다.
두번째 파라미터 같은 건 MDN 문서에서 검색해서 확인 후 사용하시면 됩니다.

indexOf 사용 목적

특정 문자가 몇 번째 있는지 알고 싶을 때
찾는 문자가 특정한 곳에 있는지 없는지 알고 싶을 때

즉, 찾는 문자가 검색 대상에 있느냐, 없느냐, 있으면 0 이상의 숫자가 반환되고 없으면 -1이잖아요?
이런 특성을 활용해 코드를 많이 작성합니다.

if (result >= 0) {

} else {

}

이런식으로 많이 사용합니다.

그런데 ES6에서 includes라는 함수가 나왔습니다.
이것은 존재하면 true, 아니면 false를 반환합니다.
그래서 includes 함수를 사용하는 것이 더 편합니다.

lastIndexOf()

구분	데이터(값)
data	검색 대상
파라미터	첫번째 파라미터 : 검색할 문자열 두번째 파라미터 : 검색 시작 위치, 디폴트(0)
반환	인덱스

data 위치의 문자열에서 파라미터의 문자와 같은 인덱스를 반환
단, 뒤에서 앞으로 검색
```
  var value = "123123";
  console.log(value.lastIndexOf(2)); // 4
```
1. “123123”에서 2가 두 개이지만 마지막 인덱스를 반환하므로 4를 반환

검색 기준

두번째 파라미터를 작성하면 작성한 인덱스부터 검색

같은 문자가 없으면 -1 반환

  var value = "1231231";
  console.log(value.lastIndexOf(1, 4)); // 3
  console.log(value.lastIndexOf(2, -1)); // -1

lastIndexOf(1, 4)
1이 있는지 없는지 찾아봐라. 어디부터?
인덱스 번호 4번부터.
오른쪽에서 왼쪽으로.

즉, 1231”2”31, 2부터 왼쪽으로 1을 찾습니다.
그럼 그 1의 인덱스 번호는 3입니다.

코딩 시간

요구 사항
- indexOf()와 lastIndexOf()를 통합하여 발생 가능한 케이스를 기술하고 이에 맞는 코드를 작성하세요.

목적
- 코드 작성의 사고

작성 예
- 두번째 파라미터에 음수를 작성하면 -1을 반환한다.
- var value = “1234512345”
  console.log(value.lastIndexOf(3, -2)); // -1

LHJ

9-6. String 오브젝트 / 인덱스로 문자열 처리

9-6. String 오브젝트 / 인덱스로 문자열 처리

charAt()

indexOf()

lastIndexOf()

코딩 시간

Related Posts