关于encodeURIComponent

我们通过ajax提交数据的时候,常常会用encodeURIComponent把参数包装一遍。
原先以为encodeURIComponent是你页面是什么编码,就会按该编码方式编码数据,但这是错的。

在ECMAScript里找到关于encodeURIComponent的说明如下:

When a character to be included in a URI is not listed above or is not intended to have the special meaning sometimes given to the reserved characters, that character must be encoded. The character is first transformed into a sequence of octets using the UTF-8 transformation, with surrogate pairs first transformed from their UCS-2 to UCS-4 encodings. (Note that for code points in the range [0,127] this results in a single octet with the same value.) The resulting sequence of octets is then transformed into a string with each octet represented by an escape sequence of the form "% xx".

于是,ajax提交中文的编码解决方案:
1.用utf-8编码方式读取传递参数
2.返回的response用utf-8编码
3.设置response header编码方式,如php下可以如此设置:header("Content-type:text/xml;charset=utf-8");

人,或多或少,总有些自以为很肯定的东西,其实是错误的认知。
JavaScript 中的 `encodeURIComponent` 函数用于对 URI(统一资源标识符)组件进行编码。此函数会将所有非保留字符转换为 UTF-8 编码,并使用百分号(%)表示法替换特殊字符,从而确保生成的字符串可以安全地用作 URI 的一部分[^1]。 ### 使用场景 `encodeURIComponent` 通常用于构建查询参数或路径段时,确保包含的用户输入或其他动态内容不会破坏 URI 的结构。例如,在向 URL 添加查询参数之前,需要对参数值进行编码以避免与 URI 语法冲突。 ```javascript const paramName = "user"; const paramValue = "John Doe"; const encodedParamValue = encodeURIComponent(paramValue); const url = `https://example.com/?${paramName}=${encodedParamValue}`; console.log(url); // 输出: https://example.com/?user=John%20Doe ``` ### 特点 - **编码范围**:`encodeURIComponent` 会对所有非字母数字字符进行编码,包括空格(转为 `%20`)、中文字符以及其他特殊符号。 - **保留字符**:某些在 URI 中具有特殊含义的字符(如 `-`, `_`, `.`, `!`, `~`, `*`, `'`, `(`, `)`)不会被编码。 - **安全性**:使用此函数可以有效防止由于用户输入中的特殊字符导致的 URI 解析错误。 ### 对比 `encodeURI` `encodeURI` 与 `encodeURIComponent` 的区别在于前者仅用于对完整的 URI 进行编码,而后者则适用于 URI 的某一部分(如参数值)。`encodeURI` 不会编码 URI 中的保留字符(如 `/`, `?`, `:`),而 `encodeURIComponent` 会将其全部编码[^1]。 ```javascript const uri = "https://example.com/path with spaces?query=hello world"; const fullEncoded = encodeURI(uri); console.log(fullEncoded); // 输出: https://example.com/path%20with%20spaces?query=hello%20world const queryPartEncoded = encodeURIComponent(uri); console.log(queryPartEncoded); // 输出: https%3A%2F%2Fexample.com%2Fpath%20with%20spaces%3Fquery%3Dhello%20world ``` ### 注意事项 - **解码操作**:如果需要恢复原始字符串,可以使用 `decodeURIComponent` 函数进行解码。 - **多次编码问题**:应避免对已经编码的字符串重复应用 `encodeURIComponent`,因为这可能导致错误的解码结果。 ### 示例代码 以下是一个实际应用 `encodeURIComponent` 构建带有查询参数的 URL 的示例: ```javascript function buildUrl(base, params) { const encodedParams = Object.entries(params).map(([key, value]) => { const encodedKey = encodeURIComponent(key); const encodedValue = encodeURIComponent(value); return `${encodedKey}=${encodedValue}`; }).join('&'); return `${base}?${encodedParams}`; } const baseUrl = "https://api.example.com/data"; const parameters = { search: "test query", limit: 10 }; const finalUrl = buildUrl(baseUrl, parameters); console.log(finalUrl); // 输出: https://api.example.com/data?search=test%20query&limit=10 ``` 通过合理使用 `encodeURIComponent`,可以确保生成的 URI 合法且安全,适用于各种网络请求和数据传输场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值