JavaScript Internationalization API (I18N)는 무엇입니까?

영어는 세계에서 가장 널리 사용되는 언어이지만 7 명 중 1 명만이 영어를 구사합니다. 그것은 3 억 7,900 만 명의 첫 언어 (모국어)이지만, 만다린을 구사하는 9 억 1,700 만 명, 스페인어를 구사하는 4 억 6 천만 명, 힌디어를 구사하는 3 억 4,100 만 명이 있습니다.

많은 영어를 사용하지 않는 사용자는 신흥 시장에 살고 있으며 인터넷 성장이 기하 급수적으로 증가합니다. 웹 애플리케이션이 전 세계적으로 번역 될 수 있다면 잠재적 목표 시장이 700%증가 할 수 있습니다!

JavaScript Internationalized API (I18N이라고도 함)를 사용하면 웹 페이지 및 응용 프로그램을 디자인하여 다른 언어를 사용하는 사용자의 요구에 쉽게 적응할 수 있습니다.

이 기사에서는 API가 제공하는 다양한 방법과 더 넓은 국제 청중에게 도달하기 위해 코드에서이를 구현하는 방법을 살펴 봅니다.

키 포인트

JavaScript Internationalization API (I18N)는 다양한 언어와 문화적 규범을 지원함으로써 글로벌 청중에게 웹 응용 프로그램의 적응을 촉진합니다.

API에는 및

와 같은 함수가 포함되어 있으며,이 기능은 사용자에게 친숙한 형식으로 정보를 제시하기 위해 로케일 식별자를 수락합니다.

상대 시간 형식 () 및 복수 민감성 형식 ()과 같은 고급 기능을 사용하면 더 미묘하고 문화적으로 준수하는 응용 프로그램이 가능합니다.

