Safari 15.4의 새로운 국제화 기능 설명

Safari 15.4 released recently 및 여러 가지 중 몇 가지 새로운 국제화 기능이 포함되어 있습니다. 그리고 블로그 게시물은 그들이 무엇인지 설명하지만 실제로 그들이하는 일에 대해서는 언급하지 않습니다. 그래서 나는 그들 모두에 대한 간단한 요약을 제공할 것입니다.

국제 언어

calendars/collations/hourCycles/numberingSystems/timeZones

이러한 모든 속성은 로캘이 지원하는 항목의 배열을 반환합니다. 다음은 각 항목이 무엇을 위해 사용되는지 알 수 있도록 반환되는 몇 가지 예입니다.

// calendars for Japanese (Japan) will return the Gregorian calendar and the Japanese calendar
new Intl.Locale('ja-JP').calendars; // ['gregory', 'japanese']

// collations A.K.A. ordering rules for Spanish (Mexico) will return traditional style ordering, European ordering rules, and emoji
new Intl.Locale('es-MX').collations; // ['trad', 'emoji', 'eor']

// hourCycles for Traditional Chinese (China) will be a 23 hour cycle
new Intl.Locale('zh-Hant-CN').hourCycles; // ['h23']
// but for English (USA) it will be a 12 hour cycle
new Intl.Locale('en-US').hourCycles; // ['h12']

// numberingSystems for Arabic (Bahrain) will return Arabic-Indic digits
new Intl.Locale('ar-BH').numberingSystems; // ['arab']
// but for Portuguese (Brazil) it will return Latin digits
new Intl.Locale('pr-BR').numberingSystems; // ['latn']

// timeZones for English (New Zealand) will return Auckland and Chatham
new Intl.Locale('en-NZ').timeZones; // ['Pacific/Auckland', 'Pacific/Chatham']

사양의 이전 버전은 이러한 각 속성의 비복수 버전을 지원했습니다. 그러나 options 생성자의 Locale 매개변수를 통해 설정되지 않는 한 정의되지 않습니다.

// not setting with options
new Intl.Locale('ja-JP').calendar; // undefined
new Intl.Locale('ja-JP').calendars; // ['gregory', 'japanese']

// setting with options
new Intl.Locale('ja-JP', {calendar: 'gregory'}).calendar; // 'gregory'
new Intl.Locale('ja-JP', {calendar: 'gregory'}).calendars; // ['gregory'] as the 'japanese' one will get removed due to the options

// you can also set other calendars not there by default on the locale so be careful
new Intl.Locale('ja-JP', {calendar: 'buddhist'}).calendar; // 'buddhist'
new Intl.Locale('ja-JP', {calendar: 'buddhist'}).calendars; // ['buddhist']

텍스트 정보

textInfo 속성에는 현재 로케일의 텍스트가 오른쪽에서 왼쪽으로 쓰여지는지 왼쪽에서 오른쪽으로 쓰여지는지를 나타내는 역할을 하는 단일direction 속성이 있는 개체가 포함되어 있습니다.

// Arabic
new Intl.Locale("ar").textInfo; // { direction: 'rtl'}
// Spanish
new Intl.Locale("es").textInfo; // { direction: 'ltr'}

주 정보

weekInfo에는 현재 해당 지역에서 주가 작동하는 방식에 대한 다양한 정보가 포함된 개체가 포함되어 있습니다. 캘린더 UI를 만들 때 특히 유용합니다.

// week info for the UK
const gb = new Intl.Locale("en-GB").weekInfo;
gb.firstDay; // 1 - week starts on Monday
gb.weekend; // [6, 7] - weekend is Saturday and Sunday
gb.minimalDays; // 4 - for a week to be shown as the first week of a month it needs to be at least 4 days long

// week info for Algeria
const dz = new Intl.Locale("ar-DZ").weekInfo;
dz.firstDay; // 6 - week starts on Saturday
dz.weekend; // [5, 6] - weekend is Friday and Saturday
dz.minimalDays; // 1 - for a week to be shown as the first week of a month it needs to be at least 1 days long

브라우저 지원

MDN

위의 모든 기능은 다음 브라우저에서 지원됩니다.

