幽灵般的存在:零宽空白
最近在用AngularJS进行开发时遇到了灵异事件,从某网站拷贝下来的看似无比正确的代码运行总是出错。
经验告诉我们,看上去正确的代码可能实际上并不正确。我是指字符层面上。其中可能存在乱码,存在奇怪的空白字符,这些均会导致问题。
然而我仔细检查了一番,并未发现乱码和多余空格。唯一的异常情况是,AngularJS的插值字符串{{xxx}}在Visual Studio中的代码着色不太对。在安装了VS的最新Web工具后,这插值字符串中xxx应当被编辑器识别并显示紫色,{{和}}会加粗显示,但是这一段粘贴来的代码中它们仍显示蓝色,和正常HTML attribute一样。
我起初并未放在心上,以为这只是VS的一个小bug。但诸般走投无路后,我开始重新审视这个异常。当我尝试就地手打一个{{进去并观察到正确的加粗、着色后,我认为目标已锁定。
我复制了这个手打的{{并粘贴取代原来的“{{”,那着色一下子就正常了。替换了所有的插值字符串后,程序运行完全正常了。
很明显,这看上去完全一样的“{{”是不同的字符。在Chrome Console中检验相等性,返回false。
但到了这一步,我的思维还未达到。我推断其中至少有一个{不同。用charCodeAt()函数检验一下,果然,charCodeAt(0)为123,这是正常的{符号无疑;charCodeAt(1)返回8203,这是个什么鬼!是{的孪生兄弟吗?
不是的。查找资料后得知,这个字符叫做Zero Width Space,中文可称为“零宽空白”。看到这里我恍然大悟,原来之前我一直被骗了,那个邪恶的字符串居然不是你看到的两个字符,而是三个。参见维基百科
http://zh.wikipedia.org/wiki/%E7%A9%BA%E6%A0%BC
8203字符即其中的U+200B。
一个有趣的JSFuck式的应用见
http://ucren.com/blog/archives/549
这个字符在主流文本编辑器中均没有任何显示效果,就像一只看不见、摸不着的幽灵。我一般习惯让文本编辑器显示空白字符,以区分普通空白、制表符、换行符等,但是遇到这个零宽空白,我真是给跪了。