escape和encodeURI和encodeURIComponent使用場景和區別

函數出現時間:

    escape()                                javascript 1.0
        
    encodeURI()                         javascript 1.5

    encodeURIComponent()     javascript 1.5

函數功能介紹:
    
    escape()   :     採用ISO Latin字符集對指定的字符串進行編碼。所有的空格符、標點符號、特殊字符以及其他非ASCII字符都會轉化成%xx格式的字符編碼(xx代表此字符在字符集表裏編碼的16進制數字)。比如,空格符的對應編碼是%20。不會對ASCII字符和數字進行編碼。不會被此方法編碼的字符:@ * / +,反向編碼函數:unescape()。

    encodeURI():    把URI字符串採用UTF-8編碼格式轉化成escape格式的字符串。不會被此方法編碼的字符:! @ # $ & ( ) = : / ; ? + ',反向編碼函數:decodeURI()。
    
    encodeURIComponent():把URI字符串採用URF-8編碼格式轉化成escape格式的字符串。與encodeURI相比,這個函數會將更多的字符進行編碼,比如"/"等字符。所以如果字符串裏面包含了URI的幾個部分的話,不能用這個來進行編碼。否則“/”字符被編碼後將URL顯示錯誤。不會被此方法編碼的字符:! * ( ),反向編碼函數:decodeURIComponent()。

測試demo:

    var url = "http://localhost:8080/pro?a=1&b=張三&c=aaa";
    var url1 = escape(url);                                           http%3A//localhost%3A8080/pro%3Fa%3D1%26b%3D%u5F20%u4E09%26c%3Daaa         
    var url2 = encodeURI(url);                                     http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa   
    var url3 = encodeURIComponent(url);                 http%3A%2F%2Flocalhost%3A8080%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa   

var vurl2 = unescape(url2); http://localhost:8080/pro?a=1&b=張三&c=aaa
var vurl3 = decodeURI(url3); http://localhost:8080/pro?a=1&b=張三&c=aaa
var vurl1 = decodeURIComponent(url1); http://localhost:8080/pro?a=1&b=張三&c=aaa

具體用法:

    escape()函數用於js對字符串進行編碼。不常用

    encodeURI()用於整個url跳轉,比如:
           轉化前: location.href = "http://localhost:8080/pro?a=1&b=張三&c=aaa";
           轉化後: location.href = "http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa"
           本例中只是將中文轉成%...,傳過去再解碼就可以拿到中文

    encodeURIComponent()用於參數的傳遞,參數包含特殊字符可能會造成間斷。比如:
           var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";
           var url = "http://localhost:8080/pp?a=1&b="+ paramUrl ;
            應該使用encodeURIComponent()進行轉碼,
            結果:http://localhost:8080/pp?a=1&b=http%3A%2F%2Flocalhost%3A8080%2Faa%3Fa%3D1%26b%3D2%23%26c%3D3
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章