Skip to main content

Transforms

Learn how to use transforms in expressions.

Tip

Make sure you understand expressions before experimenting with transforms.

Transforms are functions which apply to expressions in tags. The syntax is {{<statement?> <expression>|<transform(options>}}. Especially note the | between the expression and the transform. Transforms can be chained using |.

String

The following transforms are available for strings of characters:

TransformDescription
lowerConverts the expression to lower case
substr(start: number, end: number)Extracts a substring of the expression
replace(search: string, replacement: string)Replaces a substring of the expression
upperConverts the expression to upper case

You can experiment in the following playground:

Loading...

Boolean

There are no transforms specifically available for booleans, but other transforms may apply, which you can experiment in the following playground:

Loading...

Number

The following transforms are available for numbers:

TransformDescription
format(fmt: string, locale?: string)Formats a number according to a pattern and an ISO locale

The patterns available for fmt are:

PatternDescription
n#Formats a number with # decimals (by default, 2) based on designated locale, e.g. format("n2", "fr-FR") for 2 decimals in French.
c#Formats a number as a currency with # decimals (by default, 2) based on designated locale, e.g. format("c4", "ja-JP") for 4 decimals in Japanese.
p#Formats a number as a percentage with # decimals (by default, 2) based on designated locale, e.g. format("p0", "es-ES") for 0 decimals in Spanish.
e#Formats a number as an exponential with # decimals (by default, 2) based on designated locale, e.g. format("e2", "de-DE") for 2 decimals in German.

Custom patterns can be composed with placeholders, like in Microsoft Excel:

PlaceholderDescription
0A digit placeholder, where zero is displayed by default.
#A digit placeholder, where nothing is displayed by default.
.The decimal placeholder, which will be converted in non-US locales.
,The thousand placeholder, which will be converted in non-US locales.
$The currency placeholder, which will be converted in non-US locales.
eThe exponential placeholder.
;The section separator, for formatting respectively positive, negative and zero numbers.

For example, On sale for $0.00. You can experiment in the following playground:

Loading...

Date

The following transforms are available for dates:

TransformDescription
format(fmt: string, locale?: string)Formats a data according to a pattern and an ISO locale

The patterns available for fmt are:

PatternDescription
dThe short date pattern, like in 10/6/2000.
DThe long date pattern, like in Monday, November 06, 2000.
FThe long date/time pattern, like in Monday, November 06, 2000 12:00:00 AM.
gThe general date/time pattern, like in 11/6/2000 12:00 AM.
GThe general date/time pattern with seconds, like in 11/6/2000 12:00:00 AM.
M or mThe month/day pattern, like in November 06.
tThe short time pattern, like in 2:30 PM.
TThe long time pattern, like in 2:30:45 PM.
sThe universal sortable local pattern, like in 2000-11-06 00:00:00.
uThe universal sortable utc pattern, like in 2000-11-06 00:00:00Z.
Y or yThe year/month pattern, like in November, 2000.

Custom patterns can be composed with placeholders, like in Microsoft Excel:

PlaceholderDescription
dA placeholder for the day of the month from 1 to 31.
ddA placeholder for the day of the month from 01 to 31.
dddA placeholder for the abbreviated name of the day.
ddddA placeholder for the full name of the day.
fA placeholder for the tenths of a second in a date and time value.
ffA placeholder for the hundredths of a second in a date and time value.
fffA placeholder for the milliseconds in a date and time value.
MA placeholder for the month, from 1 through 12.
MMA placeholder for the month, from 01 through 12.
MMMA placeholder for the abbreviated name of the month.
MMMMA placeholder for the full name of the month.
hA placeholder for the hour, using a 12-hour clock from 1 to 12.
hhA placeholder for the hour, using a 12-hour clock from 01 to 12.
HA placeholder for the hour, using a 24-hour clock from 1 to 23.
HHA placeholder for the hour, using a 24-hour clock from 01 to 23.
mA placeholder for the minute, from 0 through 59.
mmA placeholder for the minute, from 00 through 59.
sA placeholder for the second, from 0 through 59.
ssA placeholder for the second, from 00 through 59.
ttA placeholder for the AM/PM designator.
yyA placeholder for the last two characters from the year value.
yyyyA placeholder for the year full value.
zzzA placeholder for the local timezone when using formats to parse UTC date strings.

For example, dd MMM yyyy. You can experiment in the following playground:

Loading...

Array

The following transforms are available for arrays:

TransformDescription
join(separator?: string)Concatenates the items in the array, separated by a separator like a comma.
orderBy(expression: string, reverse?: boolean)Sorts the items of an array of objects according to the property specified in expression.

You can experiment in the following playground:

Loading...