JavaScript获取URL地址栏参数及中文参数的方法

教程简介

在JavaScript开发中，经常需要从当前网页URL地址中读取查询参数，例如根据URL中的参数判断页面状态、获取指定内容或执行不同的前端操作。

本文由我的站长站整理，介绍两种常见的URL参数获取方法。第一种适合普通英文参数，第二种使用decodeURI()处理参数内容，对包含中文字符的参数更加方便。

教程主要内容

一、JavaScript获取英文URL参数

如果URL中的参数主要由英文、数字等常规字符组成，可以使用正则表达式匹配查询字符串。示例代码如下：

// 第一种：参数主要为英文

function getQuery(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);

    if (r != null) {
        return unescape(r[2]);
    }

    return null;
}

例如当前页面地址中包含查询参数时，可以通过getQuery()传入参数名称进行读取。如果没有找到对应参数，则返回null。

二、JavaScript获取中文及英文URL参数

当URL参数中可能包含中文内容时，可以使用decodeURI()对获取到的参数进行解码：

// 第二种：参数可以包含中文或英文

function getQuery(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);

    if (r != null) {
        return decodeURI(r[2]);
    }

    return null;
}

这种写法可以用于读取包含中文字符的查询参数。例如页面地址中存在经过URL编码的中文参数时，可以先匹配参数值，再通过decodeURI()进行处理。

三、两种写法有什么区别

需要注意的是，unescape()属于较早的JavaScript字符串解码方法，在新的前端项目中通常不建议继续使用。对于现代JavaScript开发，更推荐根据URL编码方式选择decodeURIComponent()或decodeURI()。

四、现代JavaScript推荐写法

如果只是读取URL中的查询参数，现代浏览器已经提供了更加直接的URLSearchParams接口，不需要自己编写正则表达式：

const params = new URLSearchParams(window.location.search);

// 获取指定参数
const value = params.get('name');

console.log(value);

例如当前地址为：

https://www.wdzzz.com/?name=%E6%88%91%E7%9A%84%E7%AB%99%E9%95%BF%E7%AB%99

可以直接通过params.get('name')获取参数内容。对于新项目来说，这种方式代码更简洁，也更容易维护。

其他说明

使用正则表达式获取URL参数时，需要注意参数名称和参数值都可能经过URL编码。实际开发中，如果参数来自用户输入或外部地址，还应根据具体用途进行必要的数据校验，避免直接将未经处理的内容插入HTML或脚本环境。

如果项目需要兼容较早的浏览器环境，可以继续采用传统的正则表达式方法；对于现代浏览器和新的前端项目，则可以优先考虑URLSearchParams。

本文由我的站长站整理分享，适合用于JavaScript基础开发、URL参数读取以及前端页面交互等场景。