React中使用.match(/\w+/g).length统计单词数报错如何解决

报错原因 #

.match(/\w+/g).length抛出can't read the properties of null (reading 'length')错误，核心逻辑缺陷是：

• 带g标志的正则调用String.match()时，如果没有匹配到任何符合规则的内容，返回值是null而非空数组。不止开头带空格的场景，传入空字符串、全空白字符、纯符号串时，只要没有连续的\w（字母/数字/下划线）字符，就会触发这个空值读取错误。

稳定实现方案 #

方案1：空值兜底为数组（最直观） #

匹配结果为空时兜底成空数组，再读取长度，适配所有场景：

// 单词计数函数
const countWords = (str) => (str.match(/\w+/g) || []).length;

// 测试用例
countWords("  hello world") // 返回2，首尾空格不影响结果
countWords("   ") // 返回0，全空格不报错
countWords("") // 返回0，空字符串不报错
countWords("hi, my name is tom.") // 返回5，标点不干扰计数

如果你的运行环境支持ES2020+，也可以用更严谨的空值合并运算符替换||，避免把合法假值误判为空（当前场景下两种写法效果完全一致）：

const countWords = (str) => (str.match(/\w+/g) ?? []).length;

方案2：可选链+默认值（代码更简洁） #

用可选链运算符直接读取length，读取失败时兜底为0：

const countWords = (str) => str.match(/\w+/g)?.length ?? 0;

注意事项 #

• 上述方案默认的单词规则是「连续的字母、数字、下划线」，如果你的计数规则需要支持缩写（比如don't算1个词）、连字符单词（比如well-being算1个词），可以调整正则匹配规则，空值兜底的逻辑不需要改动。
• 不要用str.split(' ').length的写法计数，这种方式会把首尾空格、连续空格拆分出空字符串项，计数结果会偏大。

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