[javascript] 자바스크립트 문자열내의 문자열 찾기 (substring)

참고: https://ultimatecourses.com/blog/substring-in-string-javascript

이 포스트에서는 JavaScript를 사용해 문자열 내의 문자열(substring)을 찾는 방법을 알아보겠습니다.

문자열에서 substring 찾기

암호 단어 'bacon'이 있고 다른 문자열 내에 암호 단어가 포함되어있는지 확인해야하는 상황을 가정해보겠습니다.

여기서는 findme 변수에 체크하려는 긴 문자열을 넣어 확인해보겠습니다.

const passcode = 'bacon';
const findme = `8sowl0xebaconxjwo98w`;

딱 코드를 보면 findme에 'bacon'이 포함되어 있는지 알 수가 있지만 자바스크립트로는 정답을 어떻게 알 수 있을까요?

JavaScript ES6에는 새로운 기능인 String.prototype.include() 메소드가 추가되었으며 이 메소드는 substring이 발견되었는지 여부에 따라 boolean 값을 리턴합니다.

const found = findme.includes(passcode);
// true

includes() 메소드 사용은 정말 좋은 방법이고 바로 boolean 값을 알려줍니다. 하지만 이를 항상 사용할 수 있는 것은 아닙니다.

includes() 메소드를 사용할 수 없는 경우 String.prototype.indexOf() 메소드를 사용할 수 있습니다. 이는 일치하는 문자열을 찾은 경우 문자열의 시작 인덱스를 리턴하는 메소드입니다. 일치하지 않는 경우 -1을 리턴하므로 자연스럽게 안전 검사를 할 수 있습니다.

const index = findme.indexOf(passcode);

console.log(index !== -1); // true

-1이라는 상수 검사는 보기 좋은 코드는 아닙니다 어찌보면 구식일 수도 있습니다. 따라서 적절한 곳에 String.prototype.includes() 메소드를 사용하는 것을 권장합니다.

여기서 비트연산자 ~을 사용하여 동일한 구문을 정리할 수 있습니다.

const index = !!~findme.indexOf(passcode);

console.log(index); // true

!!~ 연산은 결과적으로 인덱스를 boolean 값으로 변환해줍니다. 이는 indexOf() 메소드를 사용 시 한줄로 true나 false를 리턴하도록 해줍니다.

정리

이 포스트에서는 새로운 ES6의 String.prototype.includes() 메소드 사용 방법을 알아봤고 ES6 이전에 substring을 찾기 위해 사용되던 String.prototype.indexOf() 메소드와 비교해봤습니다.

둘 사이의 차이점은 includes() 메소드는 boolean 값을 반환하고 indexOf() 메소드는 숫자인덱스를 반환한다는 점 입니다.

substring의 인덱스를 알아내야하는 경우가 아니라면 includes() 메소드를 사용하는 것이 좋습니다.

관련 글

자바스크립트 문자열 뒤집기