강력한 기능에도 불구하고 JavaScript Intl API는 언어와 문화적 차이를 효과적으로 처리하고 응용 프로그램이 진정으로 국제화되도록 신중하게 구현해야합니다.
국제화 (i18n)는 까다로울 수 있습니다 국제화는 쉬운 것처럼 보입니다…
• 라틴어 기반 언어는 표면에서 비슷할 수 있습니다. 예를 들어, 이름, 이메일 및 날짜를 ​​요청하기위한 양식은 다음과 같이 번역됩니다.
스페인어 : Nombre, 이메일, Fecha 프랑스어 : NOM, 이메일, 날짜 독일어 : 이름, 이메일, 데이텀 Intl.DateTimeFormat() GetText 국제화 및 현지화 시스템은 수십 년 동안 진행되어 왔으며 대부분의 프로그래밍 언어에는 라이브러리가 있습니다. Intl.NumberFormat() 더 간단한 경우에는 일부 토큰 화 양식을 사용할 수 있습니다. 예를 들어 다음이 포함 된 HTML 템플릿을 사용하십시오. 이것은 사용자가 영어를 기본 언어로 설정할 때
• "name"Intl.RelativeTimeFormat를 동적으로 대체합니다. 불행히도 이것은 사용자 인터페이스 문제가 나타나기 시작하는 곳입니다.
  동일한 언어의 변형이 다를 수 있습니다. 스페인의 스페인어 사용은 남미와 정확히 동일하지 않습니다.
  1. 한 언어로 된 단어는 다른 언어에서 훨씬 더 오래 커질 수 있습니다. 예를 들어, "이메일"은 러시아어로 "э 잘ектроннное письмо"로 변환됩니다.
  텍스트가 항상 왼쪽에서 오른쪽으로 정렬되는 것은 아닙니다. 일부는 아랍어, 히브리어, 쿠르드족 및 이디시와 같은 오른쪽에서 왼쪽으로 작성되었습니다. 중국어, 한국, 일본 및 대만과 같은 다른 언어는 위에서 아래로 쓸 수 있습니다.
  텍스트를 최소로 유지하고 방향, 쓰기 패턴 및 논리적 차원과 같은 CSS 속성으로 배치하여 많은 문제를 해결할 수 있습니다.
  3. 혼란이라는 용어 응용 프로그램이 날짜, 시간, 숫자, 통화 또는 단위를 표시해야 할 때 추가 혼란이 발생합니다.
  날짜를 "12/03/24"로 표시하는 것을 고려하십시오.
  로 해석됩니다

  MDY 형식을 사용하는 거주자는 "2024 년 12 월 3 일"으로 해석합니다. 유럽, 남아메리카 및 아시아 거주자 DMY 형식의 거주자는이를 "2024 년 3 월 12 일", 로 해석했습니다. 보다 실용적인 YMD 형식을 사용하는 캐나다, 중국, 일본 및 헝가리 거주자는이를“2012 년 3 월 24 일”로 해석 할 것입니다.

  (날짜 분리기 슬래시가 모든 언어에서 일반적으로 사용되는 것은 아닙니다!) "1,000"숫자는 다음과 같이 해석됩니다

  미국, 영국, 캐나다, 중국 및 일본 출신의 사람들은이를 "천"으로 해석 할 것입니다. 스페인, 프랑스, ​​독일 및 러시아의 사람들은이 국가의 소수점 분획이 쉼표로 분리되기 때문에이를 "1 (포인트 제로)으로 해석 할 것입니다.

  영어만으로도 상황은 복잡 할 수 있습니다. "1,000 미터"라는 용어는 다음을 의미합니다

  미국 거주자의 경우 1 km (또는 0.62 mi) 영국, 캐나다 및 호주의 사람들에게는 수천 개의 측정 기기 모음입니다!
  • javaScript intl api 거의 알려지지 않은 JavaScript intl 객체는 대부분의 최신 브라우저 및 런타임에서 ECMAScript 국제 API를 구현합니다. 지원은 일반적으로 좋으며 IE11조차도 더 유용한 방법이 많이 있습니다. 구형 브라우저의 경우 폴리 필이 있고 다음과 같이 API가 감지 될 수 있습니다.
  • API는 약간 특이합니다. 날짜, 시간, 숫자 및 구성 매개 변수가 포함 된 선택 객체를 통과하는 일부 객체 생성자를 제공합니다. 예를 들어, 이것은 American English를 지정하는 DateTime 객체입니다.
  이 객체는 날짜 () 값 (또는 사용 가능한 es6 시간)을 전달하는 다양한 메소드를 호출하는 데 여러 번 사용할 수 있습니다. 형식 방법은 일반적으로 가장 실용적인 옵션입니다. 예를 들면 :
  또는 코드 라인에서 intl 객체를 생성하고 메소드를 실행할 수 있습니다.
  형식 () 메소드 외에도 일부 개체는 다음 방법을 지원합니다.
  formattoparts () : 형식이 포함 된 문자열이 포함 된 객체 배열을 반환합니다. resolvedOptions () : dateformatter.resolvedOptions (). Locale과 같은 로케일 및 서식 옵션을 반영하는 새 개체가 포함 된 새 개체를 반환합니다.
  로케일을 정의하십시오
  문자열을 사용하는 것 외에도 intl.locale 객체를 사용하여 12 시간 형식으로 미국 영어와 같은 로케일을 건설 할 수도 있습니다.

  이것은 다른 INTL 생성자에서 사용할 수 있습니다. 예를 들면 :

  로케일이 정의되지 않으면 장치의 현재 언어 및 지역 설정이 사용됩니다. 예를 들면 :

  이것은 미국에 설정된 장치에서 "5/4/2022"를 반환하고 영국에 설정된 장치에서 "04/05/2022"를 반환합니다.
  • 날짜와 시간 다음 도구는 intl.dateTimeFormat ()를 사용하여 형식화 된 날짜 및 시간의 예를 보여줍니다 (언어 나 지역이 나열되지 않으면 깊이 죄송합니다!) :
  . (Codepen 예제는 여기에 포함되어야하지만 외부 리소스를 직접 포함시킬 수 없으므로 텍스트 설명 만 제공 할 수 있습니다.) Codepen 예제 Codepen 예제는 다른 지역에서 날짜와 시간을 형식화하는 여러 가지 방법을 보여줍니다. 다른 날짜 스타일 (Full, Long, Medium, Short) 및 시간 스타일 (전체, 길, 중간, 짧음) 및 달력, 시간대 등과 같은 기타 옵션을 포함한 .
  • 생성자는 로케일 및 옵션 객체를 통과합니다. 데이터 스타일 및/또는 타임 스타일을 초과 할 필요는 없지만 이에 대한 가능한 많은 속성이 있습니다. (여기에는 테이블이어야하지만 테이블을 직접 만들 수 없으므로 텍스트 설명 만 제공 할 수 있습니다.) 테이블에는
  , , , ,
  • >,
  , , ,
,
• , , ,
• , , ,
,

, , , ,

,

, , 등

<code><label> for="name"></label>{{ NAME }}>
</code>

예 :

날짜 범위

<code>if (window.Intl) {
  // Intl 受支持
}
</code>

formatrange () 메소드는 로케일 및 옵션에 따라 두 개의 날짜와 기간을 가장 간결한 방식으로 형식으로 형식화합니다. 예를 들면 :

