DDR爱好者之家

浅谈JavaScript中你可能不知道URL构造函数的属性
站长资源 2024/11/24 佚名
62 1538
DDR爱好者之家 Design By 杰米

URL

URL 是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它,

在 Web 开发中，有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点

例如，这里是这篇博客文章的路径:

https://www.vipbic.com/thread.html"color: #ff0000">一个完整URL

用一张图片来解释，没有太多的文字描述，在下面的图片中你可以找到一个 URL 的主要包含属性:

浅谈JavaScript中你可能不知道URL构造函数的属性

URL constructor

URL ()是一个 constuctor 函数，它可以解析 URL 的对象:

const url = new URL(relativeOrAbsolute [, absoluteBase]);

relativeOrAbsolute参数可以是绝对 URL，也可以是相对 URL。如果第一个参数是相对的，那么第二个参数 absoluteBase 必须是绝对 URL，它必须是第一个参数的基础

例如，让我们用一个绝对 URL 初始化 URL():

const url = new URL('http://example.com/path/index.html');
url.href; // => 'http://example.com/path/index.html'

或者合并相对和绝对的 url:

const url = new URL('/path/index.html', 'http://example.com');
url.href; // => 'http://example.com/path/index.html'

创建 URL ()实例后，可以访问实例:

interface URL {
 href:   USVString;
 protocol: USVString;
 username: USVString;
 password: USVString;
 host:   USVString;
 hostname: USVString;
 port:   USVString;
 pathname: USVString;
 search:  USVString;
 hash:   USVString;

 readonly origin: USVString;
 readonly searchParams: URLSearchParams;

 toJSON(): USVString;
}

可以尝试在浏览中打印

浅谈JavaScript中你可能不知道URL构造函数的属性

Query string

Search 属性访问前缀为"htmlcode"> 

const url = new URL(
 'http://example.com/path/index.html"htmlcode">



const url1 = new URL('http://example.com/path/index.html');
const url2 = new URL('http://example.com/path/index.html"color: #ff0000">Parsing query string


浅谈JavaScript中你可能不知道URL构造函数的属性


访问查询参数比访问原始查询字符串更方便


一种简单的查询参数选择方法提供了 url.searchParams 属性，该属性包含 URLSearchParams 的实例


URLSearchParams 对象提供了许多方法(如 get (param)、 has (param))来访问查询字符串参数


看一个例子:





const url = new URL(
 'http://example.com/path/index.html"color: #ff0000">hostname


Hostname 属性包含 URL 的主机名:





const url = new URL('http://example.com/path/index.html');
url.hostname; // => 'example.com'





pathname


属性获取 URL 的路径名:





const url = new URL('http://example.com/path/index.html"htmlcode">



const url = new URL('http://example.com/');
url.pathname; // => '/'





hash


可以使用 url.hash 属性访问#后面的参数:





const url = new URL('http://example.com/path/index.html#bottom');
url.hash; // => '#bottom'





当 URL 中的散列#时，URL.hash 计算为空字符串” :





const url = new URL('http://example.com/path/index.html');
url.hash; // => ''





URL validation


当new URL ()构造函数创建一个实例时，作为副作用，它还验证 URL 的正确性。如果 URL 值无效，则抛出 TypeError


例如，http ://example. com 是一个无效的 URL，因为 http 后面的空格字符


让我们使用这个无效的 URL 来初始化解析器:





try {
 const url = new URL('http ://example.com');
} catch (error) {
 error; // => TypeError, "Failed to construct URL: Invalid URL"
}





因为'http ://example. com'是一个无效的 URL，正如预期的那样，new URL ('http ://example. com')抛出一个 TypeError


URL manipulation


除了访问 URL 属性之外，搜索、主机名、路径名、hash等属性都是可写的ーー因此您可以操作 URL


例如，让我们把现有 URL 的主机名从 red. com 修改为 blue.io:





const url = new URL('http://red.com/path/index.html');
url.href; // => 'http://red.com/path/index.html'

url.hostname = 'blue.io';
url.href; // => 'http://blue.io/path/index.html'





注意，只有 URL ()实例的 origin 和 searchParams 属性是只读的。其他的都是可写的，当你改变它们的时候可以修改 URL


总结


URL()构造函数可以方便地在 JavaScript 中解析(和验证) URL


new URL (relativeOrAbsolute [ ，absolute base ])接受作为第一个参数的绝对或相对 URL。如果第一个参数是相对的，则必须将第二个参数指


示为一个作为第一个参数基础的URL


创建 URL()实例后，可以获取到以下实列方法


    
  
  • url.search 原始查询字符串
    • 
  
  • url.searchParams 选择查询字符串参数
    • 
  
  • url.hostname 访问主机名
    • 
  
  • url.pathname 读取路径名
    • 
  
  • url.hash #后面的参数
    • 



文章属于翻译，作者部分有所改动，


作者：羊先生


英文原文， https://dmitripavlutin.com/parse-url-javascript/


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米