How to display formatted numbers without changing the original data type?

Calendar 👁️ 61

In the presentation of content on the website, the way numbers are displayed often directly affects users' perception and understanding of information.Many times, we want to format numbers, such as displaying prices with two decimal places, adding a percentage sign when showing percentages, or formatting large numbers in a more readable way.The Anqi CMS provides a powerful and flexible template engine, allowing us to easily implement these refined numerical display requirements without modifying the original data type.

The AnQi CMS template engine uses a syntax style similar to Django or Blade, which outputs variable content through double curly braces{{变量}}and uses single curly braces with the percent sign{% 标签 %}Use various tags and logic controls. This design philosophy allows front-end developers to focus on page display without delving into backend code to adjust the data itself.The key to implementing number formatting lies in flexibly using the built-in "Filters" in the template.

Achieve elegant presentation of numbers through template filters

The filter is a very practical feature of Anqi CMS template engine, which allows us to process various output variable values, including but not limited to text operations, logical judgments, and the number formatting we are focusing on today.After passing the data into the filter, it will return a new value that has been processed but retains the original data type, perfectly fitting the core requirement of 'displaying formatted numbers without changing the original data type'.

Next, we will introduce several core filters used for number formatting in Anqi CMS and their applications.

1.floatformat: Precise control of the decimal places of floating-point numbers

floatformatThe filter is specifically designed for floating-point numbers (decimals), which can help us control the number of decimal places displayed.No matter whether it is used to display product prices on e-commerce websites or to present precise percentages in data reports, this filter comes in handy.

Basic usage: {{ 变量 | floatformat:位数 }}

  • When no specific digits are specified,floatformatThe default is to try to keep one decimal place, and if the last digit is 0, it will not display the decimal, and it will be rounded to the nearest whole number. For example, if the price of your product isproduct.pricestored as34.23234:{{ product.price|floatformat }}May be displayed34.2Ifproduct.priceIs34.00000It will display34Ifproduct.priceIs34.26000It will display34.3.

  • When a specific number of decimal places is specified, it will display strictly to the specified number of decimal places and round off accordingly. For example, display the price to two decimal places:{{ product.price|floatformat:2 }}Ifproduct.priceIs34.23234 displayed as34.23Ifproduct.priceIs34.00000 displayed as34.00Ifproduct.priceIs34.26000 displayed as34.26.

ByfloatformatYou can ensure that prices, ratings, and other numerical values remain consistent and easy to read on the page.

2.stringformatThe universal tool for number formatting:

stringformatThe filter is more powerful and flexible, it can output any value such as numbers, strings, etc. according to the format template you define. Its function is similar to that in Go language.fmt.Sprintf()Allow you to precisely control the structure and style of the output content with placeholders.

Basic usage: {{ 变量 | stringformat:"格式定义" }}

  • Integer formatting (%d):If you have a stock quantityproduct.stockWith12345, and want to add "piece":{{ product.stock|stringformat:"%d件" }}Will be displayed12345件.

  • Floating point formatting and precision control (%f/%.nf):Combine%.nfCan control the precision of floating-point numbers, which isfloatformatsimilar tostringformatbut can also add additional prefixes or suffixes. For example, to display pricesproduct.price(199.998) Format as currency with a symbol and two decimal places:{{ product.price|stringformat:"¥%.2f" }}Will be displayed¥199.99.

  • Percentage display:Assuming you have a discount ratediscount.rateIs0.75, you want to display as75%:{{ (discount.rate * 100)|stringformat:"%.0f%%" }}Will be displayed75%.(Note%%This indicates that a percentage sign is output.) Ifdiscount.rateIs directly75:{{ discount.rate|stringformat:"%d%%" }}Will also be displayed75%.

stringformatIts flexibility makes it a powerful tool for handling various numerical display scenarios, allowing you to build almost any desired numerical output format.

3.stampToDate: The exclusive timestamp formatting tool

Although it is not strictly in the format of 'number' formatting, the timestamp is essentially a string of numbers. Anqi CMS provides specialstampToDateThe label is used to convert timestamps into readable date and time formats. This is also formatting the numbers without changing the original timestamp data.

Basic usage: {{ stampToDate(时间戳, "格式") }}

  • For example, you have the creation time of a documentarticle.CreatedTimeIt is a timestamp1675862400, you want to display as2023年02月09日:{{ stampToDate(article.CreatedTime, "2006年01月02日") }}Will be displayed2023年02月09日.