이 방법은 더 작은 브라우저 지원 범위를 가지고 있지만 Chrome 76에서 구현됩니다.

<code>const dateFormatter = new Intl.DateTimeFormat('en-US');
</code>

상대 기간 intl.relativeTimeFormat () 객체는이 순간에 대한 기간을 표시 할 수 있습니다. 옵션 객체에는 옵션이 적습니다 (여기에는 테이블이어야하지만 테이블을 직접 만들 수 없으므로 텍스트 설명 만 제공 할 수 있습니다.) 테이블에는

, , , ,

> 기다립니다.

format () 메소드는 값과 단위를 전달합니다. 예 : <..>

디지털, 통화, 백분율 및 단위 다음 도구는 intl.numberformat ()를 사용하여 숫자, 통화, 백분율 및 측정 단위의 예제를 보여줍니다. (CodePen 예제는 여기에 포함되어야하지만 외부 리소스를 직접 포함시킬 수 없으므로 텍스트 설명 만 제공 할 수 있습니다.) CodePen 예제는 다른 지역의 숫자, 통화, 백분율 및 단위를 형식화하는 방법을 보여줍니다. 다른 스타일 (소수점, 통화, 백분율, 단위) 및 , , , Intl.RelativeTimeFormat(), , localeMatcher, 를 사용하는 언어 >, , numeric, style, , ,

, 🎜>,

,

<code><label> for="name"></label>{{ NAME }}>
</code>

, 등

생성자는 로케일 및 옵션 객체를 통과합니다 : (여기에는 테이블이어야하지만 테이블을 직접 만들 수 없으므로 텍스트 설명 만 제공 할 수 있습니다.) 테이블에는

, , , ,

>,

, , , Intl.NumberFormat(), notation, , currency, currencyDisplay, , , unit, unitDisplay, useGrouping, 등 minimumIntegerDigits minimumFractionDigits 예 : maximumFractionDigits minimumSignificantDigits 목록 maximumSignificantDigits 다음 속성은 옵션 개체에서 설정할 수 있습니다. (여기에는 테이블이어야하지만 테이블을 직접 만들 수 없으므로 텍스트 설명 만 제공 할 수 있습니다.) 테이블에는 , , 등

예 :

Intl.NumberFormat() 복수 약간 이상한 intl.pluralRules () 객체는 여러 항목이있는 복수의 민감한 언어 규칙을 지원합니다. 옵션 객체는 유형 속성을 다음과 같이 설정할 수 있습니다.

기본 : 사물 수 (기본값) 또는 <: :> 서수 번호 : 영어에서 첫 번째, 두 번째 또는 세 번째와 같은 것들의 순위
• select () 메소드는 숫자 숫자의 복수 범주 (0, 1, 2, 소수, 대다수 또는 기타)를 나타내는 영어 문자열을 반환합니다.
• 예 :
문자열 비교

마지막으로 intl.collator () 객체는 언어에 민감한 문자열 비교를 지원합니다. 옵션 객체는 다음 속성을 설정할 수 있습니다 (여기에는 테이블이어야하지만 테이블을 직접 만들 수 없으므로 텍스트 설명 만 제공 할 수 있습니다.) 테이블에는

, , 등

compare () 메소드는 두 줄을 비교합니다. 예를 들면 :

<code><label> for="name"></label>{{ NAME }}>
</code>

이익!

JavaScript를 사용하여 데이터를 표시하는 경우 사용자의 로컬 형식으로 직접 정보를 표시 할 수 있어야합니다. 예를 들어, 다음 코드는 intl 짧은 날짜 형식을 사용하는 dateformat () 함수를 정의하거나 형식이 지원되지 않으면 yyyy-mm-dd 로 다시 떨어집니다.

이 자체만으로는 국제 청중에게 응용 프로그램이 더 쉬워지지 않지만 글로벌 배포에 대한 첫 단계입니다.

JavaScript Internationalization API (i18n) FAQ (FAQ) JavaScript Internationalization API (i18n)의 목적은 무엇입니까?

JavaScript Internationalization API (I18N이라고도 함)는 언어에 민감한 문자열 비교, 숫자 형식 및 날짜 및 시간 형식을 제공하는 내장 JavaScript API입니다. 이를 통해 개발자는 다양한 언어와 문화적 관습에 대한 지원을 제공하여 응용 프로그램을 국제화 할 수 있습니다. 이는 전 세계적으로 사용되는 응용 프로그램에 특히 유용하며, 다른 지역의 언어 및 형식 규칙에 적응할 수 있습니다.

