记录空白字符（零宽空格）的坑-两个同样的URL，为什么其中一个会请求失败

目录

前言

原理

如何判断

更方便的判断方法

其他相关文章

---

前言

今天测接口，直接复制后端人员给的接口文档，结果不管怎么请求状态码都是400（服务器不理解我的请求语法，4开头的错一般都是前端请求的问题）。然后我直接重新一个字符一个字符的输入，你猜怎么着，成功了，状态码200。

原理

不过，为什么自己输入就可以，复制的就不行呢？

然后我打开了一个文本对比工具，将我复制的（图左）和输入的（图右）都放了进去

对比工具

咋一看还以为是斜杠出了问题，其实并不是斜杠的问题

这是一个叫零宽空格的搞的鬼

如果去QQ输入框复制这个字符串，就能看到，中间其实是有东西的

QQ聊天框

用 JavaScript中 的 encodeURI("") 也可以发现这里面其实另有东西（这段代码的斜杠前面是有零宽空格的）

console.log(encodeURI("​/abcdefg​/hijklmn​/"));

下面是打印出来的结果，【%E2%80%8B】就是零宽空格

%E2%80%8B/abcdefg%E2%80%8B/hijklmn%E2%80%8B/

下列代码中间有零宽空格，你发现了吗

abcafdsljfsdnzq​w​e​r​t​h​n​b​c​d​f​g​h​j​k​,​m​h​g​i​h​l​k​,123456789

如何判断

那平时如何判断零宽空格呢，难道每次都得打开QQ复制字符串？

其实没那么麻烦，前文提到JavaScript的encodeURI可以打印零宽空白的

可以在浏览器按下【Ctrl+shift+J】打开控制台，然后输入 encodeURI("") ，双引号内放想判断问题的字符串，之后看打印的结果中有没有 【%E2%80%8B】 即可

应该不会有程序员debug的时候不开浏览器吧，不会吧不会吧

更方便的判断方法

我用Edge浏览器和Chrome浏览器的控制台，发现直接复制进去就能发现有零宽空白的地方都变成了点，都不需要看打印结果来判断了，真好。

控制台  （直接复制就行，不需要写前面的 encodeURI ）

这个方法甚至能看到其他不可见字符（真是妙啊）

例如：UTF-8编码格式有时候会带BOM头，这个BOM头用 encodeURI 可以打印出“%EF%BB%BF”。

其他相关文章

这里有两个对零宽空格的说明写得挺好

浅析什么是零宽度字符以及零宽度字符在实际中的应用场景 - 古兰精 - 博客园 (cnblogs.com)

零宽空格 - 中文维基百科【维基百科中文版网站】 (studiodahu.com)