JavaScript - 문자열 비교 방법, 5가지

자바스크립트에서 다양한 문자열 비교 방법 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