Syntax
tr, trNumber and trDate syntax:
tr_expressions :: = ('tr:' | 'trNumber:' | 'trDate:') expression (tr_argument_list) tr_argument_list :: = tr_argument_item [';' tr_argument_item]* tr_argument_item :: = ICU_key ICU_value ICU_key :: = Name ICU_value :: = expression
trCurrency syntax:
tr_currency_expressions :: = 'trCurrency:' currency expression (tr_argument_list) currency :: = expression
Description
ZPT-JS provide some expressions to make it easy i18n and l18n. The complete list is:
- tr. Translate texts.
- trNumber. Format umeric values.
- trDate. Format date and time values.
- trCurrency. Format currency values.
I18n and L10n support is implemented using standards Intl and ICU.
Differences with ZPT
This statement does not exist in ZPT.
Examples
Some necessary javascript code:
"use strict"; var zpt = require( 'zpt' ); /* I18n maps init */ var msg = { en : {}, es : {} }; /* English i18n messages */ msg.en[ '/CONF/' ] = { language: 'en', locale: 'en-US' }; msg.en[ 'Hello world!' ] = 'Hello world!'; msg.en[ 'Results msg' ] = '{GENDER, select, male{He} female{She} other{They} }' + ' found ' + '{RES, plural, =0{no results} one{1 result} other{# results} }'; msg.en[ 'Oh, noooo!' ] = 'Error found!'; /* Spanish i18n messages */ msg.es[ '/CONF/' ] = { language: 'es', locale: 'es-ES' }; msg.es[ 'Hello world!' ] = '¡Hola mundo!'; msg.es[ 'Results msg' ] = '{ GENDER, select, male{Él} female{Ella} other{Ellos} }' + ' ' + '{ RES, plural, =0{no } other{} }' + '{ GENDER, select, male{ha} female{ha} other{han} }' + ' encontrado ' + '{ RES, plural, =0{ningún resultado} one{un único resultado} other{# resultados} }'; msg.es[ 'Oh, noooo!' ] = '¡Error encontrado!'; // Create I18n and I18nBundle instances var i18nES = new zpt.I18n( 'es', msg[ 'es' ] ); var i18nEN = new zpt.I18n( 'en', msg[ 'en' ] ); var i18nBundle = new zpt.I18nBundle( i18nES, i18nEN ); // Init dictionary var dictionary = { 'i18nBundle': i18nBundle, fireError: function( ){ document.getElementById("mydiv").innerHTML='Success'; //assuming "mydiv" is undefined }, date : new Date( Date.UTC( 2018, 11, 20, 3, 0, 0 ) ), hello: 'Hello world!' }; // Parse template zpt.run({ root: document.body, dictionary: dictionary });
Translate using a literal:
<div data-language="'es'" data-domain="i18nBundle"> <span data-content="tr: 'Hello world!'">Must be ¡Hola mundo!</span> </div>
Translate using a variable:
<div data-language="'es'" data-domain="i18nBundle"> <span data-content="tr: hello">Must be ¡Hola mundo!</span> </div>
Using parameters:
<div data-language="'es'" data-domain="i18nBundle"> <span data-content="tr: 'Results msg' ( GENDER 'male'; RES 0 )">Must be 'Él no ha encontrado ningún resultado'</span> <span data-content="tr: 'Results msg' ( GENDER 'male'; RES 1 )">Must be 'Él ha encontrado un único resultado'</span> <span data-content="tr: 'Results msg' ( GENDER 'female'; RES 10 )">Must be 'Ella ha encontrado 10 resultados'</span> <span data-content="tr: 'Results msg' ( RES 0 )">Must be 'Ellos no han encontrado ningún resultado'</span> </div>
Working with numbers:
<div data-language="'es'" data-domain="i18nBundle"> <span data-content="trNumber: 1355.23">Must be 1.355,23</span> <span data-content="trNumber: 1355.23643 ( maximumFractionDigits 3 )">Must be 1.355,236</span> <span data-content="trNumber: 1355.23643 ( maximumFractionDigits 3; minimumIntegerDigits 6 )">Must be 001.355,236</span> </div>
Currencies:
<div data-language="'es'" data-domain="i18nBundle"> <span data-content="trCurrency: 'EUR' 1355.23">Must be 1.355,23 €</span> <span data-content="trCurrency: 'USD' 1355.23">Must be 1.355,23 $</span> <span data-content="trCurrency: 'EUR' 1355.23 ( currencyDisplay 'name' )">Must be 1.355,23 euros</span> <span data-content="trCurrency: 'USD' 1355.23 ( currencyDisplay 'name' )">Must be 1.355,23 dólares estadounidenses</span> </div>
Datetimes:
<div data-language="'es'" data-domain="i18nBundle"> <span data-content="trDate: date">Must be 20/12/2012</span> <span data-content="trDate: ( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) )">Must be 20/12/2012</span> <span data-content="trDate: date ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric' )">Must be jueves, 20 de diciembre de 2012</span> <span data-content="trDate: ( js: new Date( Date.UTC( 2012, 11, 21, 3, 0, 0 ) ) ) ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric' )">Must be jueves, 21 de diciembre de 2012</span> <span data-content="trDate: date ( hour 'numeric'; minute 'numeric'; second 'numeric' )">Must be 4:00:00</span> <span data-content="trDate: date ( weekday 'long'; year 'numeric'; month 'long'; day 'numeric'; hour 'numeric'; minute 'numeric'; second 'numeric' )">Must be jueves, 21 de diciembre de 2012 4:00:00</span> </div>
Translating errors:
<div data-language="'es'" data-domain="i18nBundle"> <div data-on-error="tr: 'Oh, noooo!'"> <span data-content="fireError()">Must fire error and then: ¡Error encontrado!</span> </div> </div>