Aplicaciones web con múltiples idiomas en Javascript

Este es mi primer aporte a la comunidad de Cristalab. Aquí veremos cómo lograr tener en varios idiomas una webapp usando Javascript.

Veamos primero el código:

Código :

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage; 
 
String.prototype.printf = function() {
    var formatted = this;
    for(i=0;i<arguments.length;i++) {
      formatted = formatted.replace("%s", arguments[i]);
    }
    return formatted;
};

var Translation = {
    userLang: 'es',
    getLang: function() {
        this.userLang = (navigator.language) ? navigator.language : navigator.userLanguage;
        alert(this.userLang);
    },
    strTrans: {
    'en': {'hola': 'hello',
      'tu nombre es %s': 'you name is %s',
      'tienes %s platano' : 'you have %s banana',
                  'tienes %s platanos' : 'you have %s bananas',
      }, 
    'ca': {'hola': 'hola',
      'tu nombre es %s': 'el teu nom es %s',
      'tienes %s platano' : 'tens %s platan',
                'tienes %s platanos' : 'tens %s platans',
      }, 
    },
    getText: function() {
        var cadena = arguments[0];
        if (typeof this.strTrans[this.userLang] !== "undefined") {
            cadena = this.strTrans[this.userLang][cadena];
        }
       if(typeof cadena == "undefined") cadena = arguments[0];
        
        total = arguments.length;
        for(i=1;i<total;i++) {
          valor = arguments[i];
          cadena = cadena.replace("%s", arguments[i]);
        }
        return cadena;
    }
}

Preparando las traducciones

Si observáis en la propiedad strTrans se definen los idiomas. En key:valor, key se refiere a la cadena a traducir y el valor a la cadena traducida.

Métodos

• getLang: se obtiene el idioma por defecto del navegador, pero se puede definir el idioma que queremos con Translation.userLang = 'idioma';
  
  
• getText(cadena,valor): le pasamos la cadena a traducir y el valor es opcional, si la cadena incluye %s pues lo sustituirá por el valor, pueden contener más de %s en una cadena, es decir multivalor.
  

Ejemplo de uso

Código :

Translation.getLang(); //obtenemos el idioma por defecto del navegador
Translation.userLang = 'en'; //definimos manualmente el idioma
document.write(Translation.getText('tu nombre es %s','Donkey-Kong'));
document.write('<br />');
document.write(Translation.getText('tienes %s platano',1));
document.write('<br />');
document.write(Translation.getText('tienes %s platanos',4));

Ver demostración en JsFiddle

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.