JavaScript에서 대소문자를 구분하지 않고 문자열 비교하기

JavaScript의 문자열 동등성 비교는 대소문자를 구분하므로 "Hello" === "hello"의 결과는 false입니다. 간단히 대소문자를 무시하고 같은지 확인하려면 두 문자열에 toLowerCase()를 적용한 뒤 결과를 비교하세요. 언어별 정렬 규칙을 반영해야 한다면 localeCompare()를 사용하고, 완전한 문자열 두 개의 비교가 아니라 특정 패턴을 찾는 작업이라면 정규 표현식을 사용하세요.

간단한 비교를 위해 두 문자열을 같은 대소문자로 변환하기

엄격한 동등성 비교를 하기 전에 두 값을 같은 방식으로 변환하세요. 흔히 toLowerCase()를 사용하며, 같은 방식으로 toUpperCase()를 사용할 수도 있지만 어느 한쪽이 항상 더 낫다고 할 수는 없습니다. 대소문자 변환은 일반적인 식별자나 사용자 입력을 비교할 때 편리하지만, 모든 유니코드 대소문자 규칙을 처리하는 보편적인 케이스 폴딩은 아닙니다. 특정 문자를 서로 같다고 취급해야 하거나 언어별 규칙을 따라야 한다면 필요한 동작을 명시적으로 선택하고 테스트하세요.

다음 예제는 각 값을 소문자로 변환한 뒤 비교합니다.

const first = "Hello";
const second = "hello";
const equalIgnoringCase = first.toLowerCase() === second.toLowerCase();
console.log(equalIgnoringCase);

true

두 값을 비교하기 전에 정규화하므로 단순한 동등성 확인에 적합합니다. 대소문자 변환은 변환된 문자열을 만들 뿐 원래 값을 바꾸지는 않습니다. 언어에 민감한 동등성이나 정렬이 필요하다면 localeCompare()를 사용하고 옵션을 신중히 선택하세요.

언어별 비교 규칙이 중요할 때 localeCompare() 사용하기

localeCompare()는 문자열을 언어별 정렬 규칙에 따라 비교해 숫자를 반환합니다. 선택한 옵션에 따라 두 문자열이 동등하게 취급되면 0을 반환하고, 정렬 순서에 따라 음수 또는 양수를 반환합니다. 동등한지 확인하려면 결과가 0인지 검사하세요.

sensitivity 옵션은 어떤 차이를 구분할지 정합니다. "accent"를 사용하면 대소문자 차이는 무시하지만 악센트 차이는 유지합니다. "base"에서는 대소문자와 악센트가 모두 무시될 수 있습니다. 아래 예제는 "café"와 "CAFÉ"를 "accent"로 비교하므로 두 값은 동등하게 취급됩니다. "base"를 사용하면 악센트가 없는 철자도 동등하게 취급될 수 있습니다. 정확한 정렬 동작은 로캘에 따라 다르므로 특정 언어의 정렬이 필요하면 로캘을 지정하고 사용자에게 중요한 문자열을 확인하세요.

const result = "café".localeCompare("CAFÉ", undefined, { sensitivity: "accent" });
console.log(result === 0);

true

언어별 정렬 규칙에 따라 동등성을 판단해야 할 때 이 방법을 사용하세요. 로캘별 정렬이 필요 없는 일반적인 대소문자 무시 동등성 비교라면 두 문자열을 변환하는 편이 더 간단합니다.

패턴 매칭이 필요할 때 정규 표현식 사용하기

정규 표현식은 특정 패턴에 맞는 텍스트를 찾을 때 유용합니다. i 플래그를 지정하면 대소문자를 구분하지 않고 매칭하며, test()는 패턴이 문자열 어디에든 일치하는지 알려줍니다. 이는 일반적인 문자열 동등성 비교와 다릅니다. 양쪽에 앵커를 지정하지 않으면 입력의 일부만 일치해도 결과가 참일 수 있습니다. 사용자 입력 문자열과 정확히 일치시키려면 정규 표현식 메타문자를 이스케이프하고 양쪽 끝에 앵커를 지정하세요. JavaScript에서 $는 마지막 줄 종결자 앞에도 일치할 수 있으므로, 아래 예제는 실제 문자열 끝까지 일치하도록 끝 확인 어설션을 덧붙입니다. RegExp를 만들기 전에 입력 문자열의 메타문자도 이스케이프합니다.

const userText = "JavaScript";
const escapedText = userText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const exactPattern = new RegExp("^" + escapedText + "$(?![\\s\\S])", "i");
console.log(exactPattern.test("javascript"));

true

두 문자열을 비교하는 것이 목적이라면 대소문자 변환이나 localeCompare()가 대체로 더 명확합니다. test()에서 정규 표현식을 재사용할 때는 g 플래그를 추가하지 마세요. 의도적으로 lastIndex를 관리하지 않으면 전역 검색 상태가 호출 사이에 바뀔 수 있습니다. 요약하면 일반적인 동등성 비교에는 대소문자 변환을, 언어별 정렬 규칙이 동등성에 영향을 주는 경우에는 localeCompare()를, 입력이 패턴과 일치하는지 확인할 때는 정규 표현식을 사용하세요.