문자열 정렬시 sort가 아닌 localeCompare메서드 사용

✅ 문자열을 sort로 정렬시 문제점

sort메서드는 문자열을 유니코드 값(아스키 코드)에 따라 정렬한다.

그래서 한글의 사전 순서와 다를 수 있고, 대소문자/특수문자가 있는 경우 예기치 않은 결과가 나올 수 있다.

유니코드와 아스키코드 대해서

 

 

<문제 코드>

sort로 정렬시 유니코드 순서로 정렬, 대소문자 구분이 되지 않는다.

const words = ["apple", "Banana", "apple-pie", "Apple", "banana", "applepie"];
words.sort(); 
// 결과 : [  "Apple",  "Banana",  "apple",  "apple-pie",  "applepie",  "banana"]

 

 

✅ localeCompare란

문자열을 특정 언어의 규칙에 따라 비교 가능.

- 언어별로 올바른 정렬 가능함(다국어 지원)

- 대소문자, 특수문자 구분 가능

string1.localeCompare(string2, locales, options);
기준문자열.localeCompare(비교할문자열, 로케일지역 , 옵션)

옵션
sensitivity: 대소문자 구분이나 악센트 구분 등 비교의 민감도를 설정 
base: 기본 민감도(대소문자나 악센트 구분 없음).
accent: 악센트를 구분하되, 대소문자는 구분하지 않음.
case: 대소문자만 구분.
variant: 대소문자와 악센트를 모두 구분.

 

<사용예제>

localeCompare를 사용하여 영어 기준으로 정렬

const words = ["apple", "Banana", "apple-pie", "Apple", "banana", "applepie"];

words.sort((a, b) => a.localeCompare(b));
console.log(words);
// 결과 [  "Apple",  "apple",  "apple-pie",  "applepie",  "Banana",  "banana"]

 

옵션 사용

const words = ["apple", "Banana", "apple-pie", "Apple", "banana", "applepie"];

// 대소문자 및 악센트 모두 무시 (sensitivity: 'base')
words.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));
// 결과 : ["apple", "Apple", "apple-pie", "applepie", "Banana", "banana"]


// 악센트만 무시하고 대소문자 구분 (sensitivity: 'accent')
words.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'accent' }));
// 결과 : ["Apple", "apple", "apple-pie", "applepie", "Banana", "banana"]

// 대소문자 구분하며 정렬 (sensitivity: 'variant')
words.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'variant' }));
// 결과 : ["Apple", "Banana", "apple", "apple-pie", "applepie", "banana"]

 

---

#fake-store