JavaScript에서 국제화 (I18N)를 구현하는 방법

키 포인트

국제화 (I18N)는 현지 언어와 문화에 적응할 수 있도록 제품과 서비스를 만들거나 변환하는 과정입니다. 현지화 (L10N)는 특정 지역 또는 언어에 대해 국제화 된 소프트웨어를 조정하는 프로세스입니다. Globalimaze는 국제화 및 현지화를 위해 jQuery 팀의 구성원이 개발 한 JavaScript 라이브러리입니다. 공식 유니 코드 CLDR JSON 데이터를 사용하고 모든 주요 브라우저를 지원하며 디지털 포맷 및 구문 분석, 날짜 및 시간 형식 및 구문 분석, 상대 시간 형식, 통화 서식, 메시지 형식, 복수 지원 및 단위 지원 등과 같은 기능을 제공합니다.

JavaScript는 국제화 API (ECMA-402라고도 함)를 통해 국제화에 대한 기본 지원을 제공합니다. 그러나 Globalize는 브라우저 간의 낮고 일관되지 않은 지원으로 인해 사용하지 않았습니다.

globalize는 각 함수에 대한 모듈을 제공하는 NPM을 통해 설치할 수 있으므로 개발자는 필요한 모듈 만 사용할 수 있습니다. 라이브러리의 로케일 데이터를 호스팅하거나 포함하지 않음으로써 코드와 콘텐츠를 분리합니다.
• GlobaliMase를 사용하여 개발자는 날짜, 숫자 및 통화 값, 구문 분석 번호 및 형식 상대 날짜를 형식화 할 수 있습니다. 이 라이브러리의 문서는 이러한 기능 및 기타 기능을 사용하는 방법에 대한 자세한 정보를 제공합니다.
• 이 기사는 Julian Motz, Panayiotis Velisarakos, Vildan Softic 및 Tim Severien에 의해 검토되었습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다!
당신이 개발자이고 다음 핫 제품을 작업하고 있다고 가정합니다. 고객은 귀하의 제품을 좋아하며 모든 소셜 네트워크에서 매우 높은 등급을 받았습니다. 더 나은 CEO는 새로운 시장으로 확장하기 위해 10,000,000 달러의 자금을 수상했습니다. 그러나 글로벌가되기 전에 제품을 업데이트하여 다양한 언어, 통화, 날짜 형식 등을 지원해야합니다. 어떻게 생각하나요? 귀하와 귀하의 팀은이를 달성 할 책임이 있습니다. 기술적 인 관점에서 소프트웨어는 국제화 된 다음 현지화해야합니다.
• 국제화 (
i18n 라고도 함)는 제품과 서비스를 만들거나 변환하여 특정 현지 언어와 문화에 쉽게 적응할 수 있도록하는 과정입니다. 현지화 (라고도 함)는 특정 지역 또는 언어에 대해 국제화 된 소프트웨어를 조정하는 프로세스입니다. 다시 말해, 국제화는 소프트웨어가 여러 배양 (통화 형식, 날짜 형식 등)을 지원할 수있는 과정이며, 현지화는 하나 이상의 문화를 구현하는 과정입니다.

이 두 프로세스는 종종 다른 국가에 관심이있는 회사에서 채택되지만 자체 웹 사이트에서 일하는 개별 개발자에게도 도움이 될 수 있습니다. 예를 들어, 나는 아마도 이탈리아이고 웹 사이트를 소유하고있을 것입니다. 내 웹 사이트는 현재 영어로되어 있지만 국제화 한 다음 이탈리아어에 현지화하기로 결정할 수 있습니다. 이것은 이탈리아 원주민이고 영어에 익숙하지 않은 사람들에게 매우 유익합니다.

이 기사에서는 국제화 및 현지화를 위해 jQuery 팀의 일부 구성원이 개발 한 JavaScript 라이브러리 인 Globalize를 소개합니다. 이 기사에서 시연 된 모든 코드 스 니펫은 Github 저장소에서 찾을 수 있습니다.

그러나 전 세계적으로 탐구하기 전에 프로젝트 리더 Rafael Xavier de Souza의 말로 i18n에 대한이 짧은 소개를 끝내고 싶습니다 :

