스페인어처럼 악센트(발음 기호)가 포함된 문자열은 일반적인 sort() 메서드만으로는 언어 규칙에 맞는 올바른 순서로 정렬되지 않습니다. 이런 경우 localeCompare() 메서드를 사용하면 로케일(언어·지역 설정)의 정렬 규칙에 따라 자연스럽게 문자열을 비교하고 정렬할 수 있습니다.
localeCompare()란?
localeCompare()는 두 문자열을 비교하여 현재 로케일의 사전 순서 규칙에 따라 다음과 같은 값을 반환합니다.
- 비교 문자열이 기준 문자열보다 앞에 오면 음수
- 같으면 0
- 비교 문자열이 뒤에 오면 양수
이 값을 배열의 sort() 콜백 함수에 그대로 사용하면 악센트가 있는 단어도 해당 언어의 알파벳 순서대로 정확하게 정렬됩니다.
예제 코드
다음은 JavaScript에서 악센트가 포함된 문자열 배열을 정렬하는 전체 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color:blueviolet
}
.sample{
color:red;
}
</style>
</head>
<body>
<h1>Sort strings with accented characters </h1>
<div class="sample">[qué,cómo,dónde,quién,cuánto,cuántos]</div><br>
<div class="result"></div>
<br>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to sort the above array </h3>
<script>
let resEle = document.querySelector('.result');
let BtnEle = document.querySelector('.Btn');
let arr = ['qué','cómo','dónde','quién','cuánto','cuántos'];
BtnEle.addEventListener('click',function(){
resEle.innerHTML= arr.sort(function (a, b) {
return a.localeCompare(b);
});
});
</script>
</body>
</html>코드 설명
위 코드에서 핵심 부분은 다음과 같습니다.
arr: 스페인어 단어들이 담긴 배열로, 각 단어에는 악센트가 포함되어 있습니다.a.localeCompare(b): 두 단어를 스페인어 알파벳 순서 규칙에 따라 비교합니다.- 버튼을 클릭하면
sort()가 실행되고, 그 결과가 화면에 표시됩니다.
실행 결과
페이지를 열면 아래와 같이 원본 배열이 먼저 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 악센트가 반영된 순서로 배열이 정렬됩니다.
