encodeURI 确保特殊字符能够正确传输
在 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%20spaces2. encodeURIComponent
encodeURIComponent 用于对 URI 的各个组成部分（如查询字符串中的值）进行编码。用途
- 编码 URI 的各个组成部分，如查询参数的值。
示例
const value = "value with spaces"; console.log(encodeURIComponent(value)); // 输出: value%20with%20spaces3. 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%20spaces4. 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。