看不到但摸得到的搗蛋鬼—Zero Width Space
1.情況如何？
昨天，“某某某”的代碼出現了一個bug。大概是這個情況：
有一個提示信息，需要展示，大概這樣：
這行文字，在谷歌上一點問題都沒有，但是在ie上出現了奇怪的框框。比如這樣：
ie瀏覽器真的是代碼檢查器啊，稍微一個不注意，就搞事情～～～
2.so why？
經過我的多次實驗、擺弄，發現一件事，我在雙引號和label之間按下退格鍵、方向鍵，會發現，總是多出來一次操作，方向鍵、退格鍵總是需要多按一次，纔可以刪除前雙引號。很奇怪很奇怪。
於是，我百度“聽大悲咒時應該保持什麼心情”、“天台上怎麼樣不會太冷”。。。
功夫不負有心人，我找到了這個關鍵詞-----Zero Width Space。
百度了一下：
3.這是個什麼東西呢？
Zero-width space的Unicode編碼爲U+FEFF，二進制編碼爲“\xE2\x80\x8E”,根據維基百科描述，其主要用於後臺處理字符邊界而又無需可見空格的情況。
簡言之：具有空格的功能，但寬度爲零。
爲了搞清，我這個小東西的unicode的編碼是什麼，我在這個鏈接下
http://tool.chinaz.com/tools/unicode.aspx
把我的那個符號考進去，點擊中文轉unicode，然後就這樣：
備註：這種符號可能有很多，大家可以在探索其他的相似符號.
4.代碼搞一搞
我敲了一段代碼：
<input type="text" id="have10" />
<input type="text" id="have20" />
<script>
var uniCodeStr = "\u0008";
var str = eval("'"+uniCodeStr + "'")
var have10 = "10";
var have20 = "20";
for(var i = 0;i < 10 ; i++ ){
have10 += str;
}
for(var i = 0;i < 20 ; i++ ){
have20 += str;
}
document.getElementById('have10').value = have10;
document.getElementById('have20').value = have20;
</script>
ie上大概這樣
谷歌上這樣：
大家可以試一試，需要按10次退格鍵，纔可以刪到10的位置；需要按20次退格鍵，纔可以刪到20的位置。
是不是有一點恐怖？
看不到，但是又實實在在的存在。
5.危險
有這麼幾個場景，大家想象一下：
- 有人發了一個text文檔，裏面只有兩個字母，但是接收時卻卡死了電腦；
- qq上陌生人發來了兩個字，手機卻重啓了；
- 數據庫查詢的時候，字段、sql看起來都對，但是卻查不出想要的結果；
- url寫的沒問題，但是總是404～
6.解決
這個的話，百度搜索吧，方法也有很多，我就不贅述了
最後
你好！我是 JHCan333，公衆號：愛生活的前端狗 的作者。公衆號專注 前端工程師 方向，包括但不限於技術提高、職業規劃、生活品質、個人理財等方面，會持續發佈優質文章，從各個方面提升前端開發的幸福感。關注公衆號，我們一起向前走！
