Js学习笔记——URL转码和解码的问题处理

最新推荐文章于 2023-02-27 09:33:40 发布

老Chen先生

最新推荐文章于 2023-02-27 09:33:40 发布

阅读量462

点赞数

分类专栏： JavaScript 文章标签：字符串乱码 javascript

本文链接：https://blog.csdn.net/MRlaochen/article/details/117714406

版权

JavaScript 专栏收录该内容

28 篇文章 7 订阅

订阅专栏

【前提须知】

在这里插入图片描述

`ASCII码`

在计算机内部，所有的信息最终都表示为一个二进制的字符串。每一个二进制位（bit）有0和1两种状态，因此八个二进制位就可以组合出256种状态，这被称为一个字节（byte）。也就是说，一个字节一共可以用来表示256种不同的状态，每一个状态对应一个符号，就是256个符号，从 0000000到11111111。

上个世纪60年代，美国制定了一套字符编码，对英语字符与二进制位之间的关系，做了统一规定。这被称为ASCII码，一直沿用至今。ASCII码一共规定了128个字符的编码，比如空格“SPACE”是32（二进制00100000），大写的字母A是65（二进制01000001）。这128个符号（包括32个不能打印出来的控制符号），只占用了一个字节的后面7位，最前面的1位统一规定为0。

ASCII 只有127个字符，表示英文字母的大小写、数字和一些符号，但由于其他语言用ASCII 编码表示字节不够，例如：常用中文需要两个字节，且不能和ASCII冲突，中国定制了GB2312编码格式，相同的，其他国家的语言也有属于自己的编码格式。
（这里只指出，虽然都是用多个字节表示一个符号，但是GB类的汉字编码与后文的Unicode和UTF-8是毫无关系的。）

`Unicode码`

世界上存在着多种编码方式，同一个二进制数字可以被解释成不同的符号。因此，要想打开一个文本文件，就必须知道它的编码方式，否则用错误的编码方式解读，就会出现乱码。为什么电子邮件常常出现乱码？就是因为发信人和收信人使用的编码方式不一样。可以想象，如果有一种编码，将世界上所有的符号都纳入其中。每一个符号都给予一个独一无二的编码，那么乱码问题就会消失。这就是Unicode，就像它的名字都表示的，这是一种所有符号的编码。

Unicode是一个很大的集合，现在的规模可以容纳100多万个符号。每个符号的编码都不一样，比如，U+0639表示阿拉伯字母Ain，U+0041表示英语的大写字母A，U+4E25表示汉字“严”。具体的符号对应表，可以查询unicode.org ，或者专门的汉字对应表。

Unicode就是将这些语言统一到一套编码格式中，能够表示全世界所有的字节,Unicode最常用的是用两个字节表示一个字符
ASCII编码是1个字节表示一个字符，而Unicode编码通常是2个字节表示一个字符

`Unicode码的问题`

需要注意的是，Unicode只是一个符号集，它只规定了符号的二进制代码，却没有规定这个二进制代码应该如何存储。比如，汉字“严”的unicode是十六进制数4E25，转换成二进制数足足有15位（100111000100101），也就是说这个符号的表示至少需要2个字节。表示其他更大的符号，可能需要3个字节或者4个字节，甚至更多。

它们造成的结果是：

1）出现了unicode的多种存储方式，也就是说有许多种不同的二进制格式，可以用来表示unicode。
2）unicode在很长一段时间内无法推广，直到互联网的出现。

`UTF-8`

互联网的普及，强烈要求出现一种统一的编码方式。UTF-8就是在互联网上使用最广的一种unicode的实现方式。其他实现方式还包括UTF-16和UTF-32，不过在互联网上基本不用。这里的关系是，UTF-8是Unicode的实现方式之一。
UTF-8最大的一个特点，就是它是一种变长的编码方式。它可以使用1~4个字节表示一个符号，根据不同的符号而变化字节长度。
英文字母被编码成一个字节，常用汉字被编码成三个字节。
如果你编译的文本是纯英文的，那么用UTF-8就会非常节省空间，并且ASCII码也是UTF-8的一部分。
目前大部分的网站，都是使用的UTF-8编码。将javascript生成的Unicode编码字符串转为UTF-8编码的字符串。
例如发送一段二进制到服务器时，服务器规定该二进制内容的编码必须为UTF-8。这种情况下，我们必须就要通过程序将javascript的Unicode字符串转为UTF-8编码的字符串。

