자바스크립트에서 문자열(string) 안에 포함된 부분 문자열(substring)을 확인하는 방법은 크게 두 가지가 있습니다. 하나는 indexOf() 메서드를 사용하는 것이고, 다른 하나는 ES6의 includes() 메서드를 사용하는 것입니다. 지금부터 각각의 방법을 자세히 살펴보겠습니다.
indexOf()
문법
indexOf(str);
이 메서드는 찾고자 하는 부분 문자열의 인덱스(index)를 확인합니다. 인덱스가 존재한다면 해당 부분 문자열이 문자열 안에 있다는 의미이므로 결과로 true가 출력되고, 존재하지 않으면 false가 출력됩니다. 이 메서드는 대소문자를 구분한다는 점에 주의해야 합니다.
예제
<html>
<body>
<script>
var company = "Tutorix";
document.write(company.indexOf('Tutor') !== -1);
document.write("</br>");
document.write(company.indexOf('tutor') !== -1);
</script>
</body>
</html>
실행 결과
true false
위 예제에서 'Tutor'는 원본 문자열에 실제로 존재하므로 true가 반환되지만, 'tutor'는 첫 글자의 대소문자가 일치하지 않아 false가 반환됩니다.
includes()
문법
includes(str);
indexOf() 메서드와 달리, 이 메서드는 전달한 문자열이 원본 문자열에 존재하는지 여부만 직접 판별합니다. 존재하면 true, 존재하지 않으면 false가 출력됩니다. 이 메서드 역시 대소문자를 구분하므로, 정확한 문자열을 인수로 전달해야 합니다.
예제
<html>
<body>
<script>
var company = "tutorialspoint";
document.write(company.includes('Tutor'));
document.write("</br>");
document.write(company.includes('point'));
</script>
</body>
</html>
실행 결과
false true
'Tutor'는 대문자 T 때문에 대소문자가 일치하지 않아 false가 반환되고, 'point'는 정확히 일치하므로 true가 반환됩니다.
두 메서드의 차이점
indexOf()는 부분 문자열의 시작 위치(인덱스)를 숫자로 반환하기 때문에 위치 정보까지 필요할 때 유용합니다. 반면 includes()는 존재 여부만 불리언(Boolean) 값으로 판별하므로, 단순히 포함 여부를 확인할 때 코드가 더 직관적입니다. 참고로 includes()는 ES6(ES2015)에서 새롭게 도입된 메서드로, Internet Explorer 같은 일부 구형 브라우저에서는 지원되지 않습니다. 따라서 브라우저 호환성이 중요한 프로젝트에서는 indexOf()를 사용하는 것이 더 안전합니다.