工作記錄-前端——前端(JS)對URL的編碼和解碼方式以及重要性——IE瀏覽器必須對中文URL進行編碼
- 創作場景
- 前端JS對URL的三種編碼和解碼方式
- 1. escape 和 unescape
- 2. encodeURI 和 decodeURI
- 3. encodeURIComponent 和 decodeURIComponent
- 本文重點
創作場景
???工作中遇到了一個帶中文的URL鏈接
,因為是文件預覽,在文件名為uuid的情況下需要將中文名展示在導航欄,所以將文件中文名拼接在了URL后面,但是出現了IE報400錯誤
的情況,經過排查是URL帶中文的問題,特此記錄。
前端JS對URL的三種編碼和解碼方式
1. escape 和 unescape
???這兩個一般是用于對某個變量進行編碼的,無法直接作用與URL
,除了ASCII字母、數字、標點符號"@ * _ + - . /"以外
,對其他所有字符進行編碼。在u0000到u00ff之間的符號被轉成%xx
的形式,其余符號被轉成%uxxxx的形式。對應的解碼函數是unescape()
。
???一般這個是不常用的,不過對于變量進行編碼的時候要注意,如果變量中有特殊符號+會自動編碼為空格
。
2. encodeURI 和 decodeURI
???這兩個是對特殊含義的符號"; / ? : @ & = + $ , #",也不進行編碼。主要對URL進行部分編碼
,編碼后,它輸出符號的utf-8形式
,并且在每個字節前加上%。它對應的解碼函數是decodeURI()
,一般在URL中我們常常使用的就是這個,而且大多數情況都是對鏈接中拼接對象時進行編碼
,接收時進行解碼。
3. encodeURIComponent 和 decodeURIComponent
???與encodeURI()的區別是,它用于對整個URL進行編碼
。“; / ? : @ & = + $ , #”,這些在encodeURI()中不被編碼的符號,在encodeURIComponent()中統統會被編碼
。它對應的解碼函數是decodeURIComponent()。這種適用場景比較少,一般我們的鏈接除了對象和中文外都需要暴露在外面以便用戶查看和復制。
???以上就是前端中常用的三類編碼和解碼方式,當然也都比較常見,如果需要將中文傳遞給后臺,一般也需要進行編碼,而后臺也有對應的解碼方法,這里就不做贅述了。
本文重點
???一定要養成一個好習慣,如果URL中出現了中文,一定要使用編碼方法進行編碼,雖然現在的瀏覽器大多數都進行了兼容處理,對于一些老舊的瀏覽器比如IE或者一些平板啊手機都會出現不兼容報錯的情況,而400錯誤大多數情況就是我們的URL錯誤啦,而有時候可能不是拼接問題,編碼也會影響。