Modern web applications often use phrases like “yesterday”, “42 seconds ago”, or “in 3 months” instead of full dates and timestamps. Such relative time-formatted values have become so common that several popular libraries implement utility functions that format them in a localized manner. (Examples include Moment.js, an array of such language tags.
Here’s an example of using a different language (Spanish):
const rtf = new Intl.RelativeTimeFormat('es');
rtf.format(3.14, 'second');
rtf.format(-15, 'minute');
rtf.format(8, 'hour');
rtf.format(-2, 'day');
rtf.format(3, 'week');
rtf.format(-5, 'month');
rtf.format(2, 'quarter');
rtf.format(-42, 'year');
Additionally, the Intl.RelativeTimeFormat constructor accepts an optional options argument, which gives fine-grained control over the output. To illustrate the flexibility, let’s look at some more English output based on the default settings:
const rtf = new Intl.RelativeTimeFormat('en', {
localeMatcher: 'best fit',
style: 'long',
numeric: 'always',
});
rtf.format(-1, 'day');
rtf.format(0, 'day');
rtf.format(1, 'day');
rtf.format(-1, 'week');
rtf.format(0, 'week');
rtf.format(1, 'week');
You may have noticed that the above formatter produced the string '1 day ago' instead of 'yesterday', and the slightly awkward 'in 0 weeks' instead of 'this week'. This happens because by default, the formatter uses the numeric value in the output.
To change this behavior, set the numeric option to 'auto' (instead of the implicit default of 'always'):
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
rtf.format(-1, 'day');
rtf.format(0, 'day');
rtf.format(1, 'day');
rtf.format(-1, 'week');
rtf.format(0, 'week');
rtf.format(1, 'week');
Analogous to other Intl classes, Intl.RelativeTimeFormat has a formatToParts method in addition to the format method. Although format covers the most common use case, formatToParts can be helpful if you need access to the individual parts of the generated output:
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
rtf.format(-1, 'day');
rtf.formatToParts(-1, 'day');
rtf.format(3, 'week');
rtf.formatToParts(3, 'week');
For more information about the remaining options and their behavior, see Node.js: supported since version 12
Babel: no support