同事踩了lodash的upperCase的坑。

場景：
基金搜索，輸入字符串搜索基金。選擇器按輸入的字符串過濾並展示過濾後的結果。

例如：搜索 "中證A500"
預期能夠出現"國泰中證A500ETF", "銀華中證A500ETF", "嘉實中證A500ETF", "南方中證A500ETF" 等等包含"中證A500"的結果。

但是結果是用户輸入"中證A500" 之後，過濾後的結果為空。

排查原因發現是他在處理toUpperCase的時候使用了lodash.upperCase()

對單一的字母字符串case01，純中文字符串case02，純數字字符串case03，如果我們想把它變成大寫。js原生的toUpperCase和lodash.upperCase() 執行結果相同。

const case01 = "abc";
console.log("origin js toUpperCase ->", case01.toUpperCase()); // "ABC"
console.log("lodash upperCase ->", lodash.upperCase(case01)); // "ABC"

const case02 = "中文測試";
console.log("origin js toUpperCase ->", case02.toUpperCase()); // "中文測試"
console.log("lodash upperCase ->", lodash.upperCase(case02)); // "中文測試"

const case03 = "500";
console.log("origin js toUpperCase ->", case03.toUpperCase()); // "500"
console.log("lodash upperCase ->", lodash.upperCase(case03)); // "500"

但是在 字母字符串、純中文字符串、純數字字符串 三者組合下，情況就發生了變化。

console.log("========04=========");
const case04 = "中文500";
console.log("origin js toUpperCase ->", case04.toUpperCase()); // "中文500"
console.log("lodash upperCase ->", lodash.upperCase(case04)); // "中文 500"

console.log("========05=========");
const case05 = "中文abc";
console.log("origin js toUpperCase ->", case05.toUpperCase()); // "中文ABC"
console.log("lodash upperCase ->", lodash.upperCase(case05)); // "中文ABC"

console.log("========06=========");
const case06 = "中文abc500";
console.log("origin js toUpperCase ->", case06.toUpperCase()); // "中文ABC500"
console.log("lodash upperCase ->", lodash.upperCase(case06)); // "中文ABC 500"

console.log("========07=========");
const case07 = "中文500abc";
console.log("origin js toUpperCase ->", case07.toUpperCase()); // "中文500ABC"
console.log("lodash upperCase ->", lodash.upperCase(case07)); // "中文 500 ABC"

js原生toUpperCase僅處理字符串中的字母字符串部分，將字母字符串中的小寫字母變為大寫;
而lodash.upperCase()不僅會有對 字母字符串 進行小寫->大寫變換, 還會對字符串中的 數字字符串部分 進行(非首位、末位的)前後加空格處理。

這也就導致了"中證A500" 變成了 "中證A 500" ("中證A空格500")，以至於過濾結果為空。

完結。

同步更新到自己的語雀
https://www.yuque.com/dirackeeko/blog/yrvrxzc52gp92qpb