在 JavaScript 中,decodeURIComponent
、decodeURI
、encodeURI
和 encodeURIComponent
是用于编码和解码 URI(Uniform Resource Identifier)的常用函数。它们各有不同的用途和适用场景。
1. encodeURI
encodeURI
用于对整个 URI 进行编码,确保所有特殊字符都被转换为百分号编码形式。
用途
- 编码整个 URI,包括协议、主机名、路径、查询字符串等。
示例
const uri = "http://example.com/path?query=value&another=value with spaces"; console.log(encodeURI(uri)); // 输出: http://example.com/path?query=value&another=value%20with%20spaces
2. encodeURIComponent
encodeURIComponent 用于对 URI 的各个组成部分(如查询字符串中的值)进行编码。
用途
- 编码 URI 的各个组成部分,如查询参数的值。
示例
const value = "value with spaces"; console.log(encodeURIComponent(value)); // 输出: value%20with%20spaces
3. decodeURI
decodeURI
用于解码整个编码后的 URI。
用途
- 解码整个编码后的 URI。
const encodedUri = "http%3A%2F%2Fexample.com%2Fpath%3Fquery%3Dvalue%26another%3Dvalue%2520with%2520spaces"; console.log(decodeURI(encodedUri)); // 输出: http://example.com/path?query=value&another=value%20with%20spaces
4. decodeURIComponent
decodeURIComponent
用于解码 URI 的各个组成部分(如查询字符串中的值)。
用途
- 解码 URI 的各个组成部分,如查询参数的值。
示例
const encodedValue = "value%20with%20spaces"; console.log(decodeURIComponent(encodedValue)); // 输出: value with spaces
实际应用场景
假设你有一个对象需要通过 URL 查询参数传递,并且需要对其进行编码和解码。
编码对象
<template> <div> <button @click="navigateToCustomsData">Navigate</button> </div> </template> <script> export default { data() { return { obj: { key1: 'value1', key2: 'value with spaces' } }; }, methods: { navigateToCustomsData() { const encodedData = encodeURIComponent(JSON.stringify(this.obj)); const href = this.$router.resolve({ name: 'customsDataScreen', query: { data: encodedData } }).href; window.location.href = href; } } }; </script>
解析对象
<template> <div> <pre>{{ parsedObj }}</pre> </div> </template> <script> export default { data() { return { parsedObj: null }; }, created() { this.parseQueryParams(); }, methods: { parseQueryParams() { const queryParams = this.$route.query; if (queryParams.data) { const decodedData = decodeURIComponent(queryParams.data); try { this.parsedObj = JSON.parse(decodedData); } catch (error) { console.error('Error parsing JSON:', error); this.parsedObj = null; } } } } }; </script>
总结
encodeURI
:用于编码整个 URI,保留一些特殊字符(如-
、_
、.
和~
)。encodeURIComponent
:用于编码 URI 的各个组成部分(如查询参数的值),对所有特殊字符进行编码。decodeURI
:用于解码整个编码后的 URI。decodeURIComponent
:用于解码 URI 的各个组成部分(如查询参数的值),对所有特殊字符进行解码。
在实际应用中,根据具体情况选择合适的函数进行编码和解码。对于查询参数的值,推荐使用 encodeURIComponent
和 decodeURIComponent
。