i18n Tagged Template Literals
Table of Contents
- Overview
- Features
- Compatibility
- Examples
- Installation
- Usage
- Translations as CommonJS Modules
- Tools
- Credits
- License
Overview
This template literal tag adds support for i18n and l10n (translation and internationalization) to your JavaScript project. It provides the following benefits:
- Very small footprint
- Powerful ES2015 standard template literal syntax
- Internationalization based on ECMA-402 standard Intl browser API
- JSON Schema powered translations
- Tools that can be integrated into your build pipeline and IDE
Features
- Translate and internationalize your JavaScript project
- Translate your JavaScript library at buildtime
- Generate a schema of all i18n tagged template literals in your project for easy JSON based translations
- Export translations as CommonJS modules
- Validate translations and track translation coverage of your project
Compatibility
This library is using the ECMAScript Internationalization API. ES Internationalization API is implemented in all modern Browsers. For node.js projects you can use Andy Earnshaw's excellent Intl.js polyfill [#34]:
Examples
Installation
$ npm install es2015-i18n-tag --save
Usage
This library is available as CommonJS module and as UMD module that is consumable in CommonJS, AMD and with script tags. The UMD module can be used in environments that don't support CommonJS modules. It is highly recommended to use es2015-i18n-tag as CommonJS module with babel and webpack or browserify. In a Node.js environment you have to use the Intl Polyfill to add support for additional locales [#34].
UMD module on unpkg.com
https://unpkg.com/es2015-i18n-tag/dist/lib/index.umd.min.js
Import and Configuration
const name = 'Steffen'const amount = 125033 console// Hallo Steffen, Sie haben US$ 1,250.33 auf Ihrem Bankkonto.
Currency formatting
console// Hallo Steffen, Sie haben € 1,250.33 auf Ihrem Bankkonto. console// Hallo Steffen, Sie haben US$ 1,250.33 auf Ihrem Bankkonto.
Date formatting
console// Hello Steffen, the date is 12/20/2012, 19:00:00.
Standard format strings
const date = 2012 11 20 19 0 0; i18n`The date is :t(D).` // The date is Thursday, December 20, 2012.
The following standard format strings can be applied to a template expression of type Date:
Format specifier | Description | Examples |
---|---|---|
"d" | Short date pattern | 12/20/2012 |
"D" | Long date pattern | Thursday, December 20, 2012 |
"f" | Full date/time pattern (short time) | Thursday, December 20, 2012, 7:00 PM |
"F" | Full date/time pattern (long time) | Thursday, December 20, 2012, 7:00:00 PM |
"g" | General date/time pattern (short time) | 12/20/2012, 7:00 PM |
"G" | General date/time pattern (long time) | 12/20/2012, 7:00:00 PM |
"M", "m" | Month/day pattern | December 20 |
"O", "o" | ISO 8601 pattern | 2012-12-20T18:00:00.000Z |
"R", "r" | RFC 1123 pattern | Thu, 20 Dec 2012 18:00:00 GMT |
"t" | Short time pattern | 7:00 PM |
"T" | Long time pattern | 7:00:00 PM |
"Y", "y" | Year month pattern | December 2012 |
Percentage formatting
console// Hello Steffen, the percentage is 1%. console// Hello Steffen, the percentage is 0.5%. console// Hello Steffen, the percentage is 1 %.
Number formatting
console// Hello Steffen, the number is 12,345.67. console// Hello Steffen, the number is 12.345,67.
Pluralization
You can use nested templates for pluralization as shown in this example.
Nested templates
let hello = name: "Steffen" percentage: 02 name: "Jack" percentage: 08 console// <users>// // <user name="Steffen">20%</user>// // <user name="Jack">80%</user>// // </users>
NOTE: For easy translation of multiline template literals use one of the following json schema generators.
Standard format strings
You can add custom standard formatters similar to the predefined DateTime formatters. Valid types are date
, number
and string
.
console// 77%
Translation Groups
Translation groups can be very useful to group translations by context. It can also be useful to avoid key duplicates in larger projects.
You can use babel-plugin-i18n-tag-translate to inject the relative path of your module as group name. Babel will inject const __translationGroup = 'relative/path/to/module.ext'
into each module.
Babel generated file module groups
.babelrc
Project Structure
.
├── src
| └── components
| ├── App.js
| └── Clock.js
├── .babelrc
translations.de.json
App.js
`Welcome` // Select translation from module group e.g. "components/App.js"`Time` // Select translation from a custom group
i18nGroup Class Decorator
/* default syntax */ { return thisi18n`Time: :t(T)` // you have to use the class instance of i18n to get the grouped translation }__translationGroupClock /* experimental class decorator syntax */@ { return thisi18n`Time: :t(T)` // you have to use the class instance of i18n to get the grouped translation }
Configuration Groups
Configuration groups should be used by libraries to avoid configuration overrides. Configuration groups are like namespaces and only applied if the group name is set via i18n tag or i18nGroup decorator.
i18n Option
`Welcome` // Select translation from module group e.g. "components/App.js"`Time` // Select translation from a custom group
i18nGroup Class Decorator
/* default syntax */ { return thisi18n`Time: :t(T)` }__translationGroup 'my-lib'Clock /* experimental class decorator syntax */@ { return thisi18n`Time: :t(T)` }
Translating without template literals
If you have to translate variables that cannot be put into a template literal, you can use the i18n.translate()
helper function.
Simple string translation
i18n var somVar = 'translationkey'i18n
Using formatters
const name = 'Steffen'const amount = 125033 i18n i18n
Using config and translation groups
// Select translation from module group e.g. "components/App.js" // Select translation from a custom group { return thisi18n }__translationGroup 'my-lib'Clock
Translations as CommonJS Modules
If you are working on a multilingual library it might be useful to export i18n settings and translations as CommonJS modules. This can be easily accomplished with webpack and json-loader as shown in this example:
./my-lib/de/index.js
// set internationalization settings and add imported translations
./my-lib/index.js
@ { return thisi18n`Time: :t(T)` }
Import library with german translations into an app
Tools
Build time translation
- babel-plugin-i18n-tag-translate: Translate your template literals at build time or add filename groups
JSON Schema
- i18n-tag-schema: JSON Schema based translation validation and tools
- vscode-18n-tag-schema: Visual Studio Code Extension for JSON Schema based translation validation and tools
Credits
Thanks to Jack Hsu for his initial draft of an i18n template literal.
License
Copyright (c) 2016-2019 Steffen Kolmer
This software is licensed under the MIT license. See the LICENSE
file
accompanying this software for terms of use.
Contributors
Thanks goes to these wonderful people (emoji key):
Artem 🚇 ⚠️ 💻 |
Steve Le Roy Harris 🚇 ⚠️ 💻 |
SaiX123 🚇 ⚠️ 💻 |
nor3 ⚠️ 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!