개발자들은 i18n이 영어가 아닌 언어로 번역하는 것이라고 생각합니다. I18N은 단순히 현재 응용 프로그램을 여러 국가 또는 시장으로 확장해야합니다. 나는 i18N이 "말하기"에 관한 것이라고 설명하려고 노력했다. 모든 앱은 어느 시점에서 사용자와 "대화"해야합니다. 사용자와 대화하려면 응용 프로그램에는 복수 지원, 성별 변동, 날짜 서식, 디지털 형식 및 통화 형식이 필요할 수 있습니다. 영어에서도 일을 올바르게하는 것은 까다로울 수 있습니다.

전 세계적으로 무엇이 있습니까?

globalimaze는 공식 유니 코드 CLDR JSON 데이터를 활용하는 국제화 및 현지화를위한 JavaScript 라이브러리입니다. 이 라이브러리는 오픈 소스이며 Rafael Xavier de Souza와 JQuery 팀의 일부 구성원이 개발했습니다.

이용 가능한 로케일 데이터의 가장 크고 가장 포괄적 인 표준 저장소 인 CLDR (Unicode Consortium 기반 유니 코드 컨소시엄 데이터 저장소). 따라서 로케일 데이터를 포함하는 라이브러리와 달리 Globalize를 사용하는 경우 항상 최신 CLDR 데이터를 쉽게 사용할 수 있습니다.

이 라이브러리는 브라우저 및 node.js 모듈에 적합합니다. 1.0은 IE9, Chrome, Firefox, Safari 5.1 및 Opera 12.1을 포함한 모든 주요 브라우저를 지원합니다.

이 라이브러리의 주요 기능은 다음과 같습니다

디지털 형식 및 구문 분석

날짜 및 시간 형식 및 구문 분석

상대 시간 형식 통화 형식 메시지 형식 복수지지 단위 지원

내가 전 세계에 가장 좋아하는 것은 각 기능에 대한 모듈을 제공한다는 것입니다. 개발자는 전체 라이브러리가 필요하지 않을 수 있으므로 필요한 모듈을 선택할 수 있습니다. 또 다른 흥미로운 특징은 다른 라이브러리와 달리 라이브러리에있는 로케일 데이터를 호스팅하거나 포함시키지 않음으로써 컨텐츠와 별도의 코드를 유지한다는 것입니다. 그러나 Global이 유일한 옵션은 아닙니다. 다른 대안에 관심이 있다면 Rafael은 전용 페이지를 가지고 있습니다. 가장 주목할만한 대안은 i18next입니다. Globalize 및 JavaScript Internationalization api 이것은 여러분 중 일부에게는 놀랍지 만 JavaScript는 국제화 API (ECMA-402라고도 함)를 통해 국제화에 대한 기본 지원을 제공합니다. INTL 객체는 국제화 된 API의 네임 스페이스 역할을하는 창 객체에서 사용 가능한 객체입니다. 이 API는 현재 숫자와 날짜를 형식화하고 특정 언어로 문자열을 비교하는 방법을 제공합니다. 이제 국제 API의 존재를 알았으므로 Globalize가 무대 뒤에서 그것을 사용하고 있다고 생각할 수 있습니다. 이 접근법은 날짜 및 숫자 형식의 성능을 확실히 향상시킬 것입니다. 그러나 브라우저 간의 지원이 낮고 일관되지 않기 때문에 라이브러리는이를 사용하지 않습니다.

나는 당신이 세계화에 대해 계속 논의하기 전에 국제 API를 경험하기를 원합니다.

형식 날짜 내가 보여줄 첫 번째 예는 국제 API를 사용하여 여러 지역의 날짜 인 IT, US 및 GB입니다.

이 예에서는 지정된 로케일 ( "IT-IT", "EN-US"및 "EN-GB")을 사용하여 DateTimeFormat 생성자를 사용하여 새 날짜 Formatter를 만듭니다. 그런 다음 형식 메소드를 호출하여 날짜 개체를 포맷합니다.

위의 코드는 jsbin으로도 사용할 수 있습니다.

형식 숫자

앞에서 언급했듯이 API를 사용하면 숫자를 형식화 할 수 있습니다. 다음은 NumberFormat 생성자를 사용하는 예입니다

이 두 번째 코드 스 니펫 (JSBIN으로도 사용할 수 있음)의 출력을 살펴보면 이탈리아에서는 미국과 영국과 다른 숫자에 대한 형식이 다르다는 것을 알 수 있습니다.

앞에서 언급 했듯이이 API에 대한 지원은 낮지 만 사용하려면 응용 프로그램 에서이 폴리 필을 사용할 수 있습니다.

이제 국제화와 현지화가 어떻게 작동하는지 더 잘 이해 했으므로 전 세계에 대해 논의합시다.

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

