js怎么取地址栏中的值

在JavaScript中，可以通过 window.location 对象来获取地址栏中的值。常用的方法有：window.location.href、window.location.search、window.location.hash。其中，window.location.search 获取查询字符串参数，window.location.hash 获取URL中的锚点。

要详细描述其中一点，比如使用 window.location.search 获取查询字符串参数：

window.location.search 返回URL中问号之后的部分（包括问号）。可以通过解析该字符串来获取参数键值对。假设URL是 http://example.com/?name=John&age=30，则 window.location.search 返回 "?name=John&age=30"。然后可以使用 URLSearchParams 对象来解析这个字符串并获取每个参数的值。

以下是一个示例代码：

let params = new URLSearchParams(window.location.search);
let name = params.get('name'); // 获取name参数的值
let age = params.get('age'); // 获取age参数的值
console.log(name); // 输出: John
console.log(age); // 输出: 30

一、获取完整URL

window.location.href 可以获取整个URL字符串。通过这个属性，你可以快速获取当前页面的完整URL地址。

let fullURL = window.location.href;
console.log(fullURL); // 输出完整URL

二、获取查询字符串参数

如前所述，window.location.search 返回URL中的查询字符串部分。为了更方便地解析查询字符串，可以使用 URLSearchParams 对象。

let searchParams = new URLSearchParams(window.location.search);
let paramValue = searchParams.get('paramName'); // 获取指定参数的值

这个方法非常适合处理复杂的查询字符串，因为它提供了多种方法来操作参数，如 has、set、getAll 等。

三、获取URL中的锚点

window.location.hash 返回URL中的锚点部分（包括#号）。这对于单页面应用程序（SPA）或者需要在页面内导航时非常有用。

let anchor = window.location.hash;
console.log(anchor); // 输出: #section1

四、使用正则表达式解析URL

有时，你可能需要更复杂的URL解析方法。这时可以使用正则表达式来提取URL中的各个部分。

let url = window.location.href;
let regex = /[?&]([^=#]+)=([^&#]*)/g;
let params = {};
let match;
while (match = regex.exec(url)) {
    params[match[1]] = match[2];
}
console.log(params); // 输出参数对象

五、获取URL各部分

通过 window.location 对象可以访问URL的不同部分，如协议、主机名、端口、路径等。

let protocol = window.location.protocol; // 获取协议（如http:或https:）
let hostname = window.location.hostname; // 获取主机名（如example.com）
let port = window.location.port; // 获取端口号（如80或443）
let pathname = window.location.pathname; // 获取路径（如/index.html）

六、改变URL参数而不重新加载页面

在现代浏览器中，可以使用 history.pushState 或 history.replaceState 方法来改变URL参数而不触发页面重新加载。这对于动态更新URL非常有用。

let newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?name=Jane&age=25';
history.pushState({path: newURL}, '', newURL);

七、处理URL中的特殊字符

有时候，URL中的参数可能包含特殊字符，这些字符需要进行编码和解码。可以使用 encodeURIComponent 和 decodeURIComponent 方法来处理这些字符。

let encodedParam = encodeURIComponent('name=John Doe&age=30');
let decodedParam = decodeURIComponent(encodedParam);
console.log(encodedParam); // 输出编码后的参数
console.log(decodedParam); // 输出解码后的参数

八、使用第三方库处理URL

有一些第三方库可以帮助更方便地处理URL参数，如 qs（用于Node.js）和 query-string（用于浏览器环境）。这些库提供了丰富的方法来解析和构建查询字符串。

// 使用query-string库
import queryString from 'query-string';
let parsed = queryString.parse(window.location.search);
console.log(parsed); // 输出解析后的对象

九、应用场景

表单提交后保留参数：通过将表单数据添加到URL参数中，可以在用户刷新页面后仍然保留表单数据。
分页和筛选：在电商网站中，通过URL参数来保存当前的分页和筛选状态，使用户可以分享特定的页面状态。
SEO优化：通过使用URL参数，可以使搜索引擎更好地理解页面的内容，提高SEO效果。

十、项目管理中的应用

在项目管理系统中，URL参数可以用于保存和传递项目的状态和筛选条件。例如，使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile，可以在URL中保存当前的项目视图、筛选条件、用户角色等信息，使用户在重新加载页面时能够恢复到之前的状态。

let currentView = 'kanban';
let filter = 'status:open';
let newURL = `${window.location.protocol}//${window.location.host}${window.location.pathname}?view=${currentView}&filter=${filter}`;
history.replaceState({path: newURL}, '', newURL);

通过上述方法，可以灵活地获取和处理地址栏中的值，使你的Web应用更加动态和用户友好。