When creating website templates, we often need to control the display length of text to ensure that the page layout is beautiful and information delivery is efficient.For example, limit the number of characters in the article summary, ensure that the text in the navigation menu is not too long, or perform character count verification before form submission.lengthIt can help us easily get the actual character length of a string, array, or key-value pair, and it supports Chinese well.This means that, whether it is English, numbers, or Chinese characters, it counts each character as a unit of length.

Core Tool:lengthFilter

When you need to know the actual length of any string, array, or key-value pair,lengthThe filter is your first choice.It can accurately count the number of characters or elements contained in a variable.lengthThe filter treats Chinese characters as single character lengths when processing, which greatly simplifies the development of websites with multilingual or Chinese content, allowing you to worry less about length calculation issues caused by character encoding.

The method of use is very intuitive, just add it after the variable you want to get the length of|lengthand it is done:

{{ 变量 | length }}

Example demonstration:

Let's see some specific examples to understandlengthHow the filter works:

{# 获取英文字符串长度 #}
<p>英文字符串 "Hello AnQiCMS" 的长度是:{{ "Hello AnQiCMS" | length }}</p> {# 输出: 13 #}

{# 获取中文字符串长度 #}
<p>中文字符串 "你好安企CMS" 的长度是:{{ "你好安企CMS" | length }}</p> {# 输出: 6 #}

{# 获取中英文混合字符串长度 #}
<p>中英文混合字符串 "Hello 你好 AnQiCMS" 的长度是:{{ "Hello 你好 AnQiCMS" | length }}</p> {# 输出: 14 #}

{# 获取数字字符串长度(按字符) #}
<p>数字字符串 "12345" 的长度是:{{ "12345" | length }}</p> {# 输出: 5 #}

{# 获取数组(slice)的元素数量 #}
{% set my_list = ["apple", "banana", "orange"] %}
<p>数组中的元素数量是:{{ my_list | length }}</p> {# 输出: 3 #}

{# 获取键值对(map)的键数量 #}
{% set my_map = {"name": "AnQiCMS", "version": "3.x"} %}
<p>键值对中的键数量是:{{ my_map | length }}</p> {# 输出: 2 #}

You can see from the above examplelengthThe filter can accurately and conveniently return the actual length of different types of data, whether it is a single character, Chinese character, or array element.

Advanced usage:length_isFilter

In some cases, you may need to not only get the length but also judge whether the length of a string is equal to a specific value. At this time,length_isThe filter can be used. It compares the length of the variable with the specified value and returns a boolean value (TrueorFalse)

The usage is as follows:

{{ 变量 | length_is: 期望长度 }}

Example demonstration:

Combinelength_isFilters and conditionals can implement more flexible template logic:

{# 判断字符串长度是否为特定值 #}
<p>"AnQiCMS" 的长度是否为 7:{{ "AnQiCMS" | length_is: 7 }}</p> {# 输出: True #}
<p>"AnQiCMS" 的长度是否为 8:{{ "AnQiCMS" | length_is: 8 }}</p> {# 输出: False #}

{# 判断中文字符串长度 #}
<p>"安企CMS" 的长度是否为 6:{{ "安企CMS" | length_is: 6 }}</p> {# 输出: True #}

{# 结合 if 语句使用 #}
{% set site_name = "我的安企网站" %}
{% if site_name | length_is: 6 %}
  <p>网站名称 "我的安企网站" 长度恰好为6个字符。</p>
{% else %}
  <p>网站名称 "我的安企网站" 长度不是6个字符。</p>
{% endif %}

Application scenarios in practice

lengthandlength_isThese length filters are widely used in template design. For example, when displaying article summaries on list pages, you can combinetruncatecharsFilters andlengthA filter to ensure that the summary does not exceed the maximum length and can dynamically adjust to the actual content to avoid unnecessary ellipses.You can also use it for form validation, to prompt users about the length limit of input content on the client side, improving user experience.For responsive design, dynamically adjusting the content of elements is also very helpful.

Summary

Bylengthandlength_isThese simple yet powerful filters allow you to precisely control the length of strings and data structures in templates, whether it's pure English or complex Chinese scenarios, you can handle them with ease, thereby creating websites with comprehensive functions and good user experience.


Frequently Asked Questions (FAQ)

  1. lengthDoes the filter calculate the length of HTML tags?No,lengthThe filter calculates the actual number of characters in the string content, not the byte length of the original string including HTML tags. If you pass a string containing HTML tags (such as<b>Hello</b>Pass directly tolengthThe filter treats it as 11 characters (including</>/betc.). If you want to get the length of the plain text after removing HTML tags, you need to usestriptagsthe filter to remove