ReactJS/ES6：如何使用includes正确搜索日文文本？

遇到日文搜索用includes()匹配失败的情况，绝大多数是Unicode字符规范化不一致导致的——日文里的假名（比如拗音、促音）存在两种Unicode编码形式，而includes()是严格按字符码点匹配的，哪怕视觉上完全相同，编码不同就会匹配失败。

问题根源举个例子 #

你提到的"フェリーチェ三田"里的"フェ"，可能被存储为两个独立字符：フ（U+30D5） + ェ（U+30A7）；而你输入的搜索词"フェ"，可能是预合成的单一字符（U+30F7）。这两个字符视觉完全一样，但码点不一样，includes()自然识别不出来。

最直接的解决方案：统一Unicode规范化形式 #

使用JavaScript的String.prototype.normalize()方法，把待搜索的文本和搜索关键词统一转换成相同的规范化形式（推荐用NFC，即预合成形式，是大多数系统的默认存储方式），之后再用includes()匹配：

// 对数据文本和搜索词都做规范化处理
const normalizedTitle = japaneseData.title.normalize('NFC');
const normalizedSearchTerm = search.value.normalize('NFC');

if (normalizedTitle.includes(normalizedSearchTerm)) {
  // 匹配成功的逻辑
}

如果NFC不行，也可以试试NFD（分解形式），只要两边用同一种规范就行。

额外处理：全角/半角统一 #

如果用户可能输入半角假名（比如ﾌｪ）而你的数据是全角假名（フェ），还需要先统一全角半角格式，再做规范化：

// 半角转全角工具函数
function convertToFullWidth(str) {
  return str.replace(/[!-~]/g, char => 
    String.fromCharCode(char.charCodeAt(0) + 0xFEE0)
  );
}

// 处理流程：先转全角，再规范化
const processedTitle = convertToFullWidth(japaneseData.title).normalize('NFC');
const processedSearch = convertToFullWidth(search.value).normalize('NFC');

if (processedTitle.includes(processedSearch)) {
  // 匹配成功
}

进阶：更智能的日文搜索 #

如果需要支持更复杂的场景（比如忽略浊音差异、罗马音搜索），客户端可以考虑使用轻量的日文处理库，但对于基础的精确匹配，上面的方法已经足够解决绝大多数问题了。

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