Multi language file by using javascript

Why we need the language file in application/software/website?

There are many reasons to use the different language files in an application. One main reason is to make a great user-interface application. The user is more comfortable and satisfied when she would be able to use any software/website along with her first language.

Language plays a vital role to make the connection between user and software. It’s critical to have the multi-language facility in software for it succeeds.

Today I am going to write about how to make the multi-language feature in JavaScript.

How do I create this?

I create the function which loads the language file as a javascript object which has key and value. The key is used to fetch its associated string/information.

I create another function getString, to which we can pass the key for getting its related string from language object like lang.getString(‘greeting’).

The user can also pass the dynamic values with lang.getSting(‘greeting’, [overridevalue] ) to make the string more informative. I have explained this point in detail at below.

Live Demo

Find the demo with and

Let’s understand the complete process with the code.

Load language file by script

var lang = {
/**
 function load the language file passed by function
**/
init : function (type, afterLoad){
 this.type = type;
 var stag = document.createElement("script");
 stag.type = 'text/javascript';
 stag.src = type+".js";
 document.querySelector("head").appendChild(stag);
 stag.onload = function (){
  afterLoad();
 }
},

In above code, I have defined the module named lang, in which the init function loads a language file by passing file name eg en, fr, pt during initialize the module.

The callback function afterLoad would be invoked when the file is loaded, which means you can use the language object only after the file is loaded.

Get the language string by passing key

/**
 This function is used to get string in your language
 passed by relative keyword
**/
getString : function (string, words){
 if(typeof window[this.type] != 'undefined'){
  var langString = window[this.type][string];
  if (typeof words != 'undefined' && words.length > 0) {
   langString = this.putDyanamicValue(langString, words);
  }
  return langString;
 }else {
  alert("'" + this.type +  '" language is not found');
 }
},

getString is the core function, it returns the language string based on the key you provided. For example, if language file has “greeting” : “Hello User”, then the getString(“greeting”) returns “Hello User".

Insert the dynamic values in String

/**
 This puts the dynamic values in string passed by function, 
 eg dynamic value DVD  
 "Your Item {dvalue1} is not found"  is converted into
  "Your Item DVD is not found"
**/
putDyanamicValue : function (langString, words){
 for (var i = 0; i < words.length; i++) {
  var spatt = new RegExp('{dvalue' + (i + 1) + '}');
  langString = langString.replace(spatt, words[i]);
 }
 return langString;
}
}

The above function overrides the dynamic values that is passed through getString function to prefixes, for example {dvalue1} and {dvalue2} in string. If the language file has

itemnotfound : “Your Item {dvalue1} is not found", Select the item  {dvalue2} ”,

then the

getString(“itemnotfound ”, [“VCR”, “DVD”]);  returns  "Your Item VCR is not found, Select the item DVD”.

"VCR" and “DVD” would be replaced with  {dvalue1} and {dvalue2}.  As many as the dynamic values passed in an array, the number of prefixes should be defined with a particular string in a language file.

As an example, there are three elments in an array with lang.getString(somekey, [val1, val2, val3]),

and the same way, three prefixes would defined in string with somekey : I have {dvalue1},  {dvalue2} and  {dvalue3},

Create language file with javascript object

France language file fr.js

var fr = {
 greeting : "Bonjour l'utilisateur!",
 itemnotfound : "Cet élément {dvalue1} est introuvable. Veuillez sélectionner l'élément {dvalue2}"
}

English language file en.js

var en = {
 greeting : "Hello USER!",
 itemnotfound : "This item {dvalue1} is  not found. Please select the item {dvalue2} "
}

To initialize the language module

lang.init('en', afterLangLoad);

In above code, the ‘en’ is language file and afterLangLoad is a callback function wlil be triggered when the file is loaded. And finally you can use the language string as in below function.

function afterLangLoad(){
 var msg = lang.getString('greeting'); + " 
"
 msg += lang.getString('itemnotfound', ["VCR", "DVD"]); 
 console.log(msg); 
}

You can get the jsFiddle and source code Here.

If you want to ask/share anything about article, you are welcome to drop this on below comment box.