Intl.Collator API - JavaScript i18n

소개

JavaScript에서 문자열을 정렬하는 것은 국제 텍스트를 다루기 전까지는 간단해 보입니다. 기본 문자열 비교는 유니코드 코드 포인트 값을 사용하여 많은 언어에서 잘못된 결과를 생성합니다. Intl.Collator API는 문화적 정렬 규칙을 존중하고 특수 문자를 올바르게 처리하는 로케일 인식 문자열 비교를 제공합니다.

기본 정렬이 실패하는 이유

독일어 이름 목록을 정렬하는 경우를 생각해 보세요:

const names = ["Zoe", "Ava", "Ärzte", "Änder"];
console.log(names.sort());
// ["Ava", "Zoe", "Änder", "Ärzte"]

이 출력은 독일어 사용자에게 잘못된 결과입니다. 독일어에서는 ä와 같은 움라우트가 있는 문자가 끝이 아닌 기본 문자 a 근처에 정렬되어야 합니다. 이 문제는 JavaScript가 유니코드 코드 포인트 값을 비교하면서 발생하며, Ä(U+00C4)가 Z(U+005A) 뒤에 오기 때문입니다.

언어마다 정렬 규칙이 다릅니다. 스웨덴어는 ä를 알파벳 끝에 정렬하고, 독일어는 a 근처에 정렬하며, 프랑스어는 악센트가 있는 문자를 다르게 처리합니다. 이진 비교는 이러한 문화적 관습을 무시합니다.

문자열 조합 작동 방식

조합(collation)은 언어별 규칙에 따라 문자열을 비교하고 정렬하는 프로세스입니다. 유니코드 조합 알고리즘은 문자, 분음 부호, 대소문자 및 구두점을 별도로 분석하여 문자열을 비교하는 방법을 정의합니다.

두 문자열을 비교할 때 조합 함수는 숫자를 반환합니다:

음수 값: 첫 번째 문자열이 두 번째 문자열보다 앞에 옴
0: 현재 민감도 수준에서 문자열이 동등함
양수 값: 첫 번째 문자열이 두 번째 문자열보다 뒤에 옴

이 3방향 비교 패턴은 Array.sort와 함께 작동하며 어떤 차이가 중요한지 정밀하게 제어할 수 있습니다.

기본 로케일 인식 정렬을 위한 localeCompare 사용

localeCompare 메서드는 로케일 인식 문자열 비교를 제공합니다:

const names = ["Zoe", "Ava", "Ärzte", "Änder"];
console.log(names.sort((a, b) => a.localeCompare(b, "de")));
// ["Ava", "Änder", "Ärzte", "Zoe"]

이것은 올바른 독일어 정렬을 생성합니다. 첫 번째 매개변수는 로케일을 지정하며, localeCompare는 문화적 규칙을 자동으로 처리합니다.

세 번째 매개변수로 옵션을 전달할 수 있습니다:

const items = ["File10", "File2", "File1"];
console.log(items.sort((a, b) =>
  a.localeCompare(b, "en", { numeric: true })
));
// ["File1", "File2", "File10"]

numeric 옵션은 "2"가 "10"보다 앞에 오는 자연스러운 정렬을 활성화합니다. 이 옵션이 없으면 "1"이 "2"보다 앞에 오기 때문에 "10"이 "2"보다 먼저 정렬됩니다.

반복적인 localeCompare의 성능 문제

각 localeCompare 호출은 로케일 설정을 처음부터 처리합니다. 큰 배열을 정렬할 때 이는 상당한 오버헤드를 발생시킵니다:

// Inefficient: processes locale for every comparison
const sorted = items.sort((a, b) => a.localeCompare(b, "de"));

1000개의 항목을 정렬하려면 약 10000번의 비교가 필요합니다. 각 비교마다 로케일 구성을 재생성하므로 성능 비용이 배가됩니다. 이러한 오버헤드는 대규모 데이터셋을 다루는 사용자 인터페이스에서 눈에 띄게 나타납니다.

효율적인 문자열 비교를 위한 Intl.Collator 사용

Intl.Collator는 로케일 설정을 한 번만 처리하는 재사용 가능한 비교 객체를 생성합니다:

const collator = new Intl.Collator("de");
const sorted = items.sort((a, b) => collator.compare(a, b));

collator 인스턴스는 로케일 구성과 비교 규칙을 저장합니다. compare 메서드는 모든 비교에 대해 이러한 사전 계산된 규칙을 사용하여 반복적인 초기화 오버헤드를 제거합니다.

