React Native中string.length返回异常值，条码正则匹配失败求助

核心原因分析 #

• 字符中混入不可见控制字符：你看到的"5449000214911"表面是13位数字，但实际每个字符之间可能夹了空字符（\0）、换行符或者其他零宽控制字符——这些字符肉眼不可见，但会被计入字符串长度，导致13个数字变成26个字符（每个数字+一个隐藏字符）。
• 事件监听重复收集字符：如果同时监听了keydown和keyup两个事件，每次按键会触发两次字符收集逻辑，13个按键就会被添加26次字符，最终字符串长度直接翻倍。

排查与解决步骤 #

1. 先排查字符串真实内容：把条码字符串转成字符数组打印，直接看到每个元素的真实情况：

   console.log([...barcodeStr]);
   

   如果输出是"5", "\0", "4", "\0"...这种，就是混入了空字符；如果是"5", "5", "4", "4"...，就是重复收集了字符。

2. 针对重复收集的解决：检查componentDidMount里的事件监听，只保留keydown或keyup其中一个，比如：

   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyPress);
     // 删掉keyup的监听，避免重复触发
   }
   

3. 针对不可见字符的解决：在校验前先清理字符串，过滤掉非数字的所有字符：

   const cleanedBarcode = barcodeStr.replace(/\D/g, '');
   // 或者更精准过滤控制字符
   // const cleanedBarcode = barcodeStr.replace(/[\x00-\x1F\x7F]/g, '');
   

   之后用清理后的字符串去做正则匹配，比如EAN-13的校验逻辑：

   function getBarcodeType(barcode) {
     const cleaned = barcode.replace(/\D/g, '');
     if (/^\d{13}$/.test(cleaned)) {
       return 'EAN-13';
     }
     return null;
   }
   

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