朱廣蔚 ·Jinja2 模板過(guò)濾器的使用
為了方便對(duì)變量進(jìn)行處理，Jinja2 提供了過(guò)濾器。在上一個(gè)小節(jié)中，講解了 Jinja2 的模板語(yǔ)法，簡(jiǎn)單的介紹了 Jinja2 的過(guò)濾器，本小節(jié)講解了 Jinja2 中常見(jiàn)的過(guò)濾器，并介紹如何編寫(xiě)自己的過(guò)濾器。
1. 過(guò)濾器簡(jiǎn)介
1.1 什么是過(guò)濾器
通過(guò)在 Jinja2 模板中嵌入變量，可以輸出變量的值。但是，在很多情況下，不僅僅只是需要輸出變量的值，還需要修改變量的顯示，對(duì)變量進(jìn)行格式化、運(yùn)算等。為了方便對(duì)變量進(jìn)行處理，Jinja2 提供了過(guò)濾器，Jinja2 過(guò)濾器是一個(gè)函數(shù)，該函數(shù)對(duì)輸入變量進(jìn)行變換處理后，返回一個(gè)值作為 Jinja2 模板的輸出。
1.2 過(guò)濾器的用法
Jinja2 中過(guò)濾器有如下用法：
1. {{ var | filter }}
過(guò)濾器不帶任何參數(shù)，例如，過(guò)濾器 upper 將輸入變量 var 轉(zhuǎn)換為大寫(xiě)， {{“hello” | upper }} 的輸出為 “HELLO”。
2. {{ var | filter(arg) }}
過(guò)濾器帶有參數(shù)，例如，過(guò)濾器 replace (source, target) 將輸入變量 var 中的字符串 source 替換為字符串 target，{{ “idcbgp.cn” | replace (“imooc”, “IMOOC”) }} 的輸出為 “idcbgp.cn”。
3. {{ var | filterA | filterB }}
過(guò)濾器可以組合使用，{{var | filterA | filterB}} 的處理過(guò)程如下：
- 輸入變量 var 傳遞給第一個(gè)過(guò)濾器 fiterA；
- 將過(guò)濾器 filterA 的輸出作為輸入，傳遞給第二個(gè)過(guò)濾器 filterB；
- 將過(guò)濾器 filterB 的輸出作為模板的輸出。
例如：{{“abc” | upper | reverse }} 的輸出為 “CBA”。
2. Jinja2 常用的過(guò)濾器
2.1 字符串操作
capitalize(input)
把變量 input 的首字母轉(zhuǎn)成大寫(xiě)，其余字母轉(zhuǎn)小寫(xiě)，例如：
{{ 'flask' | capitalize }}
輸出：
Flask
title(input)
把變量 input 中的每個(gè)單詞的首字母都轉(zhuǎn)成大寫(xiě)，例如：
{{ 'hello world' | title }}
輸出：
Hello World
lower(input)
把字符串 input 轉(zhuǎn)成小寫(xiě)，例如：
{{ 'ABC' | lower }}
輸出：
abc
upper(input)
把字符串 input 轉(zhuǎn)成大寫(xiě)，例如：
{{ 'abc' | upper }}
輸出：
ABC
revsere(input)
把字符串 input 反轉(zhuǎn)，例如：
{{ 'abc' | reverse }}
輸出：
cba
format(string, arg1, arg2, …)
對(duì)字符串 string 進(jìn)行格式化，例如：
{{ 'I am %s, I am %d years old.' | format('tom', 10) }}
輸出：
I am tom, I am 10 years old.
2.2 列表操作
first(list)
獲取列表 list 中的第一個(gè)元素，例如：
{{ ['www', 'imooc', 'com'] | first }}
輸出：
www
last(list)
獲取列表 list 中的最后一個(gè)元素，例如：
{{ ['www', 'imooc', 'com'] | last }}
輸出：
com
length(list)
獲取列表 list 長(zhǎng)度，例如：
{{ ['www', 'imooc', 'com'] | length }}
輸出：
3
sum(list)
對(duì)列表 list 求和，例如：
{{ [1, 2, 3] | sum }}
輸出：
6
sort(list, reverse = False)
對(duì)列表 list 排序，參數(shù) reverse 為真表示對(duì) list 按倒序進(jìn)行排序，例如：
{{ [1, 3, 2] | sort }}
{{ [1, 3, 2] | sort(reverse = True) }}
輸出：
123
321
join(list, seperator)
將序列 list 中包含的字符串拼接成一個(gè)字符串，使用 seperator 作為連接符，例如：
{{ ['www', 'imooc', 'com'] | join('.') }}
輸出：
idcbgp.cn
2.3 其它常用的過(guò)濾器
striptags(input)
把變量 input 中所有的 HTML 標(biāo)簽都刪掉，例如：
{{ '<h1>idcbgp.cn</h1>' | striptags }}
輸出：
idcbgp.cn
escape(input)
將變量 input 中的 < > 等符號(hào)轉(zhuǎn)義成 HTML 中的符號(hào)，例如：
{{ '1 < 2' | escape }}
{{ '2 > 1' | escape }}
輸出：
1 < 2
2 > 1
default(value, default_value=’’)
如果變量 value 不存在，使用默認(rèn)值 default_value，例如，變量 gender 未定義：
{{ gender | default('male') }}
輸出：
male
如果變量 value 存在，使用原有的值，例如，變量 gender 存在且值為 ‘female’：
{{ gender | default('male') }}
輸出：
female
3. 自定義過(guò)濾器
3.1 自定義過(guò)濾器的方法
開(kāi)發(fā)者可以定義自己的過(guò)濾器，有兩種方法：
- 使用
app.add_template_filter(filter_function, filter_name)，將函數(shù) filter_function 注冊(cè)為名稱為 filter_name 的過(guò)濾器； - 使用
@app.template_filter(filter_name) 裝飾一個(gè)函數(shù) filter_function，將函數(shù) filter_function 注冊(cè)為名稱為 filter_name 的過(guò)濾器。
3.2 例子
本小節(jié)通過(guò)一個(gè)例子，說(shuō)明自定義過(guò)濾器的使用方法。
3.2.1 主程序 app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html', input = 123)
編寫(xiě)路徑 / 的處理函數(shù) index ()，將變量 input 傳遞給模板 ‘index.html’。
def increase(input):
output = input + 1
return output
app.add_template_filter(increase, 'increase')
函數(shù) increase 的功能是將輸入變量加 1。使用 app.add_template_filter(increase, 'increase')，將函數(shù) increase 注冊(cè)為名稱為 ‘increase’ 的過(guò)濾器。
@app.template_filter('decrease')
def decrease(input):
output = input - 1
return output
函數(shù) decrease 的功能是將輸入變量減 1。使用 @app.template_filter (‘decrease’)，將函數(shù) decrease 注冊(cè)為名稱為 ‘decrease’ 的過(guò)濾器。
app.run(debug = True)
最后啟動(dòng) Flask 程序。
3.2.2 模板 templates/index.html
編寫(xiě) Jinja2 模板文件 templates/index.html，放在目錄 templates 下。
<html>
<body>
<h2>increase {{input}} = {{ input | increase }}</h2>
<h2>decrease {{input}} = {{ input | decrease }}</h2>
</body>
</html>
在第 3 行，{{input | increase}} 使用過(guò)濾器 increase 對(duì) input 進(jìn)行加 1 操作；在第 4 行，{{ input | decrease }} 使用過(guò)濾器 decrease 對(duì) input 進(jìn)行減 1 操作。
3.2.3 例子運(yùn)行結(jié)果
在瀏覽器中打開(kāi) localhost:5000，顯示如下：
3.3 源代碼下載
4. 小結(jié)
本節(jié)講解了 Jinja2 中常見(jiàn)的過(guò)濾器，并介紹了如何定義自己的過(guò)濾器，使用思維導(dǎo)圖總結(jié)如下：
2025 imooc.com All Rights Reserved |