자바스크립트 문자열 indexOf() 함수 – 문자열에서 문자의 위치 찾기

`String.prototype.indexOf()` 사용법

자바스크립트 문자열 indexOf() 함수는
문자열에서 인수로 전달된 문자를 찾아 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환하는 함수입니다.
인수로 전달된 문자열를 찾을 수 없다면 -1을 반환합니다. 이 함수는 문자열에서 문자의 위치를 찾거나, 존재하는지 확인할 때 유용합니다.

배열에서는 Array.prototype.indexOf()가 같은 역할을 합니다.

JavaScript

const greeting = "환영합니다. 코딩에브리바디입니다.";

/*
 * 주의하세요!
 * 문자열에서 인덱스는 0부터 시작합니다.
 * 첫 번째 문자열의 인덱스는 0이고, 두 번째 문자열의 인덱스는 1입니다.
*/

// 문자열 greeting에서 문자열 "환영합니다."를 찾아
// 첫 번째로 검색된(등장한) 문자열("환")의 인덱스를 반환합니다.
const hello = greeting.indexOf("환영합니다.");
console.log(hello); // 출력: 0;

// 문자열 greeting에서 인수로 전달된 문자열 "반갑습니다."를 찾을 수 없으므로
// -1을 반환합니다.
const niceTomeetYou = greeting.indexOf("반갑습니다.");
console.log(niceTomeetYou); // 출력: -1;

const coding = greeting.indexOf("코딩", 5);
// 두 번째 인수는 검색을 시작할 인덱스입니다.
// 이 인수는 옵션으로, 생략하면 처음(0)부터 검색합니다.
// 인덱스는 여전히 맨 왼쪽부터 오른쪽으로 카운트됩니다.
// 인수의 값이 5이므로, 6번째부터 검색했을 때 문자 "코딩"은 검색이 되고,
// 맨 왼쪽(인덱스 0)부터 검색된 문자열 "코"의 인덱스는 7입니다.

console.log(coding); // 출력: 7;

indexOf() 함수의 형식은 다음과 같습니다.

구문

str: indexOf() 함수를 적용할 대상 문자열입니다.

매개변수

문자열 indexOf() 함수의 매개변수 설명
`searchValue`	필수. 찾을 문자열입니다. 대소문자를 구분합니다. 아무 값도 주어지지 않으면 문자열 `"undefined"`를 찾으려는 문자열로 사용합니다.
`fromIndex`	옵션. 검색을 시작할 `0` 기반의 인덱스입니다. 생략하면 기본값으로 `0`이 사용됩니다. 음수 값을 사용할 수 있으며, 이 경우 배열의 끝에서부터 역으로 카운트됩니다. 그러나, 여전히 왼쪽에서 오른쪽으로 검색합니다. `indexOf()` 함수를 적용할 대상 문자열의 길이(`arr.length`)보다 크거나 같으면 `-1`을 반환합니다.

자바스크립트 length 속성의 이해와 사용 방법

반환 값

indexOf() 함수를 적용할 대상 문자열에서 인수로 전달된 문자열를 찾아 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환합니다.
인수로 전달된 문자열를 찾을 수 없다면 -1을 반환합니다.

매개변수와 반환 값 예시

JavaScript

/*
 * 인수로 전달된 문자열이 indexOf() 함수를 적용할 문자열에서 중복으로 있다면,
 * 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환합니다.
*/
const str = "색상은 빨강, 파랑, 파랑, 노랑입니다.";

// 문자열 str에서 문자열 "파"를 찾아 첫 번째로 검색된(등장한) 문자열의 인덱스를 반환합니다.
const val_1 = str.indexOf("파");

// 문자열 str에서 찾을 문자열 "파"는 두 개가 있습니다.
// 인덱스 8과 12에 있습니다.
// 하지만, 첫 번째로 검색된 찾을 문자열의 인덱스인 8을 반환합니다.
console.log(val_1); // 출력: 8;

// 문자열 str에서 인수로 전달된 문자열 "녹"을 찾을 수 없으므로 -1일 반환합니다.
const val_2 = str.indexOf("녹");
console.log(val_2); // 출력: -1;

const val_3 = str.indexOf("은", 1);
// 두 번째 인수는 검색을 시작할 인덱스입니다.
// 이 인수는 옵션으로, 생략하면 처음(0)부터 검색합니다.
// 인수의 값이 1이므로, 두 번째 문자열부터 검색했을 때 찾을 문자열 "은"은 검색이 되고,
// 맨 왼쪽(인덱스 0)부터 검색된 문자열 "은"의 인덱스는 2입니다.

