[JS] js原生 toUpperCase 和 lodash中的upperCase 区别

同事踩了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