内容标签

标签：URL

图解URL、URI和URN 区别

作为一名开发人员，特别的前端开发人员，已经无数次的听到过 URL 和 URI，对于 URN 可能听过的要少点，那么它们之间有什么区别呢？本文带大家巩固一下基本概念。

2021-07-20 前端基础 查看详细

WWW 是否应该属于 URL？

多年来，一场关于地址栏方面的卖弄学问的小型讨论一直存在。一个阵营有谷歌、Instagram和Facebook这样的品牌，该阵营已选择重定向 example.com 到 www.example.com。在相反的阵营中像 GitHub、DuckDuckGo和Discord，而该阵营已选择执行相反的操作并重定向 www.example.com 到 example.com。

2022-12-20 前端基础 查看详细
1JavaScript 获取 URL 参数的方法有哪些？

获取 URL 种的参数是经常要处理的功能。在 URL 中，查询参数字符串值通常提供有关请求的信息，例如搜索参数或正在使用的对象的 ID。如果在前端处理任何业务或请求逻辑，了解如何从 URL 中检索查询字符串值非常重要。

// url https://www.zhihu.com/index.shtml?name=devpoint&id=100
// 格式化 search parameters
{
    name: "devpoint",
    id: "100",
}

常规方式

这是大多数人使用它的方式。

const parseQuery = (search = window.location.search) => {
    const query = {};
    search
        .slice(1)
        .split("&")
        .forEach((it) => {
            const [key, value] = it.split("=");
            query[key] = decodeURIComponent(value);
        });
    return query;
};
console.log(parseQuery("?name=devpoint&id=100")); // { name: 'devpoint', id: '100' }

使用 reduce

const parseQuery = (search = window.location.search) =>
    search
        .replace(/(^\?)|(&$)/g, "")
        .split("&")
        .reduce((query, it) => {
            const [key, value] = it.split("=");
            query[key] = decodeURIComponent(value);
            return query;
        }, {});

console.log(parseQuery("?name=devpoint&id=100")); // { name: 'devpoint', id: '100' }
查看详细