국제화

로케일 개념 locale concept

로케일은 사용자의 언어와 위치를 가리키므로 로케일로 사용자가 선호하는 표기방식을 알수 있다.
예를들면, 언어와 위치에 따라 숫자의 표시, 날짜의 표기등이 달라진다.

로케일지정

로케일은 최대 5가지 요소를 갖는다.

• 언어 : en, de, ko
• 문자 : (선택) Latn, Cyrl, Hans
• 국가 또는 지역 : (선택) US, CH, KR
• 방언 : (선택) 잘사용안함
• 확장 : (선택) 일본의 연호나 태국숫자를 사용하려면 확장으로 설정한다. 유니코드는 이들 확장일부를 지정한다. 유니코드에서는 u-로 시작하고 달력(ca), 숫자(nu) 등을 가르키는 두자리 코드를 사용한다. u-nu-thai 는 태국숫자를 가리킴

로케일은 'en-US', 'de-DE' 처럼 하이픈을 연결한 태그로 정의, 스위스에서 독일어를 사용하는 사람이라면 'de-CH'

const newYearEve = new Date(1999, 11, 31, 23, 59)
newYearEve.toLocaleString('de') // '31.12.1999, 23:59:00'
newYearEve.toLocaleString('kr') // '1999. 12. 31. 오후 11:59:00'
newYearEve.toLocaleString('en') // '12/31/1999, 11:59:00 PM'
newYearEve.toLocaleString('de', {timeZone: 'Asia/Tokyo'}) // 정상동작 안함

숫자포맷팅

Number 클래스의 toLocaleString 메서드에 로케일 태그를 인수로 전달해 숫자형식을 변환한다.

let number = 123456.78
let result = number.toLocaleString('de') // '123,456.78'
let formatter = new Intl.NumberFormat('de')
result = formatter.format(number) // '123,456.78'

number.toLocaleString('th-u-nu-thai')
new Intl.NumberFormat('th-u-nu-thai').format(number) // '๑๒๓,๔๕๖.๗๘'

number.toLocaleString('de', { style: 'currency', currency: 'EUR' }) // '123.456,78 €'
formatter = new Intl.NumberFormat('de', { style: 'currency', currency: 'EUR' })
formatter.format(number) // '123.456,78 €'

날짜와시간 지역화

날짜와 시간 지역화시 고려할 점

• 월과 요일명을 지역언어로 표기
• 연도, 월, 일의 순서가 지역에 따라 다름
• 일부지역에서는 그레고리력을 사용하지 않음
• 해당하는 위치의 시간대 고려

const newYearsEve = new Date(1999, 11, 31, 23, 59) 
newYearsEve.toLocaleDateString('de') // '31.12.1999'
newYearsEve.toLocaleTimeString('de') // '23:59:00'
newYearsEve.toLocaleString('de') // '31.12.1999, 23:59:00'

const germanDateTimeFormatter = new Intl.DateTimeFormat('de')
germanDateTimeFormatter.format(newYearsEve) // '31.12.1999'

newYearsEve.toLocaleDateString('en', {
 year: 'numeric',
 month: 'short',
 day: 'numeric',
}) // 'Dec 31, 1999'
new Intl.DateTimeFormat('de', {
 hour: 'numeric',
 minute: '2-digit'
}).format(newYearsEve) // '23:59

newYearsEve.toLocaleDateString('en', { dateStyle: 'medium' }) // 'Dec 31, 1999'
newYearsEve.toLocaleDateString('de', { dateStyle: 'medium' }) // '31.12.1999'

상대적 시간표시, format 메서드는 수량과 단위를 받으며, 단위는 year, quarter, month, week, day, hour, minute, second

new Intl.RelativeTimeFormat('en', { numeric: 'auto'}).format(-1, 'day') // 'yesterday'
new Intl.RelativeTimeFormat('fr').format(3, 'hours') // 'dans 3 heures'
new Intl.RelativeTimeFormat('ko', { numeric: 'auto'}).format(-1, 'day') // '어제'

정렬 collation

문자열을 정렬할때 항상 로케일을 적용해 비교 동작을 수행해야 한다.
String 클래스의 localeCompare 의 두번째 인수에 로케일을 지정한다.

const words = ['Alpha', 'Ångström', 'Zulu', 'able', 'zebra']
words.sort((x, y) => x.localeCompare(y, 'en')) // ['able', 'Alpha', 'Ångström', 'zebra', 'Zulu']

const parts = ['part1', 'part10', 'part2', 'part9']
parts.sort((x, y) => x.localeCompare(y, 'en-u-kn-true')) // ['part1', 'part2', 'part9', 'part10']

복수규칙과 목록

[0, 1, 2, 3, 4, 5].map(i => (new Intl.PluralRules('en').select(i)))
 // ['other', 'one', 'other', 'other', 'other', 'other']
Chapter 8 Internationalization 178
[0, 1, 2, 3, 4, 5].map(i => (new Intl.PluralRules('ru').select(i)))
 // ['many', 'one', 'few', 'few', 'few', 'many']

dollars = { one: 'dollar', other: 'dollars' }
[0, 1, 2, 3, 4, 5].map(i => (dollars[new Intl.PluralRules('en').select(i)])) // ['dollars', 'dollar', 'dollars', 'dollars', 'dollars', 'dollars']

연습문제