This "format" string follows the Go language's time formatting rules, using a specific reference time (2006-01-02 15:04:05) to define the output format.

Summary

Our CMS simplifies the development and maintenance of website content by providing a series of powerful and easy-to-use template filters.Whether it is to precisely control the decimal places of floating-point numbers, or to encapsulate numbers into custom text formats, or to convert timestamps into readable dates, these filters allow you to 'beautify' data at the template level without touching the original form of the backend data.This ensures data consistency and integrity, as well as great flexibility and convenience for front-end content display.

Common questions (

Related articles

I have a numeric string that needs to be converted to an integer and used as the `limit` parameter, can I do that?

In Anqi CMS template development, we often need to handle various types of data.Sometimes, data obtained from external interfaces or user input exists in string form, but we need to use it as a number, for example, when displaying the number of items in the control list with the `limit` parameter.Then, can a numeric string be converted to an integer in the template and used as a `limit` parameter?The answer is affirmative, and Anqicms provides a simple and powerful way to achieve this.

2025-11-08

Does the `floatformat` filter support negative number of decimal places, to discard decimal places from right to left?

In AnQi CMS, the details of content display often determine the quality of user experience.How to present numbers commonly seen on websites, especially floating-point numbers, in a clear, accurate, and expected format is a concern for content operators.The Anqi CMS template engine provides a variety of powerful filters to assist us in processing data, among which the `floatformat` filter is a powerful tool for displaying floating-point numbers.

2025-11-08

How to display different text or icons in the AnQiCMS template based on the size of a number (such as order amount)?

In website content management, we often need to dynamically display different information based on the specific numerical values of the data, which can not only improve user experience but also make the content more expressive.For example, display different discount prompts, VIP level icons, or "In stock" or "Out of stock" based on inventory quantity.AnQiCMS provides flexible and powerful template functions, allowing easy implementation of conditional judgments and content display based on numerical values.

2025-11-08

How to sum up sales data that may be a string read from the database in the template?

In website operation, we often need to handle various data, among which the sales data of products or articles is particularly common.To better analyze and display, we may need to perform cumulative calculations on the sales data in the front-end template of the website.However, the data type read from the database is not always purely numerical, and it may sometimes exist in the form of a string, which presents a challenge for direct mathematical operations.The Anqi CMS, with its flexible template engine and powerful data processing capabilities, provides us with an elegant solution.

2025-11-08

How does the `get_digit` filter perform on Chinese string input?

During the template development process of AnQiCMS, we often use various filters to process and format data.The `get_digit` filter is one of them, its main function is to extract the specified digit from a number.However, when we pass Chinese string as input to the `get_digit` filter, its behavior may be different from what we intuitively expect.### `get_digit` filter's basic function First, let's review the `get_digit`

2025-11-08

How to convert a floating-point number in a template to an integer and then perform logical comparison with other integers?

During the process of website operation and content management, we often need to perform fine control and logical judgment on the displayed data.Especially at the template level, data type conversion is a common requirement.For example, when a certain value stored in your content management system (such as product prices, stock quantities, etc.) is of floating-point type, but you may want to treat it as an integer when performing logical comparisons in the template.AnQiCMS (AnQiCMS) with its powerful template engine similar to Django provides a direct and efficient solution for such scenarios

2025-11-08

How can a template determine whether a variable is a valid number (integer or floating-point), so that it can perform subsequent operations?

In Anqi CMS template development, we often need to handle various types of data.In which, determining whether a variable is a valid number (whether an integer or a floating-point number), in order to perform corresponding mathematical operations or display logic, is a common requirement.Although the Anqi CMS template engine (based on Django template syntax) does not provide a direct `is_numeric` function, we can cleverly use its built-in filters and logical judgment tags to achieve this goal.The AnQi CMS template language is designed simply and efficiently, variables are usually through double curly braces

2025-11-08

How can a number conversion filter be used to process numeric (string) values submitted by a front-end form?

In website operation, we often encounter situations where users need to enter numerical values in front-end forms, such as product quantity, price range, and user age, etc.However, these data obtained from the form, even though they look like numbers, are often treated as string types by the Web system.This brings inconvenience to subsequent calculations, comparisons, and presentations, which may lead to type errors or inaccurate calculation results.AnQiCMS (AnQiCMS) leverages its powerful functionality based on the Django template engine to provide a series of concise and efficient filters (filters)

2025-11-08