자바 스크립트 프로젝트의 DIY 다국어

이 간단한 방법으로 웹앱을 국제화합시다

Unsplash에 Artem Beliaikin의 사진

전 세계에 배포하려는 웹앱을 작업 할 때 많은 사람들이 우리 언어를 사용하지 않을 것이라고 생각해야합니다. 그들이 우리를 이해하지 못하면 우리는 많은 사용자를 잃을 수 있습니다.

JavaScript 프로젝트에 대한 경험상 저는 새로운 언어를 추가하거나 기존 문자열을 더 적은 시간에 오류없이 편집 할 수있는 방식으로 가능한 가장 간단한 방법으로 여러 언어를 관리하는 프로세스를 개선했습니다.

다른 언어를 관리하는 방법

이 튜토리얼에서는 언어 파일을 가져 와서 구문 분석하고 사용자 언어로 필요한 문자열을 반환하는 플러그인을 만드는 방법을 배웁니다.

언어 파일 (이 예에서 strings.js 라고 함 )은 기본으로 내 보내진 JavaScript 객체입니다. 객체는 동일한 구조를 가진 다른 객체 인 속성을 가질 수 있습니다. 다음은 strings.js 의 예입니다 .

import months from "./months";
export default {
  account: {
    en: "Account",
    es: "Usuario",
    it: "Utente"
  },
  appName: "My Project",
  cancel: {
    en: "Cancel",
    es: "Cancelar",
    it: "Annulla"
  },
  months
};

export default {
  january: {
    en: "January",
    es: "Enero",
    it: "Gennaio"
  },
  february: {
    en: "February",
    es: "Febrero",
    it: "Febbraio"
  },
  march: {
    en: "March",
    es: "Marzo",
    it: "Marzo"
  },
  april: {
    en: "April",
    es: "Abril",
    it: "Aprile"
  },
  may: {
    en: "May",
    es: "Mayo",
    it: "Maggio"
  },
  june: {
    en: "June",
    es: "Junio",
    it: "Giugno"
  },
  july: {
    en: "July",
    es: "Julio",
    it: "Luglio"
  },
  august: {
    en: "August",
    es: "Agosto",
    it: "Agosto"
  },
  september: {
    en: "September",
    es: "Septiembre",
    it: "Settembre"
  },
  october: {
    en: "October",
    es: "Octubre",
    it: "Ottobre"
  },
  november: {
    en: "November",
    es: "Noviembre",
    it: "Novembre"
  },
  december: {
    en: "December",
    es: "Diciembre",
    it: "Dicembre"
  }
};

따라서 선택한 언어로 사용자에게 문자열을 전달하려면 새 파일 lang.js 에서 getStrings 라는 함수를 만들어야합니다 . 이 함수는 이전에 선언 된 strings.js 객체 를 구문 분석하고 선택한 언어의 문자열 만 포함하는 객체를 반환합니다. 예를 들어 "it"(이탈리아어)을 선택하면 반환되는 객체는 다음과 같습니다.

{
  account: "Utente"
  appName: "My Project",
  cancel: "Annulla"
  months: {
    january: "Gennaio",
    february: "Febbraio",
    march: "Marzo",
    april: "Aprile",
    may: "Maggio",
    june: "Giugno",
    july: "Luglio",
    august: "Agosto",
    september: "Settembre"
    october: "Ottobre",
    november: "Novembre",
    december: "Dicembre"
  }
}

const getStrings = (string, lang) => {
  let res = {};
Object.entries(string).forEach(([key, value]) =>
    res[key] = !value[lang] && typeof value === "object"
      ? getStrings(value, lang)
      : value[lang] || value
  );
return res;
};

그렇지 않으면 값을 입력으로 전달 하는 getStrings 함수 (재귀 적으로)를 호출 하고 선택한 언어는 물론 다시 선택합니다.

현재 사용자 언어를 검색하고 프로젝트에서 사용

대부분의 경우 사용자가 수동으로 언어를 선택하지 않습니다. 브라우저 설정에서 가져올 수 있기 때문입니다. 이를 위해 lang.js에 다음 줄을 추가합니다 .

const langs = [
  "en",
  "es",
  "it"
];
let curLang = navigator.language.split("-")[0];
!langs.includes(curLang) && (curLang = "en");

그런 다음 파일의 끝에서 반환 된 객체를 내 보냅니다.

import strings from "./strings";
// previous code
export default getStrings(strings, curLang);

import _s from "./lang";
document.write(_s.cancel); // prints Annulla
document.write(_s.month.september); // prints Settembre

import strings from "./strings";
const langs = [
  "en",
  "es",
  "it"
];
let curLang = navigator.language.split("-")[0];
!langs.includes(curLang) && (curLang = "en");
const getStrings = (string, lang) => {
  let res = {};
  Object.entries(string).forEach(([key, value]) =>
    res[key] = !value[lang] && typeof value === "object"
      ? getStrings(value, lang)
      : value[lang] || value
  );
  return res;
};
export default getStrings(strings, curLang);

문자열에 변수를 추가하려면 새 함수를 만들고 내보낼 수 있습니다. 예를 들어, 우리는 그것을 formatString 이라고 부릅니다 .

export const formatString = (s, variables) => {
  const regex = new RegExp(
    '{(' + Object.keys(variables).join('|') + ')}',
    'g'
  );
return s.replace(regex, (m, i) => variables[i] || m);
};
  1. strings.js에 문자열 추가 : 예 :greetings: "Hi, {username}"
  2. formatString 함수를 가져 와서 다음과 같이 사용하십시오.formatString(_s.greetings, {username: "Andrea"})

기사에 대한 질문이 있거나 변경 사항을 제안하려면 언제든지 의견을 작성하거나 저에게 직접 연락하십시오.

늘 그렇듯이 제 영어에 대해 사과하지만 제 모국어가 아닙니다.

모두 감사하고 더 많은 기사를 위해 저를 따르십시오!

내 다른 기사 중 일부는 다음과 같습니다.

Svelte에서 라우터를 만드는 방법 페이지 레이아웃을위한 재사용 가능한 Svelte 구성 요소 만들기

일반 영어의 JavaScript

이 기사가 마음에 드 셨나요? 그렇다면 YouTube 채널 인 Decoded구독하여 더 많은 유사한 콘텐츠를 얻으십시오 !

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.