JS怎么去除字符串中的所有空格

一、为什么常规方法会失效：常见误区解析

在处理用户输入、解析外部接口数据或格式化手机号、身份证号时，去除多余空格是极为高频的需求。然而，很多开发者在初次实现“去除所有空格”时，往往会踩入以下两个经典误区：

1. 误将 trim() 当作全局清空

String.prototype.trim() 的规范定义是：从字符串的两端删除空白字符（包括空格、制表符、无中断空格等），并返回一个新的字符串。它不会改变位于字符串内部的任何空格。

const raw = "  Hello   World  ";
const res = raw.trim();
console.log(res); // 示例输出: "Hello   World" （中间三个空格依然存在）

2. 误用单次替换 replace(' ', '')

String.prototype.replace() 在接收第一个参数为纯字符串（非带 g 标志的正则）时，仅仅会替换第一个匹配项，一旦找到首个空格完成置空，便会立即终止扫描。

const raw = "138 0000 1111";
const res = raw.replace(' ', '');
console.log(res); // 示例输出: "1380000 1111" （仅消除了 138 后面的第一个空格）

二、标准通用方案：正则表达式全局替换

若需要无死角地清除字符串中包含的每一个空格，同时防范换行符 、制表符 以及中文排版常见的全角空格 　，正则表达式是最稳妥、兼容性最好的方案。

// 推荐通用写法：使用 \s+ 配合全局修饰符 g
function removeAllSpaces(str) {
  if (typeof str !== 'string') return '';
  return str.replace(/\s+/g, '');
}

// 验证多种复杂空白字符
const complexSample = "  JS 	 深入 
 理解　 全角空格  ";
const cleanResult = removeAllSpaces(complexSample);
console.log(cleanResult); 
// 示例输出: "JS深入理解全角空格"

语法深度解析：

• \s 元字符：匹配任何空白字符。根据 ECMAScript 规范，\s 涵盖 ASCII 空格（ ）、水平制表符（ ）、回车换行符（ 、 ）、垂直制表符（）、换页符（ ）以及所有 Unicode 空白字符（包含全角空格 　 和不换行空格  ）。
• + 量词：表示贪婪匹配一个或多个连续的空白字符。虽然单个 /\s/g 也能达到去空格目的，但 /\s+/g 可以将相邻的连续多个空白合并为一个匹配块一次性替换，大幅降低底层引擎的回调与字符串拼接频次，在中长文本处理时吞吐性能更优。
• g 全局修饰符：指示引擎在首次匹配成功后不退出，持续扫描推进至字符串末尾（End of String）。
• 第二个参数 ''：将所有被匹配捕获的空白块替换为空串，从而完全剔除。

三、现代与替代解法：精准匹配与数组转换

除了正则表达式之外，根据特定的场景和运行环境要求，还可以采用以下两种常见方案：

1. 现代规范 API：str.replaceAll(' ', '')

ECMAScript 2021（ES12）正式引入了 String.prototype.replaceAll()。当只希望剔除标准的英文半角空格 ' '，而不希望误伤文本中可能包含的换行或制表缩进时，该方法语义最为直观：

const str = "a b c d e";
const res = str.replaceAll(' ', '');
console.log(res); // 示例输出: "abcde"

2. 经典数组拆分法：str.split(' ').join('')

在不支持 replaceAll 的极其古老的浏览器（如 IE 系列）或早期 JavaScript 运行环境中，常用 split 与 join 配合来消除单字节空格：

const phone = "188 8888 9999";
const res = phone.split(' ').join('');
console.log(res); // 示例输出: "18888889999"

运作机制与代价：该方法先根据空格把字符串分割成由若干子串组成的数组，再将其无缝拼接。其缺点在于在内存中额外创建了一个临时数组，如果处理兆字节（MB）级别的超长字符串或在密集动画循环中调用，会引起额外的垃圾回收（GC）开销。

四、方案选型决策与实战考量

面对不同的业务输入形态与运行时限制，如何做出合理选择？以下决策流程图可作为清晰的判断依据：

工程实践中的防御性编程

在实际生产环境中，后端 API 或前端表单绑定的变量值可能为 null、undefined 或数值类型。直接在非字符串上调用上述方法会抛出 TypeError: str.replace is not a function。推荐在封装工具函数时加上安全前置校验或可选链：

// 生产级安全工具函数
export function stripAllWhitespace(val) {
  if (val === null || val === undefined) return '';
  return String(val).replace(/\s+/g, '');
}

// 验证非字符串输入
console.log(stripAllWhitespace(null));        // 示例输出: ""
console.log(stripAllWhitespace(1234));        // 示例输出: "1234"
console.log(stripAllWhitespace(" 95588 "));   // 示例输出: "95588"

五、各实现方案核心指标横向对照

为方便在代码审查与技术选型中快速查阅，下表汇总了各方案在空白覆盖类型、作用范围、规范版本与推荐等级上的差异：