682
 

Мультиязычность в JavaScript

Приветствую вас дорогие читатели! Сегодня я представляю вашему вниманию скрипт, способный обеспечить мультиязычность приложениям, написанным на JavaScript. Сам скрипт создан с использованием jQuery, однако при желании, его можно легко переделать на чистые JavaScript функции или под другую библиотеку – Mootols, Prototype и т.п.

Суть работы скрипта заключается в том, что стандартный объект String расширяется двумя функциями для переключения языков. Функция String.localize() возвращает перевод текущей строки, а String.localize_with_args() возвращает перевод строки с заменой указанных в параметрах фраз. Обе эти переменные имеют псевдонимы String.l() и String.l_with_args() соответственно.

Собственно языковые переменные хранятся в виде пары “ключ” – “значение” в объектах отдельно для каждого языка.

Пример инициализации языковых переменных:

Globalite.language("en", {
	welcome: "Hello world",
	goodbye: "Good bye",
	how_are_you: "How are you",
	see_you: "See you later"
});

Пример применения функции localize():

"welcome".l()
"welcome".l("Hello world") // Показывает "Hello World" если ключ "welcome" не найден

Пример применения функции localize_with_args():

Globalite.language("ru", {
  welcome: "Привет {name}"
});

Globalite.language("en", {
  welcome: "Hi {name}"
});

"welcome".l_with_args({ name: "Dima" })
"welcome".l_with_args({ name: "Dima" }, "Hi Dima") // возвращает Hi Dima если ключ не найден

Текущее значения языка установлено в виде атрибута lang тега html:

<html lang="ru">

Для того, чтобы изменить текущий язык, нужно воспользоваться функцией Globalite.setLang():

Globalite.setLang("en");	// переключаем язык на английский

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

Ну и в конце хочу выразить признательность Nicolas Merouze за этот скрипт.

Смотреть демо скачать скрипт

Добавить в закладки:
Maklay.com - Большой каталог товаров для спорта и активного отдыха

Комментарии на “Мультиязычность в JavaScript”

  1. А вам не кажется что хранение переводов всех необходимых ключей во всех локалях – задача несколько тяжеловатая для client-side? Я считаю что возможность переключения локали прямо в JS коде – задача надуманная и не востребованная на практике.

  2. @andrey
    Это зависит от количества ключей. Кроме того, при желании можно подгружать локали через ajax, сделать это на jquery совсем не проблема.

  3. Для чего там eval ?

  4. @MiRacLe
    Я не нахожу никакого eval

  5. @andrey
    eval там в функции l_with_args затесался

    @MiRacLe
    Спасибо, меткое замечание, можно ведь и без eval обойтись. Не обратил на это внимание. Я сейчас исправил на следующее:
    localized = localized.replace(new RegExp(”\\{”+i+”\\}”), arg);

  6. а RegExp зачем?

    var replaceme = “string”;
    “test {string}”.replace(”{” + replaceme + “}”,”stroke”);

  7. @MiRacLe
    Ну это уже привычка :)

  8. имхо, локализацию лучше делать на стороне сервера, а не клиента

  9. Ситуации разные бывают. Например приведенный мной пример – программа для изучения иностранных языков, в которой просто щелкаешь по кнопкам и сразу получаешь перевод. Мне кажется в этом случае такой скрипт как раз к месту.

  10. Мультиязычность в JS нужна, когда JS генерит какой-либо контент – тогда без модуля локализации не обойтись. Конечно, лучше генерировать контент на сервере, однако на практике такое бывает довольно часто.

    @admin
    Программа для изучения иностранных языков – слишком узкое применение для i18n модуля. Будь оно на самом деле так – то и скрипт не стоило бы выделать в отдельный файл.

  11. А я мультиязычность реализовал через CSS. Обошёлся в общем случае без фреймфорков.

    [div class="lang lang_ru"]Это русский текст[/div]
    [div class="lang lang_en"]This is english text[/div]

    И есть два стиля, которые переключаются через javascript. В одном указано, что русский не видно, а в другом – что английский не видно.

    Картинки и кнопки разные приходится вставлять по два раза
    [div class="lang lang_ru"][img src="img.jpg" alt="Подпись картинки по-русски" /][/div]
    [div class="lang lang_en"][img src="img.jpg" alt="Image label on English" /][/div]

    Преимущество: поисковики такие мультиязычные страницы будут индексировать сразу и на нескольких языках.

    Рабочий пример тут : http://mlp.udobnee.net/

  12. @pavel
    Ну если у вас контент генерится на сервере, то такой прием не оправдан – т.к. это дополнительный трафик (~ трафик * количество локалей).
    Если же контент генерится скриптом, то он поисковикам пока еще недоступен.

  13. @admin
    Пожалуйста, добавьте сообщение о том что капча введена некорретно, а то и в форме поле не омечено как обязательное и сообщения нету – после сабмита белый экран и все. Как-то не юзер-френдли.

  14. @andrey
    Спасибо большое. Насчет капчи, это я просмотрел. Исправлю.

Оставить комментарий

JSToolbox создан на основе WordPress