简体   繁体   中英

Translation in JavaScript like gettext in PHP?

I am using gettext in my PHP code, but I have a big problem. All my JavaScript files are not affected by the translation, can somebody tell me an easy way to get the translations in the chosen language into JavaScript as well.

The easiest way is having a PHP file write the translations from gettext into JavaScript variables.

js_lang.php:

word_hello = "<?php echo gettext("hello"); ?>"
word_world = "<?php echo gettext("world"); ?>"
word_how_are_you = "<?php echo gettext("how_are_you"); ?>"

and then include it:

<script type="text/javascript" src="js_lang.php"></script>

I would also recommend this method in conjunction with the translation plugins S.Mark mentions (which are very interesting!).

You can define the dictionary in the current page's header, too, without including an external file, but that way, you would have to look up and send the data on every page load - quite unnecessary, as a dictionary tends to change very rarely.

I generally export the translations in a JavaScript structure:

var app = {};
var app.translations = {
  en: {
    hello: "Hello, World!",
    bye: "Goodbye!"
  },
  nl: {
    hello: "Hallo, Wereld!",
    bye: "Tot ziens!"
  }
};

The current language of the page texts can be defined using: <html xml:lang="en" lang="nl">

This can be read in JavaScript:

var currentLanguage = document.documentElement.lang || "en";
app.lang = app.translations[ currentLanguage ] || app.translations.en;

And then you can write code like this:

alert( app.lang.hello );

Optionally, a i18n() or gettext() function can bring some intelligence, to return the default text if the key does not exist). For example:

function gettext( key )
{
  return app.lang[ key ] || app.translations.en[ key ] || "{translation key not found: " + key + "}";
}

Try, jQuery i18n or jQuery localisation

An example for jQuery i18n, and of course you need to generate JSON based dictionary from language file from php

var my_dictionary = { 
    "some text"  : "a translation",
    "some more text"  : "another translation"
}
$.i18n.setDictionary(my_dictionary);


$('div#example').text($.i18n._('some text'));

JSGettext ( archived link ) is best implementation of GNU gettext spec. First download JSGETTEXT package and include in your page /js/Gettext.js

<?php
$locale = "ja_JP.utf8";
if(isSet($_GET["locale"]))$locale = $_GET["locale"];
?>
<html>
<head>
<link rel="gettext" type="application/x-po" href="/locale/<?php echo $locale ?>/LC_MESSAGES/messages.po" />
<script type="text/javascript" src="/js/Gettext.js"></script>
<script type="text/javascript" src="/js/test.js"></script>
</head>
<body>
Test!
</body>
</html>

javascript code for example

window.onload = function init(){
var gt = new Gettext({ 'domain' : 'messages' });
alert(gt.gettext('Hello world'));
}

For reference find below link. It's working fine without converting .js file to .php.

Click here

You can make your life much easier if you get rid of bad habit to use string literals in your code. That is, instead of

 alert("Some message")

use

alert($("#some_message_id").text())

where "#some_message_id" is a hidden div or span generated on the server side.

For JavaScript implementation of GNU gettext API these links can be also useful:
http://tnga.github.io/lib.ijs
http://tnga.github.io/lib.ijs/docs/iJS.Gettext.html

//set the locale in which the messages will be translated
iJS.i18n.setlocale("fr_FR.utf8") ;
//add domain where to find messages data. can also be in .json or .mo
iJS.i18n.bindtextdomain("domain_po", "./path_to_locale", "po") ;
//Always do this after a `setlocale` or a `bindtextdomain` call.
iJS.i18n.try_load_lang() ; //will load and parse messages data from the setting catalog.
//now print your messages
alert( iJS.i18n.gettext("messages to be translated") ) ;
//or use the common way to print your messages
alert( iJS._("another way to get translated messages") ) ;

作为进一步的提示,有一个名为 po2json 的 perl 脚本,它将从 .po 文件生成 json。

This library seems the best implementation of getText in javascript:

http://messageformat.github.io/Jed/

https://github.com/messageformat/Jed

example from the documentation:

<script src="jed.js"></script>
<script>
var i18n = new Jed({
  // Generally output by a .po file conversion
  locale_data : {
    "messages" : {
      "" : {
        "domain" : "messages",
        "lang"   : "en",
        "plural_forms" : "nplurals=2; plural=(n != 1);"
      },
      "some key" : [ "some value"]
    }
  },
  "domain" : "messages"
});

alert( i18n.gettext( "some key" ) ); // alerts "some value"
</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM