In the presentation of website content, we often need to display various numbers, such as product prices, discount percentages, or statistical data.These values 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, for example, to keep two decimal places uniformly.floatformatFilter to achieve this requirement.

Core Function:floatformatFilter

floatformat

Its basic usage is very intuitive:

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

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

  • Not specified位数or specify as0:In this case,floatformatFilter will default to keeping one decimal place. But if the decimal part ends with zero (such as34.00），it will completely remove the decimal part and only display the integer. If the decimal part contains non-zero digits (for example34.23)，it will retain one decimal place and round it.
  • positive integer位数:When you provide a positive integer (for example2or3){floatformatThe filter will accurately format numbers to the specified number of decimal places. If the original number has fewer decimal places, it will automatically add zeros at the end; if it exceeds, it will be rounded off.
  • Negative integer位数:This is a very practical feature, when you specify a negative integer,floatformatNo longer controls the number of decimal places, but rounds the number from the end of the integer part. For example,floatformat:-2It will34234.23Rounded to the nearest hundred, displayed as34200.

Practical example

Let us understand deeply through several specific examplesfloatformatThe 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 displayed 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 precisely, such as retaining two or three decimal places, no matter what the original number is, it will be filled with zeros 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 displayed 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 thousands or hundreds.

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

    The displayed result will be:

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

  4. Combined with the actual application of AnQiCMS:Assume your AnQiCMS backend defines a custom numeric field namedPricein the content model, and you 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 retrieve the product's price, then not only format the original price, but also demonstrate how to format the result after performing calculations (such as 85% off) and then re-format the result to ensure that the final displayed price is always shown with two decimal places.

Precautions

  • Data type compatibility: floatformatThe filter performs well in AnQiCMS, it can intelligently handle various input types. Whether it is the actual in the Go languagefloat64Numbers, or even strings representing 'floating-point numbers' (such as those returned from some APIs), can be correctly converted and formatted in the template."123.45"），它都能进行正确的转换和格式化。
  • Rounding rules:This filter performs a standard rounding operation (round half up), that is, if the decimal part is.5then round up