Skip to content

Files

Latest commit

 

History

History
50 lines (35 loc) · 3.48 KB

i18n_ESM.md

File metadata and controls

50 lines (35 loc) · 3.48 KB

Локализация пользовательского интерфейса

Интернационализация - это процесс, который позволяет вашему коду работать во всём мире. Процесс состоит из двух частей: глобализации и локализации.

Globalization - связана с разработкой вашего кода таким образом, чтобы онг мог поддерживать множество комбинаций языка и региона. Такая комбинация известна как культура. Для приложения важно знать как язык, так и культуру, потому что, например, люди в Квебеке и Париже разговаривают на одном языке, но живут в разных регионал и используют разные форматы даты и представления валюты.

International Organization for Standardization (ISO) сформировали коды для всех культур. Например код da-DK указывает на датский язык и регион - Denmark. А код fr-CA указывает на французский язык и регион - Канада.

Локализация - это настройка вашего пользовательского интерфейса таким образом, чтобы он поддерживал конкретный язык, например, чтобы кнопка "Close" стала называться "Fermer" для франкоговорящих пользователей.

Локализация в ESM

Один из подходов локализации пользовательского интерфейса состоит в динамической загрузке файла с сообщениями на нужном языке. Допустим, что у нас есть несколько js-файлов, имя имена которых начинают со "strings_" за которыми следует идентификатор языка: "strings_el.js", "strings_ru.js", "strings_en.js", "strings_fr.js", "strings_it.js"... В каждом файле определены текстовые сообщения:

export const HELLO = "Здравствуйте";

Нам бы хотелось, чтобы в можно было задать язык в качестве параметра командной строки:

node main.js ru

Реализация приложения с поддержкой i18n могла бы выглядеть следующим образом:

const SUPPORTED_LANGUAGES = ['el', 'ru', 'en', 'fr', 'it'];
const selectedLanguage = process.argv[2];

if (!SUPPORTED_LANGUAGES.includes(selectedLanguage)) {
    console.error('The specified language is not supported');
    process.exit(1);
}

const translationModule = `./strings-${selectedLanguage}.js`;
import(translationModule)
    .then((strings) => {
        console.log(strings.HELLO);
    })

В приведённом выше примере корректно используется асинхронная (через Promises) загрузка модуля. Ключевой код вот этот:

import(translationModule)
    .then((strings) => {
        // Модуль загружен!
    })