在前端開發中，URL和ctx是不可避免的概念。URL是統一資源定位符的縮寫，是描述網絡上資源位置的字符串。而ctx則是前后端交互時使用的上下文，即當前請求所在的上下文對象。在JavaScript中，我們可以通過URL和ctx獲取或修改頁面的相關信息。下面將詳細介紹URL和ctx在JavaScript中的使用。
URL
URL在前端開發中經常被使用，它可以獲得頁面URL地址中的各種參數值，用于后續操作。比如，我們可以獲取當前頁面的URL地址：

let url = window.location.href;
console.log(url); // https://www.example.com/index.html

除此之外，我們還可以獲取URL地址中的各種參數值：
假設我們的URL地址是這樣的：https://www.example.com/?name=張三&age=18
我們可以如下獲取URL參數：

// 獲取單個參數值
let name = window.location.search.match(/name=([^&]*)/)[1];
console.log(name); // 張三
// 獲取多個參數值，返回一個對象
function getUrlParams() {
let match,
reg = /([^&=]+)=([^&]*)/g,
params = {};
while ((match = reg.exec(window.location.search))) {
params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
}
return params;
}
console.log(getUrlParams()); // {name: "張三", age: "18"}

另外，我們還可以修改頁面的URL地址，比如利用pushState和replaceState方法來實現無刷新頁面跳轉：

let stateObj = { title: "page2", url: "http://www.example.com/page2" };
history.pushState(stateObj, "page2", "http://www.example.com/page2"); // 當前URL變為：http://www.example.com/page2
history.replaceState(stateObj, "page2", "http://www.example.com/page2"); // 替換當前URL為：http://www.example.com/page2

ctx
ctx通常指的是上下文，是指前后端交互時使用的上下文對象。在Angular、Vue等前端框架中，ctx也常常被使用，它保存了當前請求的一些基本信息，如當前請求的URL、請求頭信息等。
在JavaScript中，我們可以通過JavaScript中的AJAX請求向后端請求數據，并且將后端返回的數據放入ctx中：

// 前端AJAX請求
let xhr = new XMLHttpRequest();
xhr.open("POST", "/api/order/save", true);
xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let res = JSON.parse(xhr.responseText);
console.log(res);
// 將結果放入ctx中
let ctx = {};
ctx.data = res.data;
ctx.msg = res.message;
}
};
xhr.send(JSON.stringify(requestData));

通過ctx，我們可以在前端拿到后端返回的數據，并進行相應的操作。此外，ctx還可以用于保存當前用戶的登錄信息、路由信息等。
總結
URL和ctx在JavaScript中是非常常用的概念，我們可以通過URL獲取當前頁面的地址和參數值，也可以通過ctx保存一些基本信息，在前端開發中具有重要的作用。希望本文對大家有所幫助。