In this article, we will look at different ways to concatenate strings in a twig template. For the examples in this article, let's consider the following variables:
{% set foo = 'hello' %} {% set bar = 'world' %}
Using String Interpolation
String interpolation allows any valid expression inside a double-quoted string. The expressions are evaluated and inserted into the string. Consider for example:
{{ "#{foo} #{bar}!" }} // output: hello world! {{ "#{foo} #{bar}!" | title }} // output: Hello World! {{ "1 + 1 = #{1 + 1}" }} // output: 1 + 1 = 2
Using the ~
(Tilde) Operator
The tilde character concatenates all operands (strings and/or variables) into a single string. For example:
{{ foo ~ ' ' ~ bar ~ '!' }} // output: hello world! {{ foo|upper ~ ' ' ~ bar ~ '!' }} // output: HELLO world! {{ (foo ~ ' ' ~ bar ~ '!') | title }} // output: Hello World! {{ '1 + 1 = ' ~ (1 + 1) }} // output: 1 + 1 = 2
As you can see from the examples above, it can be useful when there's a need to apply selective filters to a particular operand or to everything within a group (specified by parenthesis).
Using the format
Filter
The format
filter in twig is the same as PHP's sprintf
notation. It formats a string by replacing the placeholders specified within it. For example:
{{ "%s %s!" | format(foo, bar) }} // output: hello world! {{ "%s %s!" | format(foo, bar) | title }} // output: Hello World! {{ "1 + 1 = %d" | format(1 + 1) }} // output: 1 + 1 = 2
Joining an Array of Strings With join
An array of strings can be joined together into a single string like so:
{{ [foo, ' ', bar, '!'] | join }} // output: hello world! {{ [foo|upper, ' ', bar, '!'] | join }} // output: HELLO world! {{ [foo, ' ', bar, '!'] | join | title }} // output: Hello World! {{ ['1 + 1 = ', 1 + 1] | join }} // output: 1 + 1 = 2
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.