설치 및 globaliMaze <🎜 🎜> globalize는 npm을 통해 쉽게 설치할 수 있습니다

이 명령은 또한 CLDR 데이터를 설치합니다. CLDR 데이터도 설치합니다. CLDR 데이터도 설치합니다. CLDR 데이터도 설치합니다. CLDR 데이터도 설치합니다.이 명령은 Globalize가 사용할 로케일 데이터 (예 : 숫자 또는 날짜에 대한 언어 형식)를로드하는 데 필요한 CLDR 데이터도 설치합니다. 이 두 패키지를 설치 한 후 라이브러리를 사용할 수 있습니다.

참고 : 다음 예제는 노드가 사용된다고 가정합니다. 브라우저에서 GlobaliMase를 사용하는 데 관심이 있다면 프로젝트 홈페이지의 예로 시작하는 것이 좋습니다. Webpack 예제를 사용하면 신속하게 일어나고 실행할 수 있습니다.

다음으로, 나는 Globalimaze를 사용하여 이전 섹션에 나열된 두 개의 코드 스 니펫을 다시 작성합니다.

<<> 형식 날짜 <🎜 🎜> 첫 번째 예제는 다음과 같이 구현할 수 있습니다

// 2016 年 6 月 30 日
var date = new Date(2016, 5, 30);

// "30/6/2016"
console.log(new Intl.DateTimeFormat('it-IT').format(date));

// "6/30/2016"
console.log(new Intl.DateTimeFormat('en-US').format(date));

// "30/06/2016"
console.log(new Intl.DateTimeFormat('en-GB').format(date));

간단하지만 위의 코드를 사용하면 몇 가지 주제를 다룰 수 있습니다. 처음으로 Globalize를 사용했을 때 CLDR 데이터에 사용되는 일부 언어 코드가 두 글자 만 사용한다는 것이 약간 이상하다는 것을 알았습니다. 일관성을 유지하기 위해 모든 로케일이 짧은 버전 (예 : "IT"및 "en")이 아닌 전체 버전의 ISO 3166 표준 (예 : "IT-IT"및 "EN-US")을 요구하기를 원합니다. 이탈리아 인이 이탈리아 (이탈리아에서 시작된 이탈리아에서 시작)라고 가정하는 것은 합리적이지만, 이것은 영어에 혼란스러워합니다. "en"은 영국 영어가 아닌 미국 영어를 의미합니다. 나와 같은 실수를하지 않으려면이 테이블을 확인하는 것이 좋습니다.

개요 가치가있는 또 다른 개념은 EntiresUpplemental 방법 (코드의 세 번째 문)입니다. 이것은 국가 또는 로케일 데이터에 대한 보충 정보가 포함 된 모든 파일을로드합니다. 예를 들어, 전화 국가 코드 (39 개 이탈리아), 인구, 일부 잘 알려진 약어, 다른 국가의 통화 철자 등

내가 소개하고 싶은 마지막 요점은 Entiremainfor 메소드를 호출하는 네 번째 성명서입니다. 이를 통해 필수 국가 (이탈리아, 미국 및 영국의 예에서)에 대한 로케일 데이터를로드 할 수 있습니다.

<<> 형식 숫자

서식 숫자의 경우 Globalize는 FormatNumber 메소드를 제공합니다. 이 방법의 서명은

입니다

여기서 값이 형식화 될 숫자 인 경우 옵션은 사용자 정의 메소드 리턴 값의 개체입니다. 지정할 수있는 옵션의 일부 예는 다음과 같습니다

라운드 : 숫자를 반올림하는 방법을 정의합니다. 그 가치는 다음 중 하나 일 수 있습니다 : 천장, 바닥, 둥근 또는 잘린 <🎜

사용 그룹화 : 그룹화 구분기를 사용해야하는지 여부를 나타내는 부울 값

MinimumIntegerDigits : 사용할 정수 숫자의 최소 수를 나타내는 비 음성 정수.

var number = 1302.93;

// "1.302,93"
console.log(new Intl.NumberFormat('it-IT').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('us-US').format(number));

// "1,302.93"
console.log(new Intl.NumberFormat('en-GB').format(number));

사용 가능한 옵션의 전체 목록은 문서에서 찾을 수 있습니다.

이제 우리는 형식의 형식 방법에 대해 더 많이 배웠으므로 실제로 어떻게 적용되는지 살펴 보겠습니다.