Safari: 15.4 - 지원됨

Chrome/Edge: 92* - 지원됨(MDN은 플래그가 있는 경우에만 표시되지만 플래그 없이 Edge 99에서 작동함)

Firefox: 99 - 지원되지 않음

국제 표시 이름

유형: '캘린더'

이 유형 옵션을 사용하면 지원되는 모든 캘린더 유형에 대해 현지화된 이름을 얻을 수 있습니다.

new Intl.DisplayNames(['en'], { type: 'calendar' }).of('gregory'); // 'Gregorian Calendar'
new Intl.DisplayNames(['en'], { type: 'calendar' }).of('japanese'); // 'Japanese Calendar'

유형: 'dateTimeField'

이 유형 옵션을 사용하면 날짜 및 시간과 관련된 다양한 일반 단어에 대해 현지화된 문자열을 얻을 수 있습니다. 몇 가지 예는 다음과 같습니다.

new Intl.DisplayNames(['en'], { type: 'dateTimeField' }).of('year'); // 'year'
new Intl.DisplayNames(['en'], { type: 'dateTimeField' }).of('minute'); // 'minute'                                               
new Intl.DisplayNames(['en'], { type: 'dateTimeField' }).of('weekday') // 'day of the week'

언어표시 옵션

languageDisplay 옵션은 언어를 나타내는 문자열의 형식을 결정하는 type: 'language'에만 사용할 수 있는 옵션입니다. '방언' 또는 '표준'일 수 있습니다.

new Intl.DisplayNames(['en'], { type: 'language', languageDisplay: 'dialect' }).of('en-AU'); // Australian English
new Intl.DisplayNames(['en'], { type: 'language', languageDisplay: 'standard' }).of('en-AU'); // English (Australia)

브라우저 지원

특히 이러한 기능에 대한 데이터MDN는 없지만 다음 브라우저에서 테스트했습니다.

Safari: 15.4 - 지원됨

Chrome/Edge: 99 - 지원됨

Firefox: 99 개발자 에디션 - 지원됨

Intl.DateTimeFormat

새로운 timeZoneName 유형

4개의 새로운 유형timeZoneName이 추가되었습니다: 'shortOffset', 'longOffset', 'shortGeneric' 및 'longGeneric'.

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));

new Intl.DateTimeFormat('en', { timeZone: 'JST', timeZoneName: 'shortOffset'}).format(date); // '12/20/2020, GMT+9'
new Intl.DateTimeFormat('en', { timeZone: 'JST', timeZoneName: 'longOffset'}).format(date); // '12/20/2020, GMT+09:00'
new Intl.DateTimeFormat('en', { timeZone: 'JST', timeZoneName: 'shortGeneric'}).format(date); // '12/20/2020, Japan Time'
new Intl.DateTimeFormat('en', { timeZone: 'JST', timeZoneName: 'longGeneric'}).format(date); // '12/20/2020, Japan Standard Time'

브라우저 지원

MDN

Safari: 15.4 - 지원됨

Chrome/Edge: 99* - 지원됨(MDN은 이를 지원되는 것으로 나열하지 않지만 내 테스트에서는 작동했습니다. 이전 버전에서는 작동할 수 있습니다. MDN issue )

Firefox: 91 - 지원됨

Intl.NumberFormat / Intl.PluralRules

Safari 15.4는 formatRange()에서 formatRangeToParts() 및 NumberFormat 및 selectRange()에서 PluralRules에 대한 지원을 추가했다고 언급합니다. 그러나 글을 쓰는 시점에서 이러한 기능은 실제로 Safari 15.4(Mac OS 10.15)에서 구현되지 않았으며 다른 브라우저에서도 구현되지 않은 것 같습니다.

new Intl.NumberFormat('de-DE').formatRange; // undefined
new Intl.NumberFormat('de-DE').formatRangeToParts; // undefined

new Intl.PluralRules('de-DE').selectRange; // undefined

결론

이 기사가 이 모든 새로운 기능에 대한 내용과 실제로 사용할 수 있는지 여부를 더 잘 이해하는 데 도움이 되었기를 바랍니다.

학점

표지 사진 Nareeta Martin on Unsplash .