[JavaScript]문자열 비교하는 방법

문자열 비교하는 방법

이번 포스팅은 JavaScript에서 문자열을 비교할 수 있는 몇 가지 방법을 소개합니다.

---

방법 1. 동치 연산자(===)

가장 잘 알려져 있고 대부분 많이 사용하는 방법인 동치 연산자(===)를 사용하여 두 문자열을 비교할 수 있습니다.

const str1 = 'Hello';
const str2 = 'Hello';

console.log(str1 === 'Hello'); // true
console.log(str1 === str2);    // true

동등 연산자(==)는 두 피연산자의 값이 동일한 경우 true를 반환하며, 동치 연산자(===)는 두 피연산자의 값과 타입이 동일한 경우 true를 반환합니다.

 

다음 예제는 문자열 '1'이랑 숫자 1을 비교합니다.

const strValue = '1'; // string타입
const numValue = 1;   // number타입

console.log(strValue == numValue);  // true
console.log(strValue === numValue); // false

동등 연산자(==)는 두 피연산자의 값만 비교하므로 true를 반환하였으며, 동치 연산자(===)는 두 피연산자의 값과 타입을 비교하므로 false를 반환합니다.

---

동치 연산자로 문자열 비교 시 주의사항

동치 연산자로 문자열 비교 시 한 가지 주의사항이 있습니다. 일반적으로 문자열 변수를 생성하는 경우 다음과 같이 문자열 리터럴 방식을 사용합니다.

 

문자열 리터럴 방식으로 문자열 변수를 생성하면, 데이터 타입은 string입니다.

const strValue = 'Hello';

console.log(typeof(strValue)); // string

 

하지만, 다음과 같이 new 키워드를 사용하여 문자열 변수를 생성하면, 데이터 타입은 object입니다.

const strValue = new String('Hello');

console.log(typeof(strValue)); // object

 

따라서, 리터럴 방식으로 생성한 문자열 변수와 new 키워드를 사용하여 생성한 문자열 변수를 동치 연산자(===)로 비교하면, 두 변수의 데이터 타입이 다르므로 false를 반환합니다.

const str1 = new String('Hello');
const str2 = 'Hello';

console.log(str1 == str2);  // true  
console.log(str1 === str2); // false

 

동치 연산자(===)를 사용하여 리터럴 방식으로 생성한 문자열 변수와 new 키워드를 사용하여 생성한 문자열 변수의 문자열 값만 비교하려면, valueOf() 메서드를 사용합니다.

const str1 = new String('Hello');
const str2 = 'Hello';

console.log(typeof(str1.valueOf()));  // string
console.log(str1.valueOf() === str2); // true

---

방법 2. 대소문자 구분 없이 비교

JavaScript뿐만 아니라 대부분의 프로그래밍 언어는 문자열의 대소문자를 구분합니다.

 

따라서, 다음과 같이 대소문자가 다른 두 문자열을 동치 연산자로 비교하면, false를 반환합니다.

const str1 = 'heLLo';
const str2 = 'Hello';

console.log(str1 === str2); // false

 

대소문자 구분 없이 문자열을 비교하고 싶은 경우 toUpperCase() 또는 toLowerCase() 메서드를 사용하여 대문자 또는 소문자로 변환 후 문자열을 비교합니다.

const str1 = 'heLLo';
const str2 = 'Hello';

// 두 문자열을 대문자로 변환 후 비교
console.log(str1.toUpperCase() === str2.toUpperCase()); // true

// 두 문자열을 소문자로 변환 후 비교
console.log(str1.toLowerCase() === str2.toLowerCase()); // true

---

방법 3. includes 메서드

두 문자열을 비교하는 방법으로 권장하는 방법은 아니지만, 문자열의 includes() 메서드를 사용하여 두 문자열을 비교할 수 있습니다.

 

includes() 메서드는 특정 문자열이 존재하면 true를 반환하고 그렇지 않으면 false를 반환합니다.

 

다음 예제는 includes() 메서드를 사용하여 두 문자열을 비교합니다.

const str1 = 'hello';
const str2 = 'hello';
const str3 = 'HeLLo';

// 일반적인 사용 방법
console.log(str1.includes(str2)); // true

// 대소문자 구분없이 비교하는 방법
console.log(str1.toUpperCase().includes(str3.toUpperCase())); // true
console.log(str1.toLowerCase().includes(str3.toLowerCase())); // true

---

방법 4. localeCompare 메서드

마지막 방법으로 localeCompare() 메서드를 사용하여 두 문자열을 비교할 수 있습니다.

 

localeCompare() 메서드는 현재 사용 중인 웹 브라우저에 설정된 언어를 기반으로 문자열을 비교하며, -1, 0, 1을 반환합니다.

 

-1을 반환하는 경우

- localeCompare() 메서드를 호출하는 문자열이 매개변수로 전달된 문자열보다 사전 순으로 앞인 경우

 

0을 반환하는 경우

- 두 문자열이 동일한 경우

 

1을 반환하는 경우

- localeCompare() 메서드를 호출하는 문자열이 매개변수로 전달된 문자열보다 사전 순으로 뒤인 경우

 

다음 예제는 localeCompare() 메서드를 사용하여 두 문자열을 비교합니다.

// 일반적인 사용 방법
console.log('A'.localeCompare('B')); // -1
console.log('A'.localeCompare('A')); // 0
console.log('B'.localeCompare('A')); // 1

// 대소문자 구분없이 비교하는 방법
console.log('a'.toLowerCase().localeCompare('A'.toLowerCase())); // 0
console.log('a'.toUpperCase().localeCompare('A'.toUpperCase())); // 0