How to internationalize string used in javascript code?

Question

While developing AJAX program, I met the design decision to make string I18N in JavaScript.code. Some string is only used by JavaScript. For example.

$('#submit').click(function() {
    $(#target).html('Please wait while submitting...').load(someURI);
}

I'd like to I18N the string 'Please wait while submitting...'. I'm not sure what's the best way to do it. Currently, I just have the string I18N-ed in server and rendered into a javascript variable in page (I'm using PHP/wordpress).

<script>strSubmit = <?php  _e('Please wait while submitting...'); ?></script>

Then, in javascript, I just use the varialble

$('#submit').click(function() {
    $(#target).html(strSubmit).load(someURI);
}

This works, but it looks messy. Is there any better way to achieve this?

You can read more here about the way Wordpress is planning to support I18n in javascript : make.wordpress.org/core/2016/10/10/… — Spone
– Spone, Commented Feb 15, 2017 at 20:28

Fabien Ménager · Accepted Answer · 2009-10-12 11:43:10Z

10

You should use JSON to convert the server side l10n strings to a JSON object :

// In the <head> tag :
<script type="text/javascript" src="locales.php"></script>

and this in locales.php :

var l10n = <?php echo json_encode($l10n); ?>;

where $l10n is an array which contains all the locales, like this :

$l10n = array(
  'Please wait while submitting...' => 'Veuillez patienter durant le traitement...',
  'bah' => 'bih'
);

You can now use these strings like this in JS :

function $T(s){
  return l10n[s] || s;
}

alert($T('Please wait while submitting...'));

edited Oct 12, 2009 at 11:43

answered Oct 12, 2009 at 11:31

Fabien Ménager

140k3 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

kangax Over a year ago

Yep. This is very similar to how we do it too :)

Morgan Cheng Over a year ago

In this approach, all I18N strings are downloaded even only few are used.

Fabien Ménager Over a year ago

Yes, but the files is cached by the browser, so it is downloaded only once.

Nikita Fedyashev Over a year ago

Fabien, thanks a lot for this simple yet powerful solution! :)

Brian Hogg Over a year ago

stereofrog's solution would avoid having both this and the i18n solution by wordpress. WP also has wp_localize_script() which essentially does the above though less readable without the full text string.

|

user187291 · Accepted Answer · 2009-10-12 09:49:51Z

2

you can also automate this by using a php "preprocessor" for javascript

<script src="script.php?file=blah.js">

where script.php is something like

    function _repl($x) { return '"' . _e($x[1]) . '"'; }

    $js = file_get_contents($_GET['file']);
    $js = preg_replace_callback('~_e\("(.+?)"\)~', '_repl', $js);
    echo $js;

this will transparently replace _e(something) in javascript code with actual strings

answered Oct 12, 2009 at 9:49

user187291

54.1k19 gold badges98 silver badges127 bronze badges

1 Comment

Nikita Fedyashev Over a year ago

Are you suggesting to generate a HTTP request for every string that requires localization?

Zed · Accepted Answer · 2009-10-12 09:25:34Z

0

You could generate the text into the original script itself.

$('#submit').click(function() {
    $(#target).html('<?php  _e('Please wait while submitting...'); ?>').load(someURI);
}

answered Oct 12, 2009 at 9:25

Zed

57.8k9 gold badges79 silver badges101 bronze badges

1 Comment

Karl Adler Over a year ago

it looks more like generating the script itself in php then generating the language tag

Juraj Blahunka · Accepted Answer · 2009-10-12 10:33:11Z

0

you could create sort of REST application, where you would fill the elements of javascript strings on document load from a service:

$(function(){
   var handleResponse = function.....; // fill your string elements from response
   var lang = "fr"; // language of localized document

   $.ajax(
       type: "GET",
       url: "/i18n.php?lang=" + lang + "&names=someName+someName1+someName2",
       success: handleResponse
   ); 
});

answered Oct 12, 2009 at 10:33

Juraj Blahunka

18.6k6 gold badges38 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to internationalize string used in javascript code?

4 Answers 4

6 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related