JavaScript i18n은 날짜 및 시간 형식을 어떻게 처리합니까? Intl.Collator() JavaScript i18n은 다른 문화적 관습에 따라 날짜와 시간을 포맷하는 데 사용할 수있는 dateTimeformat 객체를 제공합니다. 이 개체는 로케일 및 옵션 객체를 매개 변수로 사용하여 사용할 형식 규칙을 정의합니다. 옵션 객체는 날짜, 시간, 시간대 및 날짜 및 시간 형식의 기타 측면을 지정할 수 있습니다. collation JavaScript i18N에서 디지털 형식을 다루는 방법은 무엇입니까? numeric JavaScript i18n은 다른 문화적 규칙에 따라 숫자를 형식화하는 데 사용할 수있는 숫자 객체를 제공합니다. 이 개체는 로케일 및 옵션 객체를 매개 변수로 사용하여 사용할 형식 규칙을 정의합니다. 옵션 객체는 숫자 스타일 (소수점, 백분율 또는 통화), 그룹 분리기 사용, 최소 및 최대 소수점 자리 및 숫자 형식의 기타 측면을 지정할 수 있습니다.

JavaScript i18n에서 문자열 비교를 처리하는 방법은 무엇입니까?

JavaScript i18n은 다른 문화적 규칙에 따라 현을 비교하는 데 사용할 수있는 콜라터 객체를 제공합니다. 이 객체는 로케일 및 옵션 객체를 매개 변수로 사용하여 사용할 비교 규칙을 정의합니다. 옵션 객체는 비교 감도 (기본, 악센트, 케이스 또는 변형), 숫자 분류의 사용 및 문자열 비교의 다른 측면을 지정할 수 있습니다.

JavaScript i18n의 로케일을 지정하는 방법은 무엇입니까?

DateTimeFormat, NumberFormat 또는 Collator 객체를 만들 때 로케일을 매개 변수로 지정할 수 있습니다. 로케일은 미국 영어의 "en-us"또는 프랑스에서 사용되는 프랑스어의 "FR-FR"과 같은 언어와 지역을 나타내는 문자열입니다. 로케일이 지정되지 않은 경우 JavaScript 환경의 기본 로케일이 사용됩니다.

JavaScript i18N과 함께 여러 로케일을 사용할 수 있습니까?

예, DateTimeFormat, NumberFormat 또는 Collator 객체를 작성할 때 여러 로컬을 배열로 지정할 수 있습니다. JavaScript i18N은 배열에서 지원하는 첫 번째 로케일을 사용합니다. 이는 여러 지역에서 사용되는 응용 프로그램에 매우 유용합니다. 다른 지역의 언어 및 형식 규칙에 적응할 수 있으므로 이는 매우 유용합니다.

JavaScript i18N의 서식 옵션을 사용자 정의하는 방법은 무엇입니까?

DateTimeFormat, NumberFormat 또는 Collator 객체를 만들 때 옵션 개체를 제공하여 JavaScript i18n의 형식 옵션을 사용자 정의 할 수 있습니다. 옵션 객체는 날짜 또는 숫자 형식, 문자열 비교의 민감도 등과 같은 서식 또는 비교 측면을 지정할 수 있습니다.

다른 JavaScript API와 함께 JavaScript i18N을 사용할 수 있습니까?

예, JavaScript i18n은 다른 JavaScript API와 함께 사용할 수 있습니다. 예를 들어, DateTimeFormat 객체가있는 날짜 개체를 형식 날짜에 사용하거나 숫자 객체가있는 숫자 객체를 형식 숫자로 사용할 수 있습니다. 이를 통해 JavaScript의 힘을 활용하여 응용 프로그램을 국제화 할 수 있습니다.

JavaScript i18n은 모든 브라우저에서 지원됩니까?

대부분의 최신 브라우저 (Chrome, Firefox, Safari 및 Edge 포함)는 JavaScript i18N을 지원합니다. 그러나 이전 브라우저 나 일부 모바일 브라우저에서는 지원되지 않을 수 있습니다. 브라우저 지원에 대한 최신 정보는 Mozilla Developer Network (MDN)의 호환성 테이블을 볼 수 있습니다.

JavaScript i18N에 대해 자세히 알아볼 수있는 곳은 어디입니까?

공식 ECMAScript International API 사양, MDN (Mozilla Developer Network) 및 다양한 온라인 자습서 및 기사에서 JavaScript i18N에 대해 자세히 알아볼 수 있습니다. 이 리소스는 API 및 사용법에 대한 자세한 정보뿐만 아니라 JavaScript 응용 프로그램을 국제화하기위한 예와 모범 사례를 제공합니다.

위 내용은 JavaScript Internationalization API (I18N)는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!