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

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"})

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

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

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

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

일반 영어의 JavaScript

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