자바스크립트에서 다양한 문자열 비교 방법 5가지를 소개합니다. 동등 연산자로 문자열이 동등한지 비교하거나, 문자열의 크기 비교할 수 있습니다. 또는 문자열에 어떤 문자열이 포함되어있는지 확인하거나, 어떤 문자열로 시작하거나 끝나는지 확인할 수도 있습니다.
1. 동등 연산자(==, ===)로 문자열 비교
두개의 문자열이 같은지 다른지 확인할 때, 동등 연산자(==, ===)를 사용할 수 있습니다. 아래 예제와 같이 두개 문자열이 같으면 true를 리턴하고 다르면 false를 리턴합니다.
const str1 = 'hello';
const str2 = 'hello';
const str3 = 'world';
console.log(str1 === str2); // true
console.log(str1 === str3); // false
console.log(str2 === str3); // false
console.log(str2 !== str3); // true
console.log(str1 == str2); // true
console.log(str1 == str3); // false
console.log(str2 == str3); // false
console.log(str2 != str3); // true
1.1 동등 연산자, ==와 ===의 차이점
위의 예제에서 ==와 ===의 결과가 같아서 차이점을 알 수 없었습니다.
==
는 Equality를 비교하고, ===
는 Identity를 비교하는데요. 아래와 같은 차이점이 있습니다.
- ==는 비교하는 객체의 타입이 달라도, 형변환하여 값이 같으면 true를 리턴
- ===는 객체 타입이 같고 값이 같을 때 true 리턴
아래 예제를 보시면 차이점을 확인할 수 있습니다. string과 Number 타입의 객체를 비교하는데 ==
는 true, ===
는 false를 리턴하고 있습니다.
==
의 경우, Number 타입을 string 타입으로 변환하여 비교하면 두 객체의 값이 같기 때문에 true가 리턴되었습니다.
하지만, ===
의 경우, 두 객체의 타입이 다르기 때문에 false가 리턴되었습니다.
const str = '123';
const num = 123;
console.log(str === num); // false
console.log(str == num); // true
엄격하게 비교를 하려면 ===
를 사용하여 비교하는 것이 좋습니다.
developer.mozilla.org에 다양한 예제가 있으니 이 문서도 확인해보시면 좋을 것 같습니다.
2. 문자열 크기 비교 (>, < 연산자)
문자열의 크기 비교는 다른 언어와 동일하게 ASCII 값을 비교하여 크기를 결정합니다. 알파벳 순서가 앞에 있을 수록 더 크기가 작으며, 문자열의 앞에서 뒤의 순서대로 비교를 합니다. 문자열이 길어도 같은 위치(Index)의 문자의 알파벳 순서가 작다면 문자열의 크기가 작다고 계산됩니다. 그리고 문자열 길이가 짧아서 같은 Index에 문자가 없으면 더 작은 문자열로 계산됩니다.
const str1 = 'abcd';
const str2 = 'ab';
const str3 = 'abd';
const str4 = 'aba';
const str5 = 'bbcd';
console.log(str1 > str2); // true
console.log(str1 < str3); // true
console.log(str1 > str4); // true
console.log(str1 < str5); // true
3. 문자열에 어떤 문자열이 포함되어있는지 확인 : String.indexOf()
String.indexOf()를 이용하여 문자열에 어떤 문자열이 포함되어있는지 확인할 수 있습니다. 아래와 같이 인자로 전달된 문자열이 문자열 안에 존재한다면 그 문자열이 위치한 Index를 리턴합니다. 존재하지 않는다면, -1을 리턴합니다. 따라서, -1이 리턴되는지 여부로 문자열이 포함되어있는지 확인할 수 있습니다.
const str = 'Hello, World, Javascript';
if (str.indexOf('Hello') != -1) {
console.log("str contains 'Hello'");
} else {
console.log("str doesn't contain 'Hello'");
}
Output:
str contains 'Hello'
4. 문자열에 어떤 문자열이 포함되어있는지 확인 : String.includes()
String.includes()를 이용하여 문자열에 어떤 문자열이 포함되어있는지 확인할 수 있습니다. 아래와 같이 인자로 전달된 문자열이 문자열 안에 존재한다면 true가 리턴되며, 존재하지 않는다면 false를 리턴합니다.
const str = 'Hello, World, Javascript';
if (str.includes('Hello')) {
console.log("str contains 'Hello'");
} else {
console.log("str doesn't contain 'Hello'");
}
Output:
str contains 'Hello'
5. 문자열이 어떤 문자열로 시작하거나 끝나는지 확인 : String.startsWith(), String.endsWith()
startsWith()
는 문자열이 인자로 전달된 문자열로 시작할 때 true를 리턴합니다. 그리고 endsWith()
도 비슷하게, 문자열이 인자로 전달된 문자열로 끝날 때 true를 리턴합니다.
const str = 'Hello, World, Javascript';
console.log(str.startsWith('Hello')); // true
console.log(str.startsWith('World')); // false
console.log(str.endsWith('Javascript')); // true
console.log(str.startsWith('World')); // false
Related Posts
- JavaScript - slice()로 배열 자르기, 나누기
- Node.js - 파일에 특정 문자열이 포함되어있는지 확인
- Node.js - 특정 패턴과 일치하는 모든 파일 찾기
- Node.js - 디렉토리의 파일 리스트 가져오기
- Node.js - 파일, 디렉토리(하위 파일) 삭제
- Node.js - 파일 이름 변경
- JavaScript - switch 조건문
- JavaScript - 배열의 특정 요소 찾기, Index 찾기
- JavaScript - 특정 값으로 배열 채우기, Array.fill()
- JavaScript - null, undefined 체크 방법
- JavaScript - 배열을 객체로 변환, 4가지 방법
- JavaScript - 이번 달(특정 달)의 1일, 마지막 일 구하기
- JavaScript - 배열의 특정 요소 삭제 방법
- JavaScript - 배열에 특정 값이 포함되어있는지 확인
- JavaScript - Date에 시간(일/시/분/초) 더하기
- JavaScript - 변수가 배열인지 확인, 3가지 방법
- JavaScript - 변수가 문자열인지 확인
- JavaScript - 문자열이 숫자인지 확인
- JavaScript - Map의 key를 배열로 변환
- JavaScript - Map의 value를 배열로 변환
- JavaScript - Map 요소 삭제 방법