JavaScript Academy · 강의

지역 설정을 반영한 정렬

Intl.Collator로 문자열을 올바르게 정렬합니다.

지역 설정을 반영한 정렬은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

기본 정렬이 실패하는 이유

배열의 sort()는 UTF-16 코드 단위로 문자열을 비교합니다. 따라서 대문자가 소문자보다 앞에 오고 악센트를 올바르게 처리하지 못하므로, 사람이 읽는 목록에는 적합하지 않습니다.

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort()); // ["Apple","banana","cherry"] — capital wins

localeCompare

String.prototype.localeCompare는 로캘 규칙을 사용해 두 문자열을 비교하고 음수, 0 또는 양수를 반환합니다.

console.log("apple".localeCompare("banana")); // -1
console.log("banana".localeCompare("apple")); // 1

localeCompare로 정렬하기

사람이 읽기 좋은 순서를 얻으려면 비교 함수로 전달하세요.

const words = ["banana", "Apple", "cherry"];
console.log([...words].sort((a, b) => a.localeCompare(b)));
// ["Apple", "banana", "cherry"] — case-insensitive ordering

Intl.Collator

많은 항목을 정렬할 때는 Intl.Collator가 더 빠릅니다. 한 번 만들고 그 compare 메서드를 재사용하세요.

const collator = new Intl.Collator("en-US");
const words = ["banana", "Apple", "cherry"];
console.log([...words].sort(collator.compare));

악센트와 발음 구별 부호

Collator는 코드 단위 비교와 달리 로캘에 따라 악센트가 있는 문자를 올바르게 정렬합니다.

const words = ["zebra", "ela", "elf", "elan"];
const collator = new Intl.Collator("fr");
console.log([...words].sort(collator.compare));

민감도

sensitivity는 어떤 차이를 고려할지 제어합니다. "base"는 대소문자와 악센트를 무시하고, "accent"는 대소문자만 무시하며, "variant"는 모든 차이를 구분합니다.

const c = new Intl.Collator("en", { sensitivity: "base" });
console.log(c.compare("apple", "APPLE")); // 0 (treated equal)

숫자 정렬

numeric: true는 문자열 안에 포함된 숫자를 값에 따라 정렬하므로 「파일2」가 「파일10」보다 먼저 옵니다.

const files = ["file10", "file2", "file1"];
const c = new Intl.Collator("en", { numeric: true });
console.log([...files].sort(c.compare)); // ["file1","file2","file10"]

대소문자 우선순위

caseFirst: "upper" 또는 "lower"는 다른 차이가 같을 때 대문자를 소문자보다 먼저 정렬할지 결정합니다.

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

순서에서 로캘이 중요한 이유

언어마다 알파벳순이 다릅니다. 스웨덴어에서는 일부 악센트 문자가 a 근처가 아니라 z 뒤에 정렬됩니다.

const words = ["z", "a", "o"];
console.log([...words].sort(new Intl.Collator("sv").compare));

usage로 검색하기

usage: "search"는 순서 지정이 아니라 일치 검색에 맞게 Collator를 조정합니다. 악센트를 무시하고 필터링할 때 유용합니다.

const c = new Intl.Collator("en", { usage: "search", sensitivity: "base" });
function matches(a, b) { return c.compare(a, b) === 0; }
console.log(matches("cafe", "CAFE")); // true

객체 정렬

객체 배열을 정렬할 때는 키에 Collator를 사용하세요.

const people = [{ name: "Bob" }, { name: "alice" }, { name: "Carol" }];
const c = new Intl.Collator("en");
console.log(people.sort((a, b) => c.compare(a.name, b.name)).map((p) => p.name));

빠른 확인

로캘을 고려한 정렬을 테스트해 봅니다.

복습: 로캘을 고려한 정렬

기본 sort()가 잘못된 결과를 내는 이유를 확인하고, localeCompare와 더 빠른 Intl.Collator를 사용하고, 악센트, 민감도, 숫자 및 대소문자 정렬, 로캘별 알파벳, 검색 일치를 처리했습니다. 이것으로 Intl 과정을 모두 마쳤습니다.

자주 묻는 질문

“지역 설정을 반영한 정렬” 강의는 무료인가요?

네 — “지역 설정을 반영한 정렬” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“지역 설정을 반영한 정렬”에서 뭘 배우나요?

Intl.Collator로 문자열을 올바르게 정렬합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“지역 설정을 반영한 정렬” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기