In the presentation of website content, we often need to display various numbers, such as product prices, discount percentages, or statistical data.These numbers are often floating-point numbers, and in order to ensure the beauty of the page layout and the clarity of the information, we usually need to format them, such as retaining two decimal places uniformly.In AnQiCMS templates, thanks to its flexible template engine, we can conveniently make use of the built-infloatformatFilter to achieve this requirement.

Core function:floatformatFilter

floatformatThe filter is a tool specifically designed in the AnQiCMS template to handle floating-point number display.Its main function is to format a number (whether the original type is a floating-point number or a string resembling a floating-point number) into a text with a specified number of decimal places.If the decimal part of the original number is not long enough to the specified number of digits, it will automatically fill in zeros;If the number exceeds the specified number of digits, it will be rounded off to the standard value.

Its basic usage is very intuitive:

{{ 变量名|floatformat:位数 }}

Among them,变量名It is the number you want to format, while位数then it is the number of decimal places you want to retain, it can also accept some special values to control the formatting behavior:

  • Default位数or specified as0:In this case,floatformatThe filter will try to retain one decimal place by default. But if the decimal part ends with zero (such as34.00It will remove the decimal part completely and only show the integer. If the decimal part has a non-zero digit (such as34.23), it will retain one decimal place and round to the nearest whole number.
  • Positive integer位数:When you provide a positive integer (such as2or3),floatformatThe filter will accurately format numbers to the specified decimal places. If the original number has fewer decimal places, it will automatically add zeros at the end; if it exceeds, it will round up.
  • negative integer位数:This is a very practical feature, when you specify a negative integer,floatformatIt is no longer controlling the number of decimal places, but rounding from the end of the integer part of the number. For example,floatformat:-2Will34234.23Round up to the nearest hundred and display as34200.

useful example

Let's delve into a few specific examples to gain a deeper understandingfloatformatThe actual application of filters. Suppose we have a product priceproductPrice, its value might be34.23234or34.00000:

  1. Default formatting (without specifying the number of digits):When you do not specify the number of decimal places, it will retain one decimal place but will remove the trailing zeros.

    <p>默认格式化（34.23234）：{{ 34.23234|floatformat }}</p>
<p>默认格式化（34.00000）：{{ 34.00000|floatformat }}</p>

    The result will be:

    默认格式化（34.23234）：34.2
默认格式化（34.00000）：34

  2. Specify the number of decimal places (positive integer):If you need to control the number of decimal places accurately, such as retaining two or three decimal places, regardless of the original number, it will be zero-filled or rounded off according to this rule.

    <p>保留两位小数（34.23234）：{{ 34.23234|floatformat:2 }}</p>
<p>保留三位小数（34.00000）：{{ 34.00000|floatformat:3 }}</p>
<p>四舍五入到整数（39.56000）：{{ 39.56000|floatformat:0 }}</p>

    The result will be:

    保留两位小数（34.23234）：34.23
保留三位小数（34.00000）：34.000
四舍五入到整数（39.56000）：40

  3. Use negative integers for rounding:This feature is very useful when you need to round large numbers to the thousandth or hundredth place.

    <p>四舍五入到千位（34234.23）：{{ 34234.23|floatformat:-3 }}</p>
<p>四舍五入到百位（34567.89）：{{ 34567.89|floatformat:-2 }}</p>

    The result will be:

    四舍五入到千位（34234.23）：34000
四舍五入到百位（34567.89）：34600

  4. Combined with the actual application of AnQiCMS:Assuming your AnQiCMS backend defines a named custom number field for products in the content modelPriceYou can display it like this on the product detail page

    {% archiveDetail productData with name="Price" %}
<p>产品原价：<span>￥{{ productData|floatformat:2 }}</span></p>
<p>会员折扣价：<span>￥{{ (productData * 0.85)|floatformat:2 }}</span></p>

    Here, we first obtained the product price, then not only formatted the original price, but also demonstrated how to format the result after performing calculations (such as 85% off) and then format the result again to ensure that the final displayed price is always displayed with two decimal places.

Points to note

  • Data type compatibility: floatformatThe filter performs well in AnQiCMS, it can intelligently handle various input types. Whether it is the actual input in Go language,float64The number, whether it is a "floating-point number" in a template in string form (for example, from some API returned),"123.45"It can be correctly converted and formatted.
  • Rounding rules:This filter performs the standard rounding (round half up) operation, that is, if the decimal part is exactly.5then round up