用這個被低估的 JavaScript 特性，化繁為簡處理復雜邏輯
當你的代碼庫還很小的時候，一切都清清楚楚、直來直去。
可一旦項目膨脹，函數像藤蔓一樣彼此勾連，層層嵌套把本來簡單的邏輯攪成一鍋粥。
這時函數式編程就開始顯神通了。我最初入門時靠的是一個優雅的小工具——compose。它把混亂的嵌套調用改造成有序的變換序列，看起來就順眼多了。
而現在，我們無需再額外寫工具，也能做到同樣甚至更清晰的表達。
你不再把函數一層層包起來，而是用一個簡單的運算符從左到右把它們串起來。
先上手，再解釋。
把“套娃式”調用拉平成管道
在 ES2025 中，有一個被提案的運算符，用來把嵌套且凌亂的函數調用改寫成直觀易讀的流水線。它能把那些“里三層外三層”的表達拆解成一條人人都能跟得上的數據管道。
目前它處于 TC39 Stage 2，意味著正在積極推進，但尚不適合直接用于生產。
管道運算符（|>）允許你從左到右串聯操作，而不是傳統的“從最里層往外讀”。把它想成數據的傳送帶：每一步拿到上一步的結果，繼續變換。
// 現在的寫法——嵌套調用
const result = h(g(f(x)));
// 使用管道運算符
const result = x |> f |> g |> h;它的精妙之處在于占位符機制：用一個特殊的占位符，精確標注“上一步的值應該放到哪里”。
// 傳統嵌套（讀起來費勁）
const result = formatCurrency(
calculateTax(
applyDiscount(getPrice(product), 10),
0.08
)
);
// 管道 + 占位符（清楚、線性）
const result = product
|> getPrice(%)
|> applyDiscount(%, 10)
|> calculateTax(%, 0.08)
|> formatCurrency(%);有了占位符，你就能精準控制數據的落點。
正是占位符把管道運算符從“錦上添花”推到了“不可或缺”。
const data = users
|> %.filter(u => u.active)
|> %.map(u => u.name)
|> { count: %.length, names: % }
|> JSON.stringify(%, null, 2);示例 1：API 數據處理
// 之前：層層嵌套，讀寫都吃力
const processUserData = (response) => {
return response.users
.map(user => ({
...user,
fullName: formatName(user.firstName, user.lastName),
isActive: checkStatus(user.status, 'active')
}))
.filter(user => user.isActive)
.sort((a, b) => a.fullName.localeCompare(b.fullName));
};
// 之后：清晰的管道
const processUserData = (response) => {
return response.users
|> %.map(user => ({
...user,
fullName: formatName(user.firstName, user.lastName),
isActive: checkStatus(user.status, 'active')
}))
|> %.filter(user => user.isActive)
|> %.sort((a, b) => a.fullName.localeCompare(b.fullName));
};示例 2：表單校驗流水線
const validateForm = (formData) => {
return formData
|> sanitizeInput(%)
|> validateRequired(%, ['email', 'password'])
|> validateEmail(%.email) ? % : { ...%, errors: [...%.errors, 'Invalid email'] }
|> validatePassword(%.password) ? % : { ...%, errors: [...%.errors, 'Weak password'] }
|> %.errors.length === 0
? { valid: true, data: % }
: { valid: false, errors: %.errors };
};示例 3：字符串處理鏈
// 把用戶輸入變成 URL slug
const createSlug = (title) => {
return title
|> %.toLowerCase()
|> %.trim()
|> %.replace(/[^\w\s-]/g, '')
|> %.replace(/\s+/g, '-')
|> %.substring(0, 50)
|> %.replace(/-+$/, '');
};注意到沒有？占位符 % 讓你可以直接在管道值上調用方法。這份靈活性正是我們一直缺少的。
如何在項目里先用起來
雖然管道運算符還停留在 Stage 2，但你可以通過 Babel 7.15+ 先行體驗。
安裝 Babel 插件：
npm install --save-dev @babel/plugin-proposal-pipeline-operator配置 .babelrc：
{
"plugins": [
[
"@babel/plugin-proposal-pipeline-operator",
{
"proposal": "hack",
"topicToken": "%"
}
]
]
}完成后，你就可以愉快地寫管道代碼，由 Babel 將其轉譯為當前瀏覽器可執行的形式。
我已經在生產中以轉譯方式使用了數月，產物干凈、性能穩定。
重點回顧
在它正式進入 Stage 4 并被各大瀏覽器實現之前，我們就應該為這種表達方式的轉變提前做準備。
“管道 + 占位符” 的組合很可能會重塑我們對數據變換的思考路徑：不必寫深層嵌套，不必反復引入中間變量，而是用從左到右的清晰流程表達意圖。
我已陸續嘗試并實踐了一段時間，非常期待在評論區聽到你的看法與建議。
