Formatting
Starting with i18next>=21.3.0 you can use the built-in formatting functions based on the the Intl API.

Basic usage

The translation string has the following signature:
1
{
2
"key": "Some format {{value, formatname}}",
3
"keyWithOptions": "Some format {{value, formatname(option1Name: option1Value; option2Name: option2Value)}}"
4
}
Copied!

Passing options to the formatting:

  1. 1.
    In the translation string using {{value, formatName(options1: options1Value)}}
  2. 2.
    Using the root level options when calling t('key', { option1: option1Value })
  3. 3.
    Using the per value options like: t('key', { formatParams: { value: { option1: option1Value } })
Samples
1
// JSON
2
{
3
"intlNumber": "Some {{val, number}}",
4
"intlNumberWithOptions": "Some {{val, number(minimumFractionDigits: 2)}}"
5
}
6
7
i18next.t('intlNumber', { val: 1000 });
8
// --> Some 1,000
9
i18next.t('intlNumber', { val: 1000.1, minimumFractionDigits: 3 });
10
// --> Some 1,000.100
11
i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { minimumFractionDigits: 3 } } });
12
// --> Some 1,000.100
13
i18next.t('intlNumberWithOptions', { val: 2000 });
14
// --> Some 2,000.00
15
i18next.t('intlNumberWithOptions', { val: 2000, minimumFractionDigits: 3 });
16
// --> Some 2,000.000
Copied!

Overriding the language to use

The language can be overriden by passing it in t.options
1
i18next.t('intlNumber', { val: 1000.1, lng: 'de' }); // or: i18next.t('intlNumber', { val: 1000.1, locale: 'de' });
2
i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { lng: 'de' } } }); // or: i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { locale: 'de' } } });
Copied!

Adding custom format function

It's rather simple to add own function:
1
// after i18next.init(options);
2
i18next.services.formatter.add('lowercase', (value, lng, options) => {
3
return value.toLowerCase();
4
});
5
i18next.services.formatter.add('underscore', (value, lng, options) => {
6
return value.replace(/\s+/g, '_');
7
});
Copied!

Using multiple formatters

1
{
2
"key": "Some format {{value, formatter1, formatter2}}"
3
}
Copied!

Built-in formats

Number

1
// JSON
2
{
3
"intlNumber": "Some {{val, number}}",
4
"intlNumberWithOptions": "Some {{val, number(minimumFractionDigits: 2)}}"
5
}
6
7
i18next.t('intlNumber', { val: 1000 });
8
// --> Some 1,000
9
i18next.t('intlNumber', { val: 1000.1, minimumFractionDigits: 3 });
10
// --> Some 1,000.100
11
i18next.t('intlNumber', { val: 1000.1, formatParams: { val: { minimumFractionDigits: 3 } } });
12
// --> Some 1,000.100
13
i18next.t('intlNumberWithOptions', { val: 2000 });
14
// --> Some 2,000.00
15
i18next.t('intlNumberWithOptions', { val: 2000, minimumFractionDigits: 3 });
16
// --> Some 2,000.000
Copied!

Currency

1
// JSON
2
{
3
"intlCurrencyWithOptionsSimplified": "The value is {{val, currency(USD)}}",
4
"intlCurrencyWithOptions": "The value is {{val, currency(currency: USD)}}",
5
"twoIntlCurrencyWithUniqueFormatOptions": "The value is {{localValue, currency}} or {{altValue, currency}}",
6
}
7
8
i18next.t('intlCurrencyWithOptionsSimplified', { val: 2000 });
9
// --> The value is $2,000.00
10
i18next.t('intlCurrencyWithOptions', { val: 2300 });
11
// --> The value is $2,300.00
12
i18next.t('twoIntlCurrencyWithUniqueFormatOptions',
13
{
14
localValue: 12345.67,
15
altValue: 16543.21,
16
formatParams: {
17
localValue: { currency: 'USD', locale: 'en-US' },
18
altValue: { currency: 'CAD', locale: 'fr-CA' },
19
},
20
},);
21
// --> The value is $12,345.67 or 16 543,21 $ CA
Copied!

DateTime

1
// JSON
2
{
3
"intlDateTime": "On the {{val, datetime}}",
4
}
5
6
i18next.t('intlDateTime', { val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)) });
7
// --> On the 12/20/2012
8
i18next.t('intlDateTime',
9
{
10
val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)),
11
formatParams: {
12
val: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
13
},
14
});
15
// --> On the Thursday, December 20, 2012
Copied!

RelativeTime

1
// JSON
2
{
3
"intlRelativeTime": "Lorem {{val, relativetime}}",
4
"intlRelativeTimeWithOptions": "Lorem {{val, relativetime(quarter)}}",
5
"intlRelativeTimeWithOptionsExplicit": "Lorem {{val, relativetime(range: quarter; style: narrow;)}}",
6
}
7
8
i18next.t('intlRelativeTime', { val: 3 });
9
// --> Lorem in 3 days
10
i18next.t('intlRelativeTimeWithOptions', { val: -3 });
11
// --> Lorem 3 quarters ago
12
i18next.t('intlRelativeTimeWithOptionsExplicit', { val: -3 });
13
// --> Lorem 3 qtrs. ago
14
i18next.t('intlRelativeTimeWithOptionsExplicit', { val: -3, style: 'long' });
15
// --> Lorem 3 quarters ago
Copied!

List

1
// JSON
2
{
3
"intlList": "A list of {{val, list}}"
4
}
5
6
i18next.t(['intlList', { val: ['locize', 'i18next', 'awesomeness'] });
7
// --> A list of locize, i18next, and awesomeness
Copied!

Legacy format function i18next<21.3.0

You can add formatting using moment.js and numeral.js or the intl api.
As a sample using momentjs to format dates.
keys
1
{
2
"key": "The current date is {{date, MM/DD/YYYY}}",
3
"key2": "{{text, uppercase}} just uppercased"
4
}
Copied!
Init i18next with a format function:
1
i18next.init({
2
interpolation: {
3
format: function(value, format, lng) {
4
if (format === 'uppercase') return value.toUpperCase();
5
if(value instanceof Date) return moment(value).format(format);
6
return value;
7
}
8
}
9
});
Copied!
sample
1
i18next.t('key', { date: new Date() });
2
// -> "The current date is 07/13/2016"
3
4
i18next.t('key2', { text: 'can you hear me' });
5
// => "CAN YOU HEAR ME just uppercased"
Copied!
Keep the language on moment in sync with i18next by listening to the change language event:
1
i18next.on('languageChanged', function(lng) {
2
moment.locale(lng);
3
});
Copied!

Additional options

Prefix/Suffix for interpolation and other options can be overridden in init option:
sample
1
i18next.init({
2
interpolation: { ... }
3
});
Copied!
option
default
description
alwaysFormat
false
used to always call the format function for all interpolated values
format
noop function
Passing this function is considered LEGACY in i18next>=21.3.0
format function function format(value, format, lng, edit) {}
formatSeparator
','
used to separate format from interpolation value
While there are a lot of options going with the defaults should get you covered.
Last modified 1mo ago