When developing with AnQiCMS templates, we often need to combine multiple elements of an array into a string for display. Whether it's for building navigation, showing keywords, or formatting data lists, at this time,joinFilter becomes our powerful assistant. Many users may only be familiar with using comma (,) as a separator, but actually, AnQiCMS'sjoinThe filter provides a wider range of choices, its capabilities are far beyond this.

joinThe working principle of the filter

joinThe filter is used to concatenate all elements of an array (or slice) into a single string using a specified delimiter. Its basic syntax is very intuitive:

{{ 你的数组变量 | join:"你想要的分隔符" }}

For example, if you have an array namedkeywordsan array containing["AnQiCMS", "内容管理", "高效"]English, and hope to connect them with commas and spaces, you can write it like this:

{{ keywords|join:", " }}

The output result will be:AnQiCMS, 内容管理, 高效.

Break the limit of commas: more options of connectors

AnQiCMSjoinThe filter is designed to be very flexible, it is not limited to using commas. In fact, you can useany string you wantCome as the delimiter of array elements.This means you can choose the most suitable characters, symbols, or even HTML tags to connect your array elements based on actual needs, in order to achieve **display effects or data formats.

for example, if you want to use a hyphen-Connect a set of keywords to generate a SEO-friendly URL fragment:

{% set productTags = ["智能手机", "安卓系统", "旗舰机型"] %}
<a href="/products/tag/{{ productTags|join:"-" }}">查看更多</a>

This might generate something like:products/tag/智能手机-安卓系统-旗舰机型The URL of.

For example, you might need to use some product features in|Concatenate symbols to display them clearly on one line:

{% set features = ["高分辨率屏幕", "超长续航", "AI芯片"] %}
<span>特点：{{ features|join:" | " }}</span>

The output will be:特点：高分辨率屏幕 | 超长续航 | AI芯片.

This flexibility allows:joinFilters are very practical in various scenarios. You can use them to:

  • Build semantic URLs or filenamesUse hyphens-or an underscore_.
  • Format data listsUse tabs\tcarriage return\n/<br>(Remember to pair with|safeFilter），or custom separator like---.
  • Create navigation menu or breadcrumb path: Use>or/.
  • Generate unique identifiers or combination strings:Customize the connector according to business logic.

The delimiter can be a single character or a string composed of multiple characters. For example, you can even use HTML tags as delimiters, but remember that when the delimiter contains HTML, you need to use|safeThe filter ensures they are not escaped but are correctly parsed by the browser:

{% set listItems = ["首页", "产品", "关于我们"] %}
<ul><li>{{ listItems|join:"</li><li>"|safe }}</li></ul>

The above code generates an unordered list, with each array element being<li>each enclosed by tags.

Using tips

  1. The input must be an array or a slice:joinThe filter is mainly designed to process arrays or slices.If you apply it to a string, it treats each character in the string as an element and then joins them with the specified separator.{{ "你好世界"|join:"-" }}It will output你-好-世-界.
  2. Attention HTML escapingIf your connector or array element contains HTML tags, and you want these tags to be parsed by the browser rather than displayed as plain text, please be sure tojoinafter the filter|safeFilter, for example{{ array|join:"<br>"|safe }}.
  3. Select the appropriate connector based on the sceneNo best connector, only the most suitable connector for your current display needs.For example, for URLs, hyphens are usually more favored by search engines than commas; for display in user interfaces, spaces, vertical bars, or custom delimiters may be clearer.

By using flexibilityjoinFilter, you can easily convert array data in AnQiCMS templates to various formats of strings, thus better satisfying the needs of website content display and functional implementation.

Common Questions and Answers (FAQ)

Q1:joinFilter can connect non-string array elements?A1: Yes, AnQiCMS'sjoinThe filter is very intelligent.It will automatically convert non-string elements (such as numbers, boolean values, etc.) in the array to strings, and then concatenate them with the specified delimiter.So, you don't need to manually convert data types.

Q2: If the array to be connected is empty,joinwhat will the filter return?A2: If you use an empty array forjoinFilter, it returns an empty string. This is very convenient when used, because you usually do not need additional condition judgment to handle the case of an empty array.

Q3:joinfilters andsplitWhat is the relationship between filters?A3:joinandsplitFilter is a complementary operation.splitThe filter is used to split a string into an array according to the specified delimiter (for example, to split"AnQiCMS,内容管理"split into["AnQiCMS", "内容管理"]）。而joinThe filter operates in the opposite way, it joins array elements into a string using a specified delimiter. Both are often used together when converting between strings and arrays.