When developing with AnQiCMS templates, we often need to combine multiple elements in an array into a string for display, whether it is used to build navigation, display keywords, or format data lists. At this point,joinThe filter has become our powerful assistant. Many users may only be familiar with using commas (,) as connectors, but actually, it is AnQiCMS'sjoinThe filter offers a wider range of choices, its capabilities far exceed this.

joinThe principle of the filter.

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

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

For example, if you have a variable namedkeywordsarray containing["AnQiCMS", "内容管理", "高效"]and hope to connect them with a comma and space, you can write it like this:

{{ keywords|join:", " }}

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

Break the limit of commas: more options of connecting symbols

AnQiCMS'joinThe filter is designed to be very flexible, it is not limited to using commas. In fact, you can useany string you wantTo be used as an array element separator. This means you can choose the most suitable character, symbol, or even HTML tag to connect your array elements in order to achieve **display effects or data formats.

For example, if you want to use a hyphen-Connect a group of keywords to generate a SEO-friendly URL segment:

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

This might generate something similarproducts/tag/智能手机-安卓系统-旗舰机型URL.

For example, you may need to use some product features to|Concatenate the symbols so that they are clearly displayed on one line:

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

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

This flexibility allowsjoinThe filter is very useful in many scenarios. You can use it to:

  • Build semantically meaningful URL or filename- Use hyphens-or underscores_.
  • Format data list- Use tabs\tcarriage return\n/<br>(Remember to配合|safeFilter, or use a custom delimiter such as---.
  • Create a navigation menu or breadcrumb path: Use.>or/.
  • Generate a unique identifier or combination of strings: Customize the connector based on business logic.

A connector can be a single character or a string made up of multiple characters. For example, you can even use HTML tags as a connector, but remember that when the connector contains HTML, you need to use|safeA filter to ensure 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>tag wrapping.

Use tips

  1. The input must be an array or a slice:joinThe filter is primarily designed to process arrays or slices. If you apply it to a string, it will treat each character of the string as an element and then connect them with the specified separator. For example,{{ "你好世界"|join:"-" }}It will output.你-好-世-界.
  2. Note HTML escaping: If 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, be sure tojoinafter the filter|safeFilter, for example{{ array|join:"<br>"|safe }}.
  3. Select the appropriate connector based on the scenario: There is no best connector, only the one that best suits your current display needs.For example, for URLs, hyphens are usually preferred over commas by search engines;For the display on the user interface, spaces, vertical lines, or custom delimiters may be clearer.

By flexible applicationjoinFilter, you can easily convert the array data of AnQiCMS templates into various string formats to better meet the needs of website content display and functional implementation.

Frequently Asked Questions (FAQ)

Q1:joinCan the filter connect array elements of non-string type?A1: Yes, AnQiCMS'sjoinThe filter is very intelligent. It automatically converts non-string elements in the array (such as numbers, booleans, etc.) to strings before connecting them with the specified delimiter.So, you do not 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 arrayjoinA filter that returns an empty string. This is convenient to use because you usually don't need extra condition checks to handle empty array cases.

Q3:joinFilters andsplitWhat does the filter have to do with it?A3:joinandsplitThe filter is a complementary operation.splitThe filter is used to split a string into an array according to a specified delimiter (for example, to split"AnQiCMS,内容管理"Split into["AnQiCMS", "内容管理"]）。WhilejoinThe filter works in the opposite way, it concatenates array elements into a string using a specified separator. Both are often used together when converting between strings and arrays.