在现代Web开发中，一个简洁优美的URL可以为你的网站带来许多好处。它们可以让你的网站更容易被搜索引擎访问，并且更适合分享给朋友和社交网络。当你通过搜索主题访问一个页面时，看到的URL很可能是一大串奇怪的字符，但是这些字符实际上为页面提供了非常重要的信息。一个好的网站应该能够掌握这个技能，美化自己的URL，让用户的访问更加智能、方便。

我们可以通过JavaScript中的location.search属性来获取URL中的查询参数。查询参数是指URL中？后面的内容，其中包含了键值对的表示方式。了解这些参数和如何更好地点亮你的URL，将会有助于让你的网站更具有美感和优越性。

什么是“location.search”？

通过JS的location对象，我们可以获取到当前网页的URL，并且通过获取URL的search属性，即“？”以及“？”后面的内容。例如，一个典型的URL如下：

```

https://www.example.com/search?q=hello+world&lang=en

```

在这个URL中，“？”后面的字符表示查询参数。这里面有两个键值对，分别是“q=hello+world”和“lang=en”。我们可以使用以下代码从当前网页的URL中获取查询参数：

```

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

```

上述方法可以帮助我们获取到查询参数的键值对，并保存在一个名叫“queryParams”的对象中。但是在实际应用中，我们需要将获取到的数据转化为可读性强的形式。

转化查询参数

一般情况下，我们需要将查询参数中的字段和值进行解析，以便我们可以更好地了解每个参数的含义。我们可以通过以下方式将查询参数转化为键值对：

```

function getQueryParams(queryString) {

const queryParams = {};

queryString.replace(

new RegExp("([^?=&]+)(=([^&]*))?", "g"),

function($0, $1, $2, $3) {

queryParams[$1] = decodeURIComponent($3.replace(/\+/g, "%20"));

}

);

return queryParams;

}

const queryParams = getQueryParams(window.location.search);

```

在代码中，我们使用了一个叫做“RegExp”的对象，它用于描述一个匹配规则，然后在字符串中查找该规则。在这个例子中，我们使用了一个常见的规则，它可以找到形如“key=value”形式的字符串，并将它们保存为对象的键值对。最后，我们还将值解码，以便能够正确地显示调制符、中文和其他特殊字符。现在，我们可以通过以下方式访问我们的查询参数：

```

console.log(queryParams.q); // 'hello world'

console.log(queryParams.lang); // 'en'

```

美化URL

有了查询参数的帮助，我们可以想到许多方式来美化URL。下面，我们将介绍一些技巧，可以帮助你为你的网站创建更好的体验。

1. 重构搜索参数

如果你的网站具有搜索功能，则可以考虑将查询参数按键值对的方式替换为更长、更易于理解的URL。例如：

```

https://www.example.com/search/hello+world/lang=en

```

这种形式的URL通常被称为“美化URL”。用户可以更轻松地记住它们，也更容易在社交媒体上共享它们。为了实现这种URL结构，我们可以将以下代码添加到我们的网站中：

```

const queryParams = getQueryParams(window.location.search);

const searchTerms = queryParams.q.split(" ").join("+");

const language = queryParams.lang;

const newUrl = `https://www.example.com/search/${searchTerms}/lang=${language}`;

window.location.replace(newUrl);

```

在这个例子中，我们使用了一个叫做“replace”方法的JavaScript函数，用于在不更改浏览器历史记录的情况下将页面重定向到新的URL。我们还使用了ES6的字符串插值的特性，它可以帮助我们更轻松地构建URL字符串。

2. 记住用户的滚动位置

如果你的网页属于长页面，那么在用户滚动时记住他们的位置通常是很重要的。但是，常规的JavaScript滚动操作会更改URL中的“#”标识符，这可能影响用户在历史记录中的导航。为了解决这个问题，我们可以使用查询参数来保存用户的滚动位置：

```

function rememberScrollPosition() {

const scrollPosition = window.scrollY;

const newUrl = window.location.pathname + `?scroll=${scrollPosition}`;

history.replaceState({scrollPosition}, null, newUrl);

}

function restoreScrollPosition() {

const queryParams = getQueryParams(window.location.search);

const scrollPosition = parseInt(queryParams.scroll, 10) || 0;

window.scrollTo(0, scrollPosition);

}

window.addEventListener("scroll", rememberScrollPosition);

window.addEventListener("load", restoreScrollPosition);

```

在这个例子中，我们使用了两个函数——“rememberScrollPosition”和“restoreScrollPosition”。前者可以监听页面的滚动事件，并保存当前滚动位置，以查询参数的形式更新URL。后者可以在页面加载后，将用户带到他们离开页面时的滚动位置。此外，我们还使用了一个叫做“history.replaceState”的操作，它可以更新历史记录，以便用户能够更轻松地导航回之前的位置。

3. 生成可发送的URL

对于很多网站来说，如果你需要向朋友或家人发送特定的页面地址，这很重要。根据查询参数构建的URL可以是用户友好的，但它们太长了，不能直接发送。为了解决这个问题，我们可以使用“base64”编码将URL压缩为更短的形式。下面是一个例子：

```

function compressUrl() {

const originalUrl = window.location.href;

const compressedUrl = btoa(originalUrl);

return `http://www.example.com?c=${compressedUrl}`;

}

function decompressUrl() {

const queryParams = getQueryParams(window.location.search);

const compressedUrl = queryParams.c;

const decompressedUrl = atob(compressedUrl);

history.replaceState(null, null, decompressedUrl);

}

window.addEventListener("load", decompressUrl);

```

在这个例子中，我们使用了JavaScript的“btoa”和“atob”函数，它们可以将字符串转换为Base64编码，并将Base64编码转换回原始字符串。这个例子中，我们还使用了ES6的字符串插值的特性，它可以帮助我们更轻松地构建URL字符串的缩短版本。最后，我们使用了“atob”函数将缩短的URL还原为原始URL，并使用“history.replaceState”更新了页面历史记录。

总结

在现代Web开发中，掌握查询参数技巧可以帮助我们更好地美化我们的URL。虽然这些技巧可能需要一些JavaScript编程技巧，并且需要一定的学习成本，但它们可以大大提升我们的用户体验。如果您的网站需要提供一些高级功能，那么这些技巧将会非常有用。