웹 애플리케이션을 다국어로 지원해야하는 경우, 사용자 인터페이스에 다국어 목록을 표시해야할 때가 있습니다. 이러한 상황에서 JavaScript의 Intl.ListFormat을 사용하면 간편하게 다국어 목록을 표시할 수 있습니다.
Intl.ListFormat이란?
Intl.ListFormat은 ECMAScript 국제화 API 중 하나로, 주어진 배열의 요소를 쉼표로 구분하고 “and”로 연결하여 다국어 목록을 표현합니다. 이를 통해 네이티브 다국어 형식으로 목록을 표시할 수 있으며, 다양한 언어 및 로케일에 맞게 자동으로 형식을 적용할 수 있습니다.
사용 방법
Intl.ListFormat은 전역 객체인 Intl의 메서드로 사용할 수 있습니다. 다음은 Intl.ListFormat을 사용하여 다국어 목록을 표시하는 간단한 예제입니다.
const list = ['사과', '바나나', '오렌지'];
const listFormat = new Intl.ListFormat('ko-KR', { style: 'long', type: 'conjunction' });
const formattedList = listFormat.format(list);
console.log(formattedList);
위 예제에서는 ‘사과’, ‘바나나’, ‘오렌지’라는 세 개의 요소를 가진 배열을 생성하고, Intl.ListFormat을 ‘ko-KR’ 로케일을 사용하여 설정합니다. 그런 다음 format 메서드를 사용하여 배열을 다국어 목록으로 형식화합니다. 마지막으로, 형식화된 목록을 콘솔에 출력합니다.
결과
위 예제를 실행하면 다음과 같은 결과가 출력됩니다.
사과, 바나나, 그리고 오렌지
이 결과는 ‘ko-KR’ 로케일에 맞는 한국어로 형식화된 다국어 목록을 나타냅니다.
추가 설정 옵션
Intl.ListFormat을 사용할 때 목록의 스타일 및 연결 단어를 커스터마이즈할 수 있습니다. 첫 번째 인자로 로케일을 지정한 후 두 번째 인자에 옵션 객체를 사용하여 다양한 설정을 지정할 수 있습니다.
다음은 주요 설정 옵션입니다.
- style (default: “long”): 목록의 형식을 결정합니다. “long”, “short”, “narrow” 중 하나를 선택할 수 있습니다.
- type (default: “conjunction”): 연결 단어를 결정합니다. “conjunction” (기본값), “disjunction”, “unit” 중 하나를 선택할 수 있습니다.
- localeMatcher (default: “best fit”): 최적의 맞춤법 규칙을 사용할지, 완벽한 일치를 사용할지 결정합니다.
결론
Intl.ListFormat은 다국어 웹 애플리케이션에서 다국어 목록을 표시하는 데 유용한 JavaScript API입니다. 다양한 언어 및 로케일에 맞는 목록 표현을 손쉽게 할 수 있으며, 설정 옵션을 사용하여 목록의 스타일과 연결 단어를 커스터마이즈할 수 있습니다. 국제화 작업을 진행하는 개발자라면, Intl.ListFormat을 활용하여 웹 애플리케이션의 다국어 지원을 향상시킬 수 있습니다.
참고 자료
#Javascript #국제화