문자열이 특정 문자나 문자열로 시작하는지 확인해야 할 때, 전통적으로 indexOf() 메서드를 사용해 왔습니다. 하지만 고급 애플리케이션 개발 환경에서는 이 방식이 다소 구식으로 여겨집니다. 그래서 ES6(ECMAScript 2015)에서는 이러한 작업을 더 직관적이고 효율적으로 수행할 수 있는 startsWith() 메서드를 새롭게 제공합니다.
기존 방식: indexOf() 메서드
먼저 indexOf() 메서드를 사용하여 문자열이 특정 문자로 시작하는지 확인하는 전통적인 방법을 살펴보겠습니다.
예제
<html>
<body>
<script>
var text = 'Tutorialspoint';
document.write(text.indexOf('T') === 0);
</script>
</body>
</html>출력 결과
true
위 예제에서는 indexOf('T') === 0 조건을 통해 문자열의 첫 번째 위치(인덱스 0)에 해당 문자가 있는지 비교합니다. 결과가 true이면 해당 문자로 시작한다는 의미입니다.
현대적인 방식: startsWith() 메서드
ES6에서 도입된 startsWith() 메서드를 사용하면 별도의 비교 연산 없이 한 줄로 문자열의 시작 여부를 확인할 수 있습니다.
예제
<html>
<body>
<script>
var text = 'Tutorialspoint';
document.write(text.startsWith('Tu'));
</script>
</body>
</html>출력 결과
true
startsWith() 메서드는 문자열이 지정된 문자열로 시작하면 true, 그렇지 않으면 false를 반환합니다. 코드가 훨씬 간결하고 의미도 명확해집니다.
검색 시작 위치(인덱스) 지정하기
startsWith() 메서드는 두 번째 인수로 인덱스 값을 전달할 수 있습니다. 이를 활용하면 문자열의 특정 위치부터 검색을 시작하여, 해당 위치에 특정 문자열이 있는지 확인할 수 있습니다.
예제
<html>
<body>
<script>
var text = 'Tutorialspoint';
document.write(text.startsWith('Tut', 0));
document.write("</br>");
document.write(text.startsWith('ut', 1));
document.write("</br>");
document.write(text.startsWith('t', 2));
</script>
</body>
</html>출력 결과
true true true
위 예제에서는 세 가지 경우를 확인합니다.
text.startsWith('Tut', 0): 인덱스 0부터 'Tut'로 시작하는지 확인 → truetext.startsWith('ut', 1): 인덱스 1부터 'ut'로 시작하는지 확인 → truetext.startsWith('t', 2): 인덱스 2부터 't'로 시작하는지 확인 → true
정리
startsWith() 메서드는 기존의 indexOf() === 0 패턴을 대체하는 현대적인 JavaScript 문법입니다. 가독성이 뛰어나고, 시작 위치를 지정할 수 있어 다양한 문자열 검증 작업에 유용하게 활용됩니다. 최신 브라우저 환경이라면 문자열 시작 여부를 확인할 때 startsWith()를 사용하는 것이 권장됩니다.