JavaScript如何同时调用多个字符串方法实现课程搜索不区分大小写

你之前代码的问题根源是仅对课程标题做了大小写转换，没有对搜索关键词this.result做统一的格式处理，才会出现大小写匹配失败的问题。

要实现忽略大小写、忽略前后输入空白的模糊搜索，不需要同时调用toLowerCase()和toUpperCase()，二者功能互斥，选其中一种即可，搭配trim()分别作用在搜索关键词和课程标题两端，就能满足需求。

优化后的代码如下：

GetMyCourses() {
  // 预处理搜索关键词：去除前后空白 + 统一转小写
  const formattedSearchKey = this.result.trim().toLowerCase()
  return this.courses.filter(value => {
    // 课程标题也做相同格式处理后再判断包含关系
    return value.title.trim().toLowerCase().includes(formattedSearchKey)
  })
}

代码逻辑说明 #

• 先对搜索关键词做统一格式预处理，避免在filter循环中重复处理相同内容，提升执行性能
• trim()用于去除用户输入时误输入的前后空格，以及部分课程标题可能存在的首尾空白字符
• 搜索关键词和课程标题都统一转小写后再做包含判断，完全规避大小写差异带来的匹配问题
• 如果偏好使用大写转换，把两处toLowerCase()替换为toUpperCase()即可，效果完全一致

内容的提问来源于stack exchange，提问作者Synchro