console.log(val_3); // 출력: 2;

//////////////////////////////////////////
const undefinedStr = "값을 할당하지 않은 변수의 값을 undefined라 합니다.";
const val_4 = undefinedStr.indexOf();

// 첫 번째 매개변수에 아무 값도 주어지지 않으면
// 문자열 "undefined"를 찾으려는 문자열로 사용합니다.
// "undefined"의 인덱스인 18을 반환합니다.
console.log(val_4); // 출력: 18;

주의할 점

indexOf() 함수로 문자열을 검색할 때에는 대소문자를 구분합니다.

JavaScript

const redString = "red";
const searchRed = redString.indexOf("Red");

// 대문자 "R"과 소문자 "r"을 구분합니다.
console.log(searchRed); // 출력: -1;

이 함수의 관련 함수를 참조하세요.

`indexOf()` 함수의 다양한 활용 사례

문자열과 관련된 프로토타입 메서드(String 인스턴스)인 indexOf() 함수에 관련된 다양한 활용 사례입니다.

부분 문자열의 존재 여부 확인

indexOf() 함수를 사용하여 문자열 내에서 특정 부분 문자열이 존재하는지 확인할 수 있습니다. 반환값이 -1이 아닌 경우, 부분 문자열이 존재하는 것입니다.

JavaScript

const str = "Hello, world!";

if (str.indexOf("world") !== -1) {
    console.log("부분 문자열이 존재합니다.");
} else {
    console.log("부분 문자열이 존재하지 않습니다.");
}

// 출력: "부분 문자열이 존재합니다."

ECMAScript 6(ES6)에서 도입된 includes() 함수는 문자열에서 주어진 문자열이 포함되어 있으면 true를 그렇지 않으면 false를 반환하는 함수입니다. 이 함수는 2015년에 공식적으로 발표되었으며, 인터넷 익스플로러(Internet Explorer) 브라우저에서 지원하지 않는다는 불편함이 있습니다. 인터넷 익스플로러 호환성을 고려할 필요가 없다면 부분 문자열의 존재 여부 확인은 indexOf() 함수 보다는 includes() 함수가 더 직관적이고 활용하기 편리합니다.

자바스크립트 문자열 includes() 함수

대소문자 구분 없는 문자열 검색

indexOf() 함수는 검색하는 문자열의 대소문자를 구분하지만, toLowerCase() 함수를 사용하여 대소문자를 무시하고 문자열 내에서 부분 문자열을 검색할 수 있습니다.

toLowerCase() 함수는
문자열 객체의 메서드 중 하나로, 문자열을 모두 소문자로 변환하는 함수입니다.

자바스크립트 toLowerCase() 함수

JavaScript

const str = "Hello, World!";
const searchStr = "world";

if (str.toLowerCase().indexOf(searchStr.toLowerCase()) !== -1) {
    console.log("부분 문자열이 대소문자와 관계없이 존재합니다.");
}

// 출력: "부분 문자열이 대소문자와 관계없이 존재합니다."

특정 문자열의 반복 횟수

JavaScript

// 주어진 문자열
const str = "Hello, world! Hello, universe!";

// 찾고자 하는 부분 문자열
const searchStr = "Hello";

let count = 0;

// 문자열에서 초기 발생 위치를 찾음
let idx = str.indexOf(searchStr);

// 발생 위치를 찾을 때까지 반복
while (idx !== -1) {
    // 발생 횟수 추가
    count++;

    // 다음 발생 위치를 찾기 위해, 이전 발생 위치 이후에서 다시 검색
    idx = str.indexOf(searchStr, idx + 1);
}

// 찾는 문자열의 반복 횟수 출력
console.log("찾는 문자열의 반복 횟수:", count);
// 출력: 찾는 문자열의 반복 횟수: 2

자바스크립트 while 문 - 조건식이 참인 동안 반복

위 코드에서는 indexOf() 함수를 사용하여 "Hello" 문자열의 첫 번째 발생 위치를 찾은 후, 이 위치 이후에서 다시 indexOf()를 호출하여 다음 발생 위치를 찾습니다. 이러한 과정을 반복하고 발생 횟수(count)를 하나씩 추가하고 그 값을 확인하여 "Hello" 문자열이 나타나는 횟수를 계산합니다.