es2015-i18n-tag
Advanced tools
ES2015 template literal tag for i18n and l10n translation and localization
This template literal tag adds support for i18n and l10n (translation and internationalization) to your JavaScript project. It provides the following benefits:
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]:
$ npm install es2015-i18n-tag --save
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].
https://unpkg.com/es2015-i18n-tag/dist/lib/index.umd.min.js
import i18n, { i18nConfig } from 'es2015-i18n-tag'
i18nConfig({
locales: 'de-DE',
group: 'my-lib', // Optional, can be used to avoid configuration overrides. This is recommended for libraries!
translations: {
"Hello ${0}, you have ${1} in your bank account.": "Hallo ${0}, Sie haben ${1} auf Ihrem Bankkonto."
},
number: {
[...options] // Intl NumberFormat options as described here: https://goo.gl/pDwbG2
},
date: {
[...options] // Intl DateTimeFormat options as described here: https://goo.gl/lslekB
}
})
const name = 'Steffen'
const amount = 1250.33
console.log(i18n`Hello ${ name }, you have ${ amount }:c in your bank account.`)
// Hallo Steffen, Sie haben US$ 1,250.33 auf Ihrem Bankkonto.
i18nConfig({
number: {
currency: 'EUR'
}
})
console.log(i18n`Hello ${ name }, you have ${ amount }:c in your bank account.`)
// Hallo Steffen, Sie haben € 1,250.33 auf Ihrem Bankkonto.
console.log(i18n`Hello ${ name }, you have ${ amount }:c(USD) in your bank account.`)
// Hallo Steffen, Sie haben US$ 1,250.33 auf Ihrem Bankkonto.
i18nConfig({
locales: 'en-US',
date: {
hour12: false
}
})
console.log(i18n`Hello ${name}, the date is ${new Date(2012, 11, 20, 19, 0, 0)}:t.`)
// Hello Steffen, the date is 12/20/2012, 19:00:00.
const date = new Date(2012, 11, 20, 19, 0, 0);
i18n`The date is ${date}: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 |
console.log(i18n`Hello ${name}, the percentage is ${0.01}:p.`)
// Hello Steffen, the percentage is 1%.
console.log(i18n`Hello ${name}, the percentage is ${0.005}:p(1).`)
// Hello Steffen, the percentage is 0.5%.
i18nConfig({
locales: 'de-DE'
})
console.log(i18n`Hello ${name}, the percentage is ${0.01}:p.`)
// Hello Steffen, the percentage is 1 %.
console.log(i18n`Hello ${name}, the number is ${12345.678}:n(2).`)
// Hello Steffen, the number is 12,345.67.
i18nConfig({
locales: 'de-DE'
})
console.log(i18n`Hello ${name}, the number is ${12345.678}:n(2).`)
// Hello Steffen, the number is 12.345,67.
You can use nested templates for pluralization as shown in this example.
let hello = [
{ name: "Steffen", percentage: 0.2 },
{ name: "Jack", percentage: 0.8 }
]
console.log(i18n`
<users>
${hello.map((item) => i18n`
<user name="${item.name}">${item.percentage}:p</user>
`).join('')}
</users>
`)
// <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.
You can add custom standard formatters similar to the predefined DateTime formatters. Valid types are date, number and string.
i18nConfig({
standardFormatters: {
number: {
x: (locales, numberOptions, value) => value.toLocaleString(locales, Object.assign({}, numberOptions, { style: 'percent' }))
}
}
})
console.log(i18n`${0.77}:n(x)`)
// 77%
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.
{
"plugins": [
["i18n-tag-translate", {
"groupDir": "./src"
}]
]
}
.
├── src
| └── components
| ├── App.js
| └── Clock.js
├── .babelrc
{
"components/App.js": {
"Welcome": "Willkommen"
},
"components/Clock.js": {
"Time": "Zeit"
}
}
i18n(__translationGroup)`Welcome` // Select translation from module group e.g. "components/App.js"
i18n('components/Clock.js')`Time` // Select translation from a custom group
import { i18nGroup } from 'es2015-i18n-tag'
/* default syntax */
class Clock {
tick() {
return this.i18n`Time: ${new Date()}:t(T)` // you have to use the class instance of i18n to get the grouped translation
}
}
export default i18nGroup(__translationGroup)(Clock)
/* experimental class decorator syntax */
@i18nGroup(__translationGroup)
class Clock {
tick() {
return this.i18n`Time: ${new Date()}:t(T)` // you have to use the class instance of i18n to get the grouped translation
}
}
export default Clock
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(__translationGroup, 'my-lib')`Welcome` // Select translation from module group e.g. "components/App.js"
i18n('components/Clock.js', 'my-lib')`Time` // Select translation from a custom group
import { i18nGroup, i18nConfig } from 'es2015-i18n-tag'
i18nConfig({
locales: 'de-DE',
group: 'my-lib' // set translation and i18n config for 'my-lib'
translations: {
"components/App.js": {
"Welcome": "Willkommen"
},
"components/Clock.js": {
"Time": "Zeit"
}
}
})
/* default syntax */
class Clock {
tick() {
return this.i18n`Time: ${new Date()}:t(T)`
}
}
export default i18nGroup(__translationGroup, 'my-lib')(Clock)
/* experimental class decorator syntax */
@i18nGroup(__translationGroup, 'my-lib')
class Clock {
tick() {
return this.i18n`Time: ${new Date()}:t(T)`
}
}
export default Clock
If you have to translate variables that cannot be put into a template literal, you can use the i18n.translate() helper function.
i18n.translate('Welcome')
var somVar = 'translationkey'
i18n.translate(somVar)
const name = 'Steffen'
const amount = 1250.33
i18n.translate('Hello ${0}, you have ${1} in your bank account.', name, { value: amount, formatter: 'c'})
i18n.translate('Total: ${0}', { value: amount, formatter: 'd', format: 2})
i18n(__translationGroup, 'my-lib').translate('Welcome') // Select translation from module group e.g. "components/App.js"
i18n('components/Clock.js', 'my-lib').translate('Time') // Select translation from a custom group
class Clock {
tick() {
return this.i18n.translate('Time: ${0}', { value: new Date(), formatter: 't', format: 'T' })
}
}
export default i18nGroup(__translationGroup, 'my-lib')(Clock)
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:
import translations from 'json!../../translations/translation.de.json'
i18nConfig({
locales: 'de-DE',
group: 'my-lib' // set translation and i18n config for 'my-lib'
number: {
currency: 'EUR'
},
translations
}) // set internationalization settings and add imported translations
@i18nGroup('', 'my-lib')
class Clock {
tick() {
return this.i18n`Time: ${new Date()}:t(T)`
}
}
import my-lib from 'my-lib'
import 'my-lib/de' // import german i18n configuration and translation
Thanks to Jack Hsu for his initial draft of an i18n template literal.
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.
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!
FAQs
ES2015 template literal tag for i18n and l10n translation and localization
The npm package es2015-i18n-tag receives a total of 6,446 weekly downloads. As such, es2015-i18n-tag popularity was classified as popular.
We found that es2015-i18n-tag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.