큰 배열을 정렬할 때 반복적인 localeCompare 호출에 비해 성능이 60%에서 80% 향상됩니다.

compare 메서드에 직접 접근하기

compare 메서드를 sort에 직접 전달할 수 있습니다:

const collator = new Intl.Collator("de");
const sorted = items.sort(collator.compare);

compare가 collator 인스턴스에 바인딩되어 있기 때문에 이것이 작동합니다. 이 메서드는 두 개의 문자열을 받아 비교 결과를 반환하며, Array.sort가 기대하는 시그니처와 일치합니다.

sensitivity 레벨 이해하기

sensitivity 옵션은 비교 중에 어떤 문자 차이가 중요한지를 제어합니다. 네 가지 레벨이 있습니다:

base sensitivity

base sensitivity는 악센트와 대소문자를 무시합니다:

const collator = new Intl.Collator("en", { sensitivity: "base" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // 0
console.log(collator.compare("a", "A")); // 0
console.log(collator.compare("a", "b")); // -1

기본 문자만 다릅니다. 이 레벨은 사용자가 악센트를 정확하게 입력하지 않을 수 있는 퍼지 검색에 적합합니다.

accent sensitivity

accent sensitivity는 악센트를 고려하지만 대소문자는 무시합니다:

const collator = new Intl.Collator("en", { sensitivity: "accent" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // -1
console.log(collator.compare("a", "A")); // 0
console.log(collator.compare("á", "A")); // 1

악센트가 있는 문자와 없는 문자는 구별됩니다. 같은 문자의 대문자와 소문자는 일치합니다.

대소문자 구분

대소문자 구분은 대소문자를 고려하지만 악센트는 무시합니다:

const collator = new Intl.Collator("en", { sensitivity: "case" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // 0
console.log(collator.compare("a", "A")); // -1
console.log(collator.compare("á", "Á")); // -1

대소문자 차이는 중요하지만 악센트는 무시됩니다. 이 수준은 실제로 덜 일반적입니다.

변형 구분

변형 구분은 모든 차이를 고려합니다:

const collator = new Intl.Collator("en", { sensitivity: "variant" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // -1
console.log(collator.compare("a", "A")); // -1
console.log(collator.compare("á", "Á")); // -1

이것은 정렬의 기본값입니다. 모든 문자 차이는 고유한 비교 결과를 생성합니다.

사용 사례에 따른 구분 수준 선택

다양한 시나리오에는 서로 다른 구분 수준이 필요합니다:

목록 정렬: 엄격한 순서를 유지하기 위해 변형 구분 사용
콘텐츠 검색: 악센트나 대소문자에 관계없이 일치시키기 위해 기본 구분 사용
옵션 필터링: 대소문자가 중요하지 않을 때 악센트 구분 사용
대소문자 구분 검색: 악센트가 중요하지 않을 때 대소문자 구분 사용

usage 옵션은 일반적인 시나리오에 대한 기본 구분 설정을 제공합니다.

정렬 및 검색 모드에 usage 사용

usage 옵션은 정렬 또는 검색을 위한 collator 동작을 최적화합니다:

// Optimized for sorting
const sortCollator = new Intl.Collator("en", { usage: "sort" });

// Optimized for searching
const searchCollator = new Intl.Collator("en", { usage: "search" });

정렬 usage는 변형 구분을 기본값으로 하여 모든 차이가 일관된 순서를 생성하도록 합니다. 검색 usage는 일치 항목을 찾는 데 최적화되어 일반적으로 더 완화된 구분을 사용합니다.

대소문자 및 악센트를 구분하지 않는 검색의 경우:

const collator = new Intl.Collator("en", {
  usage: "search",
  sensitivity: "base"
});

const items = ["Apple", "Äpfel", "Banana"];
const matches = items.filter(item =>
  collator.compare(item, "apple") === 0
);
console.log(matches); // ["Apple"]

이 패턴은 사용자가 정확한 문자를 입력할 필요가 없는 퍼지 매칭을 가능하게 합니다.

자연스러운 순서를 위한 숫자 정렬 활성화

numeric 옵션은 포함된 숫자를 숫자 값으로 처리합니다:

const collator = new Intl.Collator("en", { numeric: true });

const files = ["File1", "File10", "File2"];
console.log(files.sort(collator.compare));
// ["File1", "File2", "File10"]

숫자 정렬이 없으면 "File10"이 "File2"보다 먼저 정렬됩니다. 문자열 "10"이 "1"로 시작하기 때문입니다. 숫자 정렬은 숫자 시퀀스를 파싱하고 수학적으로 비교합니다.

이것은 파일 이름, 버전 번호 및 번호가 매겨진 목록에 대한 인간의 기대와 일치하는 자연스러운 순서를 생성합니다.

숫자 정렬로 소수 처리하기

숫자 정렬은 소수에서 제한 사항이 있습니다:

const collator = new Intl.Collator("en", { numeric: true });

const values = ["1.5", "1.10", "1.2"];
console.log(values.sort(collator.compare));
// ["1.2", "1.5", "1.10"]

소수점은 숫자의 일부가 아닌 구두점으로 처리됩니다. 구두점 사이의 각 세그먼트는 별도로 정렬됩니다. 소수 정렬의 경우 값을 숫자로 파싱하고 숫자 비교를 사용하세요.

caseFirst로 대소문자 순서 제어하기

caseFirst 옵션은 대문자 또는 소문자 중 어느 것을 먼저 정렬할지 결정합니다:

// Uppercase first
const upperFirst = new Intl.Collator("en", { caseFirst: "upper" });
console.log(["a", "A", "b", "B"].sort(upperFirst.compare));
// ["A", "a", "B", "b"]

// Lowercase first
const lowerFirst = new Intl.Collator("en", { caseFirst: "lower" });
console.log(["a", "A", "b", "B"].sort(lowerFirst.compare));
// ["a", "A", "b", "B"]

기본값은 false이며, 로케일 기본 순서를 사용합니다. sensitivity가 base 또는 accent인 경우 해당 수준에서 대소문자를 무시하므로 이 옵션은 효과가 없습니다.

비교 중 구두점 무시하기

ignorePunctuation 옵션은 비교 중 구두점을 건너뜁니다:

const collator = new Intl.Collator("en", { ignorePunctuation: true });

console.log(collator.compare("hello", "he-llo")); // 0
console.log(collator.compare("hello", "hello!")); // 0

이 옵션은 태국어의 경우 기본값이 true이고 다른 언어의 경우 false입니다. 구두점이 문자열 순서나 일치에 영향을 주지 않아야 할 때 사용하세요.

언어별 규칙을 위한 대조 유형 지정하기

일부 로케일은 특수 정렬을 위한 여러 대조 유형을 지원합니다:

// Chinese pinyin ordering
const pinyin = new Intl.Collator("zh-CN-u-co-pinyin");

// German phonebook ordering
const phonebook = new Intl.Collator("de-DE-u-co-phonebk");

// Emoji grouping
const emoji = new Intl.Collator("en-u-co-emoji");

대조 유형은 유니코드 확장 구문을 사용하여 로케일 문자열에 지정됩니다. 일반적인 유형은 다음과 같습니다:

pinyin: 로마자 발음별 중국어 정렬
stroke: 획수별 중국어 정렬
phonebk: 독일어 전화번호부 정렬
trad: 특정 언어의 전통적 정렬 규칙
emoji: 이모지를 카테고리별로 그룹화

환경에서 사용 가능한 대조 유형은 Intl.supportedValuesOf를 확인하세요.

애플리케이션 전체에서 collator 인스턴스 재사용하기

collator 인스턴스를 한 번 생성하고 애플리케이션 전체에서 재사용하세요:

// utils/collation.js
export const germanCollator = new Intl.Collator("de");
export const searchCollator = new Intl.Collator("en", {
  sensitivity: "base"
});
export const numericCollator = new Intl.Collator("en", {
  numeric: true
});

// In your components
import { germanCollator } from "./utils/collation";

const sorted = names.sort(germanCollator.compare);

이 패턴은 성능을 극대화하고 코드베이스 전체에서 일관된 비교 동작을 유지합니다.

속성별로 객체 배열 정렬하기

객체 속성에 접근하는 비교 함수에서 collator를 사용하세요:

const collator = new Intl.Collator("de");

const users = [
  { name: "Zoe" },
  { name: "Änder" },
  { name: "Ava" }
];

const sorted = users.sort((a, b) =>
  collator.compare(a.name, b.name)
);

이 접근 방식은 모든 객체 구조에 적용됩니다. 비교할 문자열을 추출하여 collator에 전달하세요.

Intl.Collator와 localeCompare 성능 비교

Intl.Collator는 대규모 데이터셋을 정렬할 때 더 나은 성능을 제공합니다:

// Slower: recreates locale settings for each comparison
const slow = items.sort((a, b) => a.localeCompare(b, "de"));

// Faster: reuses precomputed locale settings
const collator = new Intl.Collator("de");
const fast = items.sort(collator.compare);

작은 배열(100개 미만 항목)의 경우 차이는 무시할 수 있습니다. 큰 배열(수천 개 항목)의 경우 Intl.Collator가 60-80% 더 빠를 수 있습니다.

Chrome과 같은 V8 기반 브라우저에는 한 가지 예외가 있습니다. localeCompare는 조회 테이블을 사용하여 ASCII 전용 문자열에 대한 최적화를 제공합니다. 순수 ASCII 문자열을 정렬할 때 localeCompare는 Intl.Collator와 비슷한 성능을 보일 수 있습니다.

Intl.Collator와 localeCompare 사용 시기 파악하기

다음과 같은 경우 Intl.Collator를 사용하세요:

큰 배열 정렬(수백 또는 수천 개 항목)
반복적인 정렬(사용자가 정렬 순서 전환, 가상 목록)
재사용 가능한 비교 유틸리티 구축
사용 사례에서 성능이 중요한 경우

다음과 같은 경우 localeCompare를 사용하세요:

일회성 비교 수행
작은 배열 정렬(100개 미만 항목)
성능보다 단순성이 중요한 경우
설정 없이 인라인 비교가 필요한 경우

두 API 모두 동일한 옵션을 지원하며 동일한 결과를 생성합니다. 차이점은 순전히 성능과 코드 구성에 관한 것입니다.

확인된 옵션 검사

resolvedOptions 메서드는 collator가 사용하는 실제 옵션을 반환합니다:

const collator = new Intl.Collator("de", { sensitivity: "base" });
console.log(collator.resolvedOptions());
// {
//   locale: "de",
//   usage: "sort",
//   sensitivity: "base",
//   ignorePunctuation: false,
//   collation: "default",
//   numeric: false,
//   caseFirst: "false"
// }

이는 collation 동작을 디버그하고 기본값을 이해하는 데 도움이 됩니다. 시스템이 정확한 로케일을 지원하지 않는 경우 확인된 로케일은 요청된 로케일과 다를 수 있습니다.

로케일 지원 확인

현재 환경에서 지원되는 로케일을 확인하세요:

const supported = Intl.Collator.supportedLocalesOf(["de", "fr", "xx"]);
console.log(supported); // ["de", "fr"]

지원되지 않는 로케일은 시스템 기본값으로 대체됩니다. 이 메서드는 요청한 로케일을 사용할 수 없는 경우를 감지하는 데 도움이 됩니다.

브라우저 및 환경 지원

Intl.Collator는 2017년 9월부터 광범위하게 지원되었습니다. 모든 최신 브라우저와 Node.js 버전이 이를 지원합니다. API는 모든 환경에서 일관되게 작동합니다.

일부 정렬 유형 및 옵션은 구형 브라우저에서 제한적으로 지원될 수 있습니다. 구형 환경을 지원하는 경우 중요한 기능을 테스트하거나 MDN 호환성 표를 확인하세요.

피해야 할 일반적인 실수

모든 비교마다 새로운 collator를 생성하지 마세요:

// Wrong: creates collator repeatedly
items.sort((a, b) => new Intl.Collator("de").compare(a, b));

// Right: create once, reuse
const collator = new Intl.Collator("de");
items.sort(collator.compare);

국제 텍스트에 기본 정렬이 작동한다고 가정하지 마세요:

// Wrong: breaks for non-ASCII characters
names.sort();

// Right: use locale-aware sorting
names.sort(new Intl.Collator("de").compare);

검색 시 sensitivity를 지정하는 것을 잊지 마세요:

// Wrong: variant sensitivity requires exact match
const collator = new Intl.Collator("en");
items.filter(item => collator.compare(item, "apple") === 0);

// Right: base sensitivity for fuzzy matching
const collator = new Intl.Collator("en", { sensitivity: "base" });
items.filter(item => collator.compare(item, "apple") === 0);

실용적인 사용 사례

Intl.Collator를 다음과 같은 경우에 사용하세요:

사용자 생성 콘텐츠 정렬(이름, 제목, 주소)
검색 및 자동 완성 기능 구현
정렬 가능한 열이 있는 데이터 테이블 구축
필터링된 목록 및 드롭다운 옵션 생성
파일 이름 및 버전 번호 정렬
연락처 목록의 알파벳순 탐색
다국어 애플리케이션 인터페이스

사용자에게 정렬된 텍스트를 표시하는 모든 인터페이스는 로케일 인식 정렬의 이점을 누릴 수 있습니다. 이를 통해 사용자의 언어에 관계없이 애플리케이션이 자연스럽고 정확하게 느껴지도록 보장합니다.