🦖欢迎观阅本本篇文章，我是Sam9029

基础语法

new URL() 是 JavaScript 内置对象中的一个方法，用于创建一个新的 URL。以下是基本的语法：

javascript复制代码
	var myUrl = new URL("www.example.com");

在上面的代码中，我们首先导入 JavaScript 的内置对象，然后调用 new URL() 方法来创建一个新的 URL 对象。我们传递一个字符串参数作为 URL，这将是新 URL 的值。

常用方法

new URL() 方法有很多常用的方法，包括：

myUrl.href: 返回当前 URL 的 href 属性值，即链接地址。
myUrl.pathname: 返回当前 URL 的 pathname 属性值，即路径名。
myUrl.search: 返回当前 URL 的 search 属性值，即查询字符串。
myUrl.hash: 返回当前 URL 的 hash 属性值，即哈希值。
myUrl.protocol: 返回当前 URL 的 protocol 属性值，即协议名称。
myUrl.hostname: 返回当前 URL 的 hostname 属性值，即主机名。
myUrl.port: 返回当前 URL 的 port 属性值，即端口号。
myUrl.path: 返回当前 URL 的路径部分，即具体的路径名称。

示例应用

以下是一些使用 new URL() 方法的示例：

创建一个新的链接并设置其路径和标题：

javascript复制代码
	var myLink = document.createElement("a");  

	myLink.href = "www.example.com";  

	myLink.setAttribute("target", "_blank");  

	myLink.innerHTML = "New Link";  

	document.body.appendChild(myLink);

在上面的代码中，我们首先使用文档创建一个新的链接元素，然后设置其路径和标题。我们还设置了链接的target属性为_blank，以使其成为新窗口中的默认链接。最后，我们将新链接添加到文档的主体中。

根据表单字段值设置不同类型的链接：

html复制代码
	<!DOCTYPE html>  

	<html lang="en">  

	<head>  

	    <meta charset="UTF-8">  

	    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

	    <title>Example</title>  

	</head>  

	<body>  

	    <h1>Default Link</h1>  

	    <form>  

	        <label for="email">Email:</label>  

	        <input type="email" id="email" name="email"><br><br>  

	        <label for="password">Password:</label>  

	        <input type="password" id="password" name="password"><br><br>  

	        <button type="submit">Sign in</button>  

	    </form>  

	    <p>You have successfully signed in.</p>  

	    <p><a href="#" onclick="document.getElementById('username').focus();location.href='dashboard.html';">Dashboard</a></p>  

	</body>  

	</html>

在上面的代码中，我们首先定义了一个包含表单字段的页面。当用户单击“Sign in”按钮时，我们将使用 new URL() 方法将页面的 URL 修改为指定的 URL，并将页面标题设置为“Dashboard”。然后，我们使用另一个按钮将用户重定向到另一个页面。

设置动态路由：

html复制代码
	<!DOCTYPE html>  

	<html lang="en">  

	<head>  

	    <meta charset="UTF-8">  

	    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

	    <title>Example</title>  

	</head>  

	<body>  

	    <h1>Example Page</h1>  

	    <p>Click the button to change the URL:</p>  

	    <button onclick="location.href='about.html'">Change to About Page</button>  

	    <script>  

	        var myLink = document.querySelector("a[href^='http']");  

	        if (myLink) {  

	            myLink.href = "about.html";  

	        }  

	    </script>  

	</body>  

	</html>

在上面的代码中，我们首先使用 querySelector() 方法获取链接元素，并检查其是否有一个 href 属性。如果有，我们将其 href 属性设置为指定的 URL。这将导致链接元素的 URL 修改为“about.html”，从而将页面标题设置为“About Page”。 4. 异常处理

new URL() 方法可能会抛出一些异常，例如当传递的参数为无效 URL、未指定字符集时等情况。这些异常的处理可以在需要时显式地添加。以下是一个例子：

javascript复制代码
	try {  

	    var myUrl = new URL("https://www.example.com");  

	} catch (e) {  

	    console.error("Invalid URL: " + e.message);  

	}

在上面的代码中，我们使用 try-catch 语句来捕获可能抛出的异常。如果传递的参数为无效的 URL，将会捕获到一个错误，并输出错误信息。如果您需要在代码中处理这些异常，可以在 catch 块中添加相应的处理逻辑。

总之，new URL() 方法是 JavaScript 内置对象中的一个重要方法，可以用于创建新的 URL 对象，并执行与 URL 相关的操作。通过使用这个方法，我们可以轻松地创建动态页面、设置默认链接以及更改动态路由。掌握好这个方法可以大大简化页面开发过程。

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

【JS-- URL构造对象】

🦖我是Sam9029，一个前端