통화 값을 형식화하십시오 라이브러리는 통화 값을 형식화하는 데 도움이되는 CurrencyFormatter 메소드를 제공합니다. 이 메소드는 많은 옵션을 지원하므로 숫자를 반올림할지 여부, 통화의 상징 (예 : "$") 또는 코드 (예 : "USD") 등을 정의 할 수 있습니다.
• CurrencyFormatter ()를 사용하는 예는 다음과 같습니다
<<> 숫자를 분석
• 숫자 해결은 사용자 입력을 처리 할 때와 같이 수행해야 할 작업이 될 수 있습니다. 다음 예는 이것을 수행하는 방법을 보여줍니다
형식 상대 날짜 <🎜 🎜> 최신 웹 애플리케이션에서 또 다른 매우 일반적인 기능은 상대적인 용어로 시간과 날짜를 표시하는 것입니다. 예를 들어, 하루의 전체 날짜를 표시하는 대신 "어제"및 "마지막 주"와 같은 레이블을 찾을 수 있습니다. 전 세계적 으로이 작업은 RelativeTimeFormatter 방법으로 쉽게 달성 할 수 있습니다. 다음은 사용법의 예입니다.

• // 2016 年 6 月 30 日
  var date = new Date(2016, 5, 30);
  
  // "30/6/2016"
  console.log(new Intl.DateTimeFormat('it-IT').format(date));
  
  // "6/30/2016"
  console.log(new Intl.DateTimeFormat('en-US').format(date));
  
  // "30/06/2016"
  console.log(new Intl.DateTimeFormat('en-GB').format(date));

  globaliment는이 기사에서 다루지 않은 다른 많은 방법을 제공합니다. 그러나 여기에 제시된 주제는 시작하는 데 도움이되는 충분한 정보를 제공해야합니다. 또한이 라이브러리의 문서는 매우 상세합니다.
  결론 이 기사에서는 국제화와 현지화가 무엇인지, 제품 시장 확장에 매우 중요한 이유에 대해 논의합니다. 지원되는 기능을 언급하여 국제화 된 API를 간단히 소개 한 다음 사용량의 몇 가지 예를 보여주었습니다.

  이 기사의 두 번째 부분에서 jQuery 팀이 국제화 및 현지화를 위해 개발 한 JavaScript 라이브러리 인 Globalize를 소개합니다. 라이브러리는 매우 강력하며 프로젝트를 국제화하는 데 필요한 모든 방법과 같이 제공됩니다. 도서관이 시간을 절약한다고 생각되면 프로젝트에 기여하여 자유롭게 돌려주십시오.

  이 기사에서 보여준 모든 코드 스 니펫은 GitHub 저장소에서 찾을 수 있음을 다시 말해줍니다.

  JavaScript (i18n)의 국제화에 대한 FAQ (FAQ) JavaScript에서 국제화 (i18n)의 중요성은 무엇입니까?

  국제화는 종종 i18N으로 약칭 된 것은 특히 글로벌 청중을위한 응용 프로그램을 만들 때 웹 개발의 중요한 측면입니다. 여기에는 여러 언어 및 지역적 차이를 지원하기 위해 웹 사이트 또는 응용 프로그램을 준비하는 것이 포함됩니다. 이것은 웹 개발에 널리 사용되는 언어 인 JavaScript에서 특히 중요합니다. JavaScript에서 i18N을 구현함으로써 개발자는 다양한 사용자 그룹을 충족하는 응용 프로그램을 만들어 사용자 경험과 접근성을 향상시킬 수 있습니다. 또한 애플리케이션을 현지화하는 데 도움이되며 응용 프로그램의 적용 범위와 유용성을 크게 향상시킬 수 있습니다.

  i18n은 JavaScript에서 어떻게 작동합니까?

  JavaScript의 i18N은 개발자가 응용 프로그램 코드에서 로케일 특정 문자열 또는 메시지를 외부화 할 수있게함으로써 작동합니다. 그런 다음이 문자열은 별도의 파일로 저장되며 종종 리소스 패키지라고합니다. 각 리소스 패키지는 특정 로케일에 해당합니다. 응용 프로그램이 실행되면 사용자의 로케일을 인식하고 해당 리소스 패키지를로드합니다. 이런 식으로 응용 프로그램은 사용자가 선호하는 언어로 메시지와 내용을 표시 할 수 있습니다.

  JavaScript에서 i18N을 구현하기위한 인기있는 라이브러리는 무엇입니까?

  JavaScript에서 i18N을 구현하는 데 사용할 수있는 여러 라이브러리가 있습니다. 가장 인기있는 라이브러리에는 i18next, i18n-JS 및 Globalize가 포함됩니다. 이 라이브러리는 언어 탐지, 복수화, 수치 및 날짜 형식 등과 같은 국제화를 촉진하기위한 다양한 기능을 제공합니다. 또한 React, Angular 및 Vue.js와 같은 다양한 프레임 워크를 지원하므로 웹 개발을위한 다양한 도구가됩니다.

  내 JavaScript 프로젝트에서 i18N-JS 라이브러리를 사용하는 방법은 무엇입니까?

  JavaScript 프로젝트에서 i18N-JS 라이브러리를 사용하려면 먼저 NPM 또는 원사를 사용하여 설치해야합니다. 일단 설치되면 프로젝트로 가져 와서 기능을 사용하기 시작할 수 있습니다. 이 라이브러리는 문자열, 서식 번호 및 날짜 등을 변환하는 기능을 제공합니다. 또한 사용자의 로케일에 따라 라이브러리가 이러한 파일을로드 할 수있는 별도의 JSON 파일로 번역을 정의 할 수도 있습니다.

  라이브러리를 사용하지 않고 JavaScript에서 i18n을 구현할 수 있습니까?

  예, i18n은 라이브러리를 사용하지 않고 JavaScript로 구현할 수 있습니다. 코드에서 로케일 관련 문자열을 수동으로 외부화하고 별도의 파일에 저장하면 수행 할 수 있습니다. 그러나 더 큰 응용 프로그램의 경우이 접근 방식은 시간이 많이 걸리고 복잡 할 수 있습니다. 라이브러리를 사용하여 프로세스를 단순화하고 응용 프로그램 국제화를 향상시키는 추가 기능을 제공합니다.

  i18n의 복수화를 다루는 방법은 무엇입니까?

  I18n의 복수화를 처분하는 것은 다른 언어의 다른 복수 규칙으로 인해 까다로울 수 있습니다. 그러나 많은 i18N 라이브러리는 다원화를 처리하는 능력을 제공합니다. 예를 들어, I18N-JS 라이브러리는 사용자의 로케일에 따라 복수 형태를 처리 할 수있는 복수화 기능을 제공합니다.

  내 응용 프로그램의 국제화를 테스트하는 방법은 무엇입니까?

  응용 프로그램의 국제화 테스트에는 응용 프로그램이 사용자의 로케일을 기반으로 다른 언어로 컨텐츠와 형식을 올바르게 표시하는지 확인해야합니다. 이는 브라우저에서 로케일 설정을 수동으로 변경하거나 자동 테스트 도구를 사용하여 수행 할 수 있습니다. 번역 부족이나 잘못된 복수형 형태와 같은 에지 케이스를 확인하는 것도 중요합니다.

  i18n에서 날짜 및 번호 형식을 처리하는 방법은 무엇입니까?

  날짜 및 숫자 형식은 지역마다 상당히 다를 수 있습니다. 많은 I18N 라이브러리는 사용자의 로케일에 따라 날짜와 숫자를 포맷하는 기능을 제공합니다. 예를 들어, i18N-JS 라이브러리는 이러한 작업을 처리 할 수있는 FormatDate 및 FormatNumber 기능을 제공합니다. i18n의 오른쪽에서 왼쪽 (RTL) 언어를 처리하는 방법은 무엇입니까?

  i18N의 오른쪽에서 왼쪽 (RTL) 언어를 처리하려면 사용자의 로케일을 기반으로 응용 프로그램의 레이아웃 및 텍스트 방향을 조정하는 것이 포함됩니다. CSS 및 HTML 속성을 사용하여 수행 할 수 있습니다. 일부 i18N 라이브러리는 또한 RTL 언어를 처리하는 기능을 제공합니다.

  I18N으로 현지화 (L10N)를 다루는 방법은 무엇입니까?

  일반적으로 L10N으로 약칭되는 현지화에는 번역 내용, 서식 날짜 및 숫자 등을 포함한 특정 로케일에 응용 프로그램을 조정하는 것이 포함됩니다. I18N은 여러 로케일을 지원하기 위해 응용 프로그램을 준비하지만 L10N에는 각 특정 로케일에 대해 이러한 조정을 구현해야합니다. 많은 I18N 라이브러리는 또한 현지화를 처리하는 기능을 제공합니다.

  위 내용은 JavaScript에서 국제화 (I18N)를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!