一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    前端url中的中文传参URL编码与解码

    技术 12 2024-10-16 17:05

    代码示例

    // 假设 URL 为 http://example.com/?name=%E5%8D%A1%E4%BB%95%E8%BE%BE
    
    // 1. 获取 URL 的查询字符串
    const urlParams = new URLSearchParams(window.location.search);
    
    // 2. 获取指定的参数,例如 'name'
    const name = urlParams.get('name');
    
    // 3. 使用 decodeURIComponent 解码
    const decodedName = decodeURIComponent(name);
    
    console.log(decodedName); // 输出:卡仕达
    

    对比

    encodeURIComponent('卡仕达');  // 输出: %E5%8D%A1%E4%BB%95%E8%BE%BE
    decodeURIComponent('%E5%8D%A1%E4%BB%95%E8%BE%BE'); // 输出: 卡仕达
    


    什么是 URL 编码?


    URL 编码是一种将特定字符(如中文、空格、特殊符号等)转换为 **百分号 (`%`) 加上两位十六进制数字** 的方式。浏览器和服务器通常用这种方式来处理 URL 中的特殊字符,确保这些字符在网络上传输时不会引起冲突或产生错误。


    每个非 ASCII 字符会被转成 `UTF-8` 编码,然后每个 `UTF-8` 字节用 `%` 加上对应的两位十六进制数表示。


    为什么要进行 URL 编码?


    URL 是一个以 ASCII 字符集为基础的标准,许多字符(如空格、中文、以及某些标点符号)在 URL 中会被认为是不合法的,或者可能有特殊含义(比如 `?`、`&` 在查询字符串中用于分隔参数)。因此,这些字符需要进行编码,以确保它们能被正确地传输或存储。


    URL 编码的特点


    - **百分号 (`%`)**:每个被编码的字符都用 `%` 表示,后面跟随两个表示字符编码值的十六进制数字。

    - **十六进制表示法**:字符在 `UTF-8` 编码中的每个字节被转化为两位十六进制表示。


    例子


    以“卡仕达”为例,这三个汉字在 `UTF-8` 中的字节分别是:


    - **卡**:`E5 8D A1`

    - **仕**:`E4 BB 95`

    - **达**:`E8 BE 85`


    每个字节通过百分号编码就变成 `%E5%8D%A1%E4%BB%95%E8%BE%85`。


    URL 编码的常见应用


    1. **浏览器 URL**:例如,浏览器在访问包含中文字符的 URL 时,会自动将它们转换为 URL 编码形式。

    2. **GET 请求参数**:当表单提交或者在 URL 中传递数据时,所有的特殊字符都会被编码,以确保请求的合法性。

    3. **编码和解码**:JavaScript 中可以使用 `encodeURIComponent` 和 `decodeURIComponent` 对数据进行编码和解码。


    小结


    `'%E5%8D%A1%E4%BB%95%E8%BE%BE'` 是 "卡仕达" 的 URL 编码形式。通过这种方式,浏览器和服务器能够安全地处理和传输 URL 中的特殊字符。


    文章评论

    评论列表(0