js怎么获得url

通过JavaScript获取URL的方法有很多，具体包括使用window.location对象、使用document.URL、从URL中提取参数等。本文将详细讲解这些方法，并分享一些实践中的经验。

一、使用`window.location`对象

window.location对象是JavaScript中用于获取和操作浏览器URL的主要方式。它包含了当前URL的详细信息，如协议、主机、路径等。

1.1 `window.location.href`

window.location.href属性可以获取当前页面的完整URL。

let currentURL = window.location.href;
console.log(currentURL); // 输出当前页面的完整URL

1.2 `window.location.hostname`

此属性用于获取当前URL中的主机名。

let hostname = window.location.hostname;
console.log(hostname); // 输出主机名，例如：www.example.com

1.3 `window.location.pathname`

此属性用于获取当前URL的路径部分。

let pathname = window.location.pathname;
console.log(pathname); // 输出路径部分，例如：/path/to/page

1.4 `window.location.search`

此属性用于获取URL中的查询字符串。

let searchParams = window.location.search;
console.log(searchParams); // 输出查询字符串，例如：?name=JohnDoe&age=25

二、使用`document.URL`

document.URL是一个只读属性，返回当前文档的URL。

let docURL = document.URL;
console.log(docURL); // 输出当前文档的URL

三、从URL中提取参数

3.1 使用`URLSearchParams`对象

URLSearchParams对象提供了一个接口，用于读取和修改URL中的查询字符串参数。

let urlParams = new URLSearchParams(window.location.search);
let paramValue = urlParams.get('name'); // 获取名为'name'的参数值
console.log(paramValue); // 输出参数值

3.2 自定义函数提取参数

你也可以编写自定义函数从URL中提取参数。

function getQueryParam(param) {
    let url = window.location.search.substring(1);
    let params = url.split('&');
    for (let i = 0; i < params.length; i++) {
        let paramPair = params[i].split('=');
        if (paramPair[0] === param) {
            return paramPair[1];
        }
    }
    return null;
}
let paramValue = getQueryParam('name');
console.log(paramValue); // 输出参数值

四、处理URL中的哈希（锚点）

4.1 `window.location.hash`

此属性用于获取URL中的哈希部分。

let hash = window.location.hash;
console.log(hash); // 输出哈希部分，例如：#section1

4.2 设置和修改哈希

你可以通过设置window.location.hash来修改URL中的哈希部分。

window.location.hash = '#newSection';
console.log(window.location.hash); // 输出新的哈希部分：#newSection

五、实践中的一些经验

在实际开发中，处理URL时要注意以下几点：

5.1 URL编码和解码

在处理URL参数时，确保对特殊字符进行编码和解码。

let paramValue = 'John Doe & Co';
let encodedValue = encodeURIComponent(paramValue);
console.log(encodedValue); // 输出编码后的值：John%20Doe%20%26%20Co
let decodedValue = decodeURIComponent(encodedValue);
console.log(decodedValue); // 输出解码后的值：John Doe & Co

5.2 安全性考虑

在操作URL时，要注意避免XSS（跨站脚本攻击）。确保参数值是安全的，并避免直接插入未经过滤的用户输入。

5.3 兼容性

虽然现代浏览器都支持URLSearchParams对象，但在处理较旧的浏览器时，最好提供回退方案。

if (typeof URLSearchParams === 'function') {
    let urlParams = new URLSearchParams(window.location.search);
    let paramValue = urlParams.get('name');
    console.log(paramValue);
} else {
    // 使用自定义函数作为回退方案
    let paramValue = getQueryParam('name');
    console.log(paramValue);
}

六、总结

通过上述方法，JavaScript可以轻松获取并操作URL中的各个部分。使用window.location对象可以获取完整的URL信息、使用URLSearchParams对象可以方便地操作查询字符串、注意编码和安全性。这些方法和实践经验能够帮助开发者更好地处理URL，从而提高Web应用的稳定性和用户体验。

js怎么获得url

一、使用window.location对象

1.1 window.location.href

1.2 window.location.hostname

1.3 window.location.pathname

1.4 window.location.search

二、使用document.URL