How does the `join` filter concatenate elements of an array into a string using a specified delimiter?

In the template design of AnQi CMS, we often encounter the need to integrate a series of data items into a continuous text.For example, we need to display multiple tags (Tag) in one place, or combine a set of custom parameter values obtained from the database.joinThe filter comes in handy, it can efficiently concatenate the elements of an array into a string using the specified delimiter.

UnderstandjoinThe role of the filter

joinThe filter is a very practical feature provided by the Aqara CMS template engine, whose core function is to connect. Imagine you have a string of beads (elements in the array), andjoinFilter is that thread, you can choose what kind of thread (delimiter) to string these beads together, and finally form a complete necklace (the concatenated string).This greatly simplifies the complexity of handling list data display in templates, avoiding the cumbersome work of manual loops and judgments to remove extra separators.

joinHow does the filter work?

joinThe syntax of the filter is very intuitive:{{ 变量名 | join:"分隔符" }}.

Here are the变量名It is usually an array (or a string in some specific cases), and分隔符is any string you want to use to connect the elements or characters of the array, like a comma (,）、pipe character（|）、space（）even more complex HTML fragments.

Let's understand its basic usage with a simple example. Suppose you have a variable namedmyTagsThe array contains several keywords:

{% set myTags = ["安企CMS", "内容管理", "高效部署"] %}

If you want to connect these keywords with commas and spaces, you can do it like this:

<p>文章关键词：{{ myTags | join:", " }}</p>

The output result of this code will be:文章关键词：安企CMS, 内容管理, 高效部署

As you can see,joinThe filter automatically handles the connection between elements and does not add a separator after the last element, ensuring a tidy output.

Example of practical application scenarios

In the Anqi CMS,joinThe filter can be combined with various tags to process data retrieved from the background.

1. Concatenate article tags (Tags)

Imagine you want to display all related tags at the bottom of an article detail page, using a pipe separator.|AlthoughtagListThe label returns an array of objects, but we can first extract the titles of these objects, or more simply, if your data structure allows, we can directly use an array of strings.join.

If we get a comma-separated keyword string from a custom field and want to display it in another format,splitandjoinwe can use them together:

{% set articleKeywords = archive.Keywords|split:"," %} {# 假设 archive.Keywords 是 "SEO,网站优化,内容营销" #}
<p>文章重点：{{ articleKeywords | join:" | " }}</p>

this will turnarchive.KeywordsFrom"SEO,网站优化,内容营销"Convert to an array, then" | "Concatenate with a delimiter, output as:文章重点：SEO | 网站优化 | 内容营销

2. Handle custom list parameters

In the AanQi CMS, you can define various custom fields for content models. If the value of a custom field itself is a list (for example, the administrator entered multiple hobbies in the background and separated them with newline characters), you can also usejoinHere is the unified format display:

{% archiveDetail myInterests with name="interests" %} {# 假设 interests 字段值为 "阅读\n旅行\n编程" #}
<p>我的爱好：{{ myInterests | split:"\n" | join:" / " }}</p>

Let's start with this:split:"\n"Convert a string separated by newline characters to an array, then usejoin:" / "Concatenate it into阅读 / 旅行 / 编程.

joinConsiderations for filters

• Handle data types: joinThe filter is most suitable for processing arrays containing basic data types such as strings or numbers. When dealing with arrays of objects, you may need to first extract specific properties from the objects to form an array of basic data types, and then performjoinOperation. In the template engine of AnQi CMS, directly using object arrays may not give you the result you want, because the template engine does not automatically know which properties to concatenate.joinIt may not give you the result you want, because the template engine does not automatically know which properties to concatenate.
• The special behavior of strings:It's interesting that if you usejoina filter on a normal string"安企CMS"it will be treated as'安'、'企'、'C'、'M'、'S'），then use the specified delimiter to concatenate each character. For example，{{"安企CMS"|join:", "}}It will output安, 企, C, M, S。This may have some effect in some character processing scenarios, but usually it needs to be noted when concatenating arrays.
• Select the appropriate delimiter:The choice of separator should consider the final display effect and readability. In the HTML context, you can even use HTML tags as separators, for example,{{ myItems | join:"<br>" }}Insert a newline between each element.

By using flexibilityjoinThe filter allows us to make the content display of the security CMS website more dynamic and beautiful, and also greatly improves the efficiency of template writing.

---

Common Questions and Answers (FAQ)

1.joinCan the filter directly concatenate a certain attribute of an array containing objects (such as a label object array)?

Safe CMS template enginejoinThe filter is mainly used to concatenate arrays containing basic data types (such as strings, numbers). If your array contains objects (such astagListThe label returns a label object, each element is a containerTitle/Linkwith properties such as these),joinThe filter cannot directly recognize and concatenate a specific property of an object (such asTitle）。In this case, you usually need to traverse the array cyclically, manually output the required properties of each object, and connect them with a separator, or usefor循环遍历数组，手动将每个对象的所需属性输出，并用分隔符连接，或者使用setConstruct a new array that contains only the required strings using advanced techniques such as tags.joinOperation.

2.joinfilters andsplitWhat is the relationship between filters?

joinandsplitFilters are complementary operations and can be considered as 'reverse'.joinResponsible for merging the elements of the array into a string according to the specified separatorsplitIt will split a string into an array according to the specified delimiter.They are very useful in handling the mutual conversion between strings and arrays, allowing for convenient formatting and reorganization of data.splitConvert a comma-separated string obtained from the background into an array, thenjoinReassemble with other delimiters.

3. If I try to usejoinWhat will happen if I concatenate a plain string instead of an array?

According to the Anqi CMS template engine'sjoinFilter characteristics, if you use a common stringjoinFilter, it treats the string as a character sequence (rune slice), and attempts to concatenate each character of the string using the delimiter you specify. For example,{{"欢迎使用安企CMS"|join:", "}}It will output欢, 迎, 使, 用, 安, 企, C, M, SThis is different from concatenating an array of strings, and attention should be paid to this feature when using it.