[JavaScript] 자바스크립트 문자열 비교하는 다양한 방법 총정리
자바스크립트에서 문자열을 비교하는 방법은 상황에 따라서 다르게 적용해야 합니다. 이번 포스팅에서는 자바스크립트에서 문자열을 비교하는 방법을 상황별로 알아보도록 하겠습니다.
문자열 비교 연산자
문자열 동등 비교 == , ===
See the Pen 동등비교 by wjdxo513 (@wjdxo513) on CodePen.
자바스크립트의 문자열이 같은지 비교할 때는 ==과, === 연산자를 사용합니다. 비교하는 두 대상의 값이 같으면 true를 그렇지 않으면 false를 반환합니다. 여기서 ==과 ===의 차이점은 값의 타입을 확인하는가에 대한 차이가 있습니다. ==은 두 값을 같은 타입으로 변환하여 비교를 수행하는 반면, ===은 비교 할 두 대상의 타입값이 다르면 false를 출력합니다.
- ==는 값만을 비교하며, (형 먼저 변환을 수행한 뒤 비교 합니다)
- ===는 값과 형(type)을 비교합니다.
※ 자바스크립트는 문자열이 자바처럼 객체가 아니기 때문에 equals 함수는 존재하지 않습니다.
문자열 부정 비교 != , !==
See the Pen 부정비교 by wjdxo513 (@wjdxo513) on CodePen.
자바스크립트의 문자열 부정 비교는 !=과, !== 연산자를 사용합니다. 위에서 살펴봤던 동등비교와는 반대로 두 대상의 값이 달라야 true를 반환하고, 같으면 false를 반환합니다. 여기서도 동일하게 !=은 값만을 비교하는데 비해 !==은 타입까지 확인합니다. 그래서 첫 번째 비교에서는 값이 같기에 false가 출력되고 두 번째 비교에서는 값은 같아도, 타입이 다르기 때문에 true가 출력됩니다.
문자열 대소 비교 < , >
See the Pen 대소비교 by wjdxo513 (@wjdxo513) on CodePen.
숫자가 아닌 문자열에도 비교연산자를 사용하실 수 있습니다. 이 경우 아스키코드값으로 문자열의 크기를 결정합니다. "apple"의 가장 첫 번째 문자인 'a'보다 "banana"의 첫번째 문자인 'b'의 아스키코드값이 더 높기 때문에 banana가 더 크다고 인식하는것입니다. 만약 첫번째 문자의 아스키코드값이 같다면 두 번째 아스키코드값으로 비교합니다. (같은 원리로 <= 연산자나 >= 연산자도 사용이 가능은 합니다. 별 의미는 없겠지만 말이죠)
자주 사용하는 문자열 비교 함수
indexOf() - 특정 문자열 포함여부 확인
See the Pen indexOf by wjdxo513 (@wjdxo513) on CodePen.
특정 문자열이 포함되어 있는지 확인되어 있는지 확인할 수 있는 indexOf() 함수를 많이 사용합니다. 찾으려고 하는 문자열이 존재하면 0보다 큰 index값을 반환하고, 문자열이 존재하지 않는다면 -1을 리턴합니다.
startsWith, endsWith - 특정 문자열로 시작하는지, 끝나는지 확인
See the Pen startsWith, endsWith by wjdxo513 (@wjdxo513) on CodePen.
문자열이 특정 문자열로 시작하는지, 끝나는지 체크하는 startWith(), endsWith() 함수도 많이 사용합니다. startWith() 함수는 특정 문자열로 시작하면 true, 그렇지 않다면 false를 반환하고 endsWith() 함수는 특정 문자열로 끝나면 true, 그렇지 않다면 false를 반환합니다.
localeCompare - 문자열 사전 비교
See the Pen localeCompare by wjdxo513 (@wjdxo513) on CodePen.
localeCompare 메서드는 문자열을 사전식으로 비교합니다. 이 메서드는 언어를 고려하여 비교하기 때문에 언어에 따라 다르게 동작할 수 있습니다.
정규표현식을 활용한 문자열 비교
See the Pen 정규표현식 문자열 비교 by wjdxo513 (@wjdxo513) on CodePen.
정규표현식을 활용해서 특정 문자열을 검사할 수도 있습니다. 첫 번째 예제는 문자열에 p가 포함되어 있으면 true를 반환하여 indexOf() 메서드처럼 사용하였고, 두 번째 예제는 휴대폰 번호 형식이면 true를 반환합니다.