[JS] localeCompare

🔍 localeCompare() 란?

💡 문자열을 비교해서 정렬 기준을 정할 때 사용하는 메서드이다.
특히, 다국어 환경이나 사전순 정렬이 필요한 경우 매우 유용하다.

✨ localeCompare() 메서드 파헤치기

• 사용 문법

referenceString.localeCompare(compareString, [locales], [options])

• localeCompare() 메서드는 두 개의 문자열을 비교하여 다음과 같은 세 가지 값 중 하나를 반환함

  반환값	의미
  음수	참조 문자열(메서드를 호출한 문자열)이 비교 문자열보다 앞에 올 경우
  0	두 문자열이 동일한 경우
  양수	참조 문자열이 비교 문자열보다 뒤에 올 경우

• referenceString

  • 비교 기준이 되는 문자열(메서드를 호출하는 문자열)

• compareString

  • referenceString과 비교할 문자열

• locales(선택 사항)

  • 문자열 비교에 사용할 locale(언어 및 국가)을 지정, 배열로 여러 locale을 지정할 수도 있음
    • 예: 'en-US', 'ko-KR', ['en-US', 'ko-KR']

• options(선택 사항)

  • 비교 동작을 사용자 정의할 수 있는 속성들을 포함하는 객체

    옵션명	설명
    sensitivity	문자열 비교의 민감도를 설정
    numeric	숫자 문자열을 숫자처럼 비교할지 여부를 설정
    caseFirst	대소문자 정렬 우선순위 설정

    • sensitivity

      값	비교 방식	예시
      'base'	기본 글자만 비교함	'a' === 'A'
      'accent'	기본 글자와 악센트 마크까지 비교함	'a' !== 'á'
      'case'	기본 글자와 대소문자까지 비교함	'a' !== 'A'
      'variant'	모든 차이점을 비교함(가장 엄격)

    • numeric

      값	비교 방식
      true	숫자 문자열을 숫자처럼 비교함
      false	숫자 문자열을 숫자처럼 비교하지 않음

    • caseFirst

      값	비교 방식
      'upper'	대문자가 소문자보다 먼저 옴
      'lower'	소문자가 대문자보다 먼저 옴
      'false'	locale 기본값에 따름

✅ 활용 예시

1. 간단한 문자열 비교(한글)

const str1 = '가나다';
const str2 = '나다라';
const str3 = '가나다';
const str4 = '가가다';

console.log(str1.localeCompare(str2, 'ko-KR')); // 음수 ('가나다'가 '나다라'보다 앞에 옴)
console.log(str2.localeCompare(str1, 'ko-KR')); // 양수 ('나다라'가 '가나다'보다 뒤에 옴)
console.log(str1.localeCompare(str3, 'ko-KR')); // 0 (두 문자열이 같음)
console.log(str1.localeCompare(str4, 'ko-KR')); // 양수 ('가나다'가 '가가다'보다 뒤에 옴)

2. 배열 정렬

const fruits = ['바나나', '사과', '애플', 'Banana', 'apple', 'Orange', '오렌지'];

// 기본 sort() (유니코드 값 기준)
console.log('기본 sort():', fruits.sort());
// 결과는 예상과 다를 수 있습니다. (예: 'Apple' 다음에 'Banana'가 오고, 한글과 영어가 섞일 수 있음)
// [ 'Apple', 'Banana', 'Orange', 'apple', '바나나', '사과', '애플', '오렌지' ] 와 비슷하게 나올 수 있습니다. (정확한 순서는 환경마다 다를 수 있음)

// localeCompare()를 이용한 한글, 영어 혼합 정렬 (한국어 로케일)
fruits.sort((a, b) => a.localeCompare(b, 'ko-KR', { sensitivity: 'base' }));
console.log('localeCompare() 정렬 (ko-KR):', fruits);
// 예상 결과: [ '바나나', '사과', '애플', '오렌지', 'apple', 'Banana', 'Orange' ] (한글이 먼저, 그 다음 영어가 사전순으로 정렬될 확률이 높음)

// 영어 로케일로 정렬 (대소문자 구분 없이)
fruits.sort((a, b) => a.localeCompare(b, 'en-US', { sensitivity: 'base' }));
console.log('localeCompare() 정렬 (en-US, base):', fruits);
// 예상 결과: [ 'apple', 'Apple', 'Banana', 'Orange', ... ] (대소문자 구분 없이 알파벳 순)

// 영어 로케일로 정렬 (대소문자 구분)
fruits.sort((a, b) => a.localeCompare(b, 'en-US', { sensitivity: 'case' }));
console.log('localeCompare() 정렬 (en-US, case):', fruits);
// 예상 결과: [ 'Apple', 'apple', 'Banana', 'Orange', ... ] (대문자가 소문자보다 먼저)

3. 숫자 문자열 정렬

numerice 옵션을 사용해서 문자열 형태의 숫자도 정렬 가능함

const versions = ['v10', 'v2', 'v1'];

versions.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
console.log('숫자 문자열 정렬:', versions);
// 예상 결과: [ 'v1', 'v2', 'v10' ]

📝 정리

• localeCompare()는 다국어 문자열 정렬에서 필수적인 도구이다.
• 숫자 정렬, 대소문자 우선순위, 악센트 구분 등 정교한 정렬 기준이 필요할 때 강력한 기능을 발휘한다.
• 단순 sort()로는 해결되지 않는 정렬 문제에 유용하다.