三者关系

（1) 在计算机内存中，统一使用Unicode编码，当需要保存到硬盘或者需要传输的时候，就转换为UTF-8编码。
（2）用记事本编辑的时候，从文件读取的UTF-8字符被转换为Unicode字符到内存里，编辑完成后，保存的时候再把Unicode转换为UTF-8保存到文件。
如下图：
在这里插入图片描述
浏览网页的时候，服务器会把动态生成的Unicode内容转换为UTF-8再传输到浏览器：

【正文】

1.escape 和 unescape

escape()函数用于js对字符串进行编码，不常用。

escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。

采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。
比如，空格符对应的编码是%20。

escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z。

unescape()常用于对escape转换码后的Unicode编码的解码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
            var url = "http://localhost:8080/#/pro?a=1&b=张三&c=aaa";
    　　     let url1 = escape(url)
            let url2 = unescape(url1)
            console.log('url'  , url1) // http%3A//localhost%3A8080/%23/pro%3Fa%3D1%26b%3D%u5F20%u4E09%26c%3Daaa
            console.log('url2' , url2) // url2 http://localhost:8080/#/pro?a=1&b=张三&c=aaa
    </script>
</body>
</html>

2.encodeURI 和 decodeURI

encodeURI把URI字符串采用UTF-8编码格式转化成escape各式的字符串。

encodeURI()用于整个url编码。

encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z.

编码后，输出符号的utf-8形式，并且在每个字节前加上%。需注意的是encodeURI()不对单引号编码.

decodeURI常用于对encodeURI转换码之后的编码值进行解码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script>
           　var url = "http://localhost:8080/#/pro?a=1&b=张三&c=aaa";
           　let url1 = encodeURI(url)  
           	let url2 = decodeURI(url1)
             console.log(url1) // http://localhost:8080/#/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa
            console.log(url2) // http://localhost:8080/#/pro?a=1&b=张三&c=aaa
   </script>
</body>
</html>

3.encodeURIComponent 和 decodeURIComponent

encodeURIComponent作用是把URL字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。

因此，"; / ? : @ & = + $ , #"，这些在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码。至于具体的编码方法，两者是一样。

比如"/"等字符。如果字符串里面包含了URI的几个部分的话，不能用这个来进行编码。否则“/”字符被编码后将URL显示错误。因此，用于参数的传递，参数包含特殊字符可能会造成间断。

decodeURIComponent常用于对encodeURIComponent转码后的编码值进行解码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        　var url = "http://localhost:8080/#/pro?a=1&b=张三&c=aaa";
        　let url1 = encodeURIComponent(url)  
          let url2 = decodeURIComponent(url1)
          console.log(url1) //http%3A%2F%2Flocalhost%3A8080%2F%23%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa
          console.log(url2) //http://localhost:8080/#/pro?a=1&b=张三&c=aaa
    </script>
</body>
</html>

综述

1、escape()函数用于js对字符串进行编码。不常用。
2、encodeURI()用于整个url编码。
3、encodeURIComponent()用于参数的传递，参数包含特殊字符可能会造成间断。

老Chen先生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js学习笔记——URL转码和解码的问题处理

【前提须知】ASCII码在计算机内部，所有的信息最终都表示为一个二进制的字符串。每一个二进制位（bit）有0和1两种状态，因此八个二进制位就可以组合出256种状态，这被称为一个字节（byte）。也就是说，一个字节一共可以用来表示256种不同的状态，每一个状态对应一个符号，就是256个符号，从 0000000到11111111。上个世纪60年代，美国制定了一套字符编码，对英语字符与二进制位之间的关系，做了统一规定。这被称为ASCII码，一直沿用至今。ASCII码一共规定了128个字符的编码，比如空格
复制链接

扫一扫