Internationalization in Javascript and String formatting

Question

One of my biggest issues is implementing language options for javascript. So far, I've managed to have a language file load whenever a cookie is detected for that language. Although everything works fine on the PHP side, the javacript portion of the site is still in English; alerts and custom function etc. What I should do, is like I did with the PHP side of things: create a language file with custom strings:

//EN file
$lang["TEST"] = " You have % order(s) waiting in your queue ";
//FR file
$lang["TEST"] = " Vous avez %s commande(s) dans votre file d'attente ";

What's great about this, is I can use sprintf($lang["TEST"], 4); at will on every page. What would be great, however, is to be able to store such strings in a js file that can be formatted the same way depending on what the functions wants to output.

How can I achieve this?

It might be worth looking at some javascript templateing languages like handlebars or mustache. — Orangepill, Jun 10 '13 at 02:42

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

We do something similar where I work.

Build your PHP array, then export it into your main document as a Javascript object.

var resourceStrings = <?php json_encode($lang) ?>;

(I don't have PHP running right now, so you should check this page for any options you may need to make sure it escapes the way you need it to:)

http://php.net/manual/en/function.json-encode.php

This discussion will provide you with a good string formatting routine so you can fill in the needed parameters.

JavaScript equivalent to printf/string.format

edited May 23 '17 at 11:57

Community

1
1

answered Jun 10 '13 at 02:48

Jeremy J Starcher

23,369
6
54
74

This is actually a nice idea. I didn't think of just simply exporting it js object. I guess an equivalent of printf doesn't exist in the native JavaScript language, but I'll give that plugin method a shot and see what It gives... – Dimitri Jun 10 '13 at 02:57
I noticed that all of my strings are outputted uselessly in the view source. Should I retrieve the json encoded strings via an ajax call with proper headers on the PHP file? – Dimitri Jun 10 '13 at 15:20
There are several options. If you have the assignment above wrapped up in `` tags then you should have a usable assignment. Retrieving them via AJAX is another option -- but you have to weigh the cost of the call vs the cost of inlining. You also have to have some method in place to expire any cached data should your resource strings change. – Jeremy J Starcher Jun 10 '13 at 20:46
I thought about the cost of using an Ajax call, and I've averaged it to about 5ms loading time which is sufficient enough for me. The only thing left is to expire the cache and to help, I've included a cache:false parameter for the Ajax call. Upon success, I created a global var called language and can be accessed like this : language.BUTTON.TITLE for example – Dimitri Jun 10 '13 at 21:29

score 1 · Answer 2 · answered Jun 10 '13 at 02:54

I would look into a template library like mustache

Then you can build your language templates up in a json file per language

// en.json
{ 
    "test":  " You have {{num_orders}} order(s) waiting in your queue "
}

// fr.json
{ 
    "test":  " Vous avez {{num_orders}} commande(s) dans votre file d'attente "
}

Then you can either set the file from php based on selected language.

<script type='text/javascript'>
     var allertTemplates = <?= file_get_contents($lang.".json"); ?>;
</script>

Or pull it in via an ajax request

Then when you want your template text just...

 var data = Mustache.render(lang.test, {num_orders:6});

This is an interesting idea. I just need to look into this template library, I'll give this a try — Dimitri, Jun 10 '13 at 13:42

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

You can create a localization js file for each language

lang.en.js
lang.fr.js

then use condition to import those file

<script src="lang.<?php echo $lang;?>.js"></script>

or write a js loader yourself in js

PS: implement .format function in js JavaScript equivalent to printf/string.format

edited May 23 '17 at 12:05

Community

1
1

answered Jun 10 '13 at 02:55

James

13,571
6
61
83

1

That works, but it has the downside that the resources need to be duplicated in both the PHP and the JS side of things. If he was going to go that route, he should write a PHP function to dump the information down (with appropriate cache control headers, of course.) Depending on the number of resources, the additional complexity may be worth it. If he's only dealing with a dozen or so strings, that may be overkill. – Jeremy J Starcher Jun 10 '13 at 03:02

Internationalization in Javascript and String formatting

3 Answers3