在前端开发中，经常需要处理各种 URL 相关的任务，比如获取 URL 的协议、主机名、端口、路径等等。在这些任务中，获取 URL 的起源(origin)也是非常重要而且常用的一个操作，例如通过 origin 来进行跨域处理，或者获取浏览器当前页面的 origin。
在 JavaScript 中，我们可以使用 Location 对象的属性 origin 来获取 URL 的 origin，但是这种方法比较繁琐并且不太灵活，而 npm 包 get-url-origin 提供了一个轻量级、简单易用的方法来获取 URL 的 origin。本篇文章将会介绍这个 npm 包的使用方法，并附上一些示例代码，帮助你更好地理解和运用这个包。
安装
首先我们需要安装 get-url-origin 这个 npm 包。在命令行中执行以下命令：
npm install get-url-origin --save
使用方法
get-url-origin 提供了一个简单的方法 getOrigin()，可以用来获取给定 URL 的 origin。下面是一个简单的例子：
const getOrigin = require('get-url-origin');
const url = 'https://www.example.com/path/to/resource?query=string#hash';
console.log(getOrigin(url)); // https://www.example.com在这个例子中，我们首先通过 require() 引入了 get-url-origin 包，并将其赋值给 getOrigin 变量。然后我们定义了一个 URL 变量，其中包含了一些路径、查询参数和片段标识符。最后我们调用了 getOrigin(url) 方法来获取这个 URL 的 origin，结果是 https://www.example.com。
如果你想获取浏览器当前页面的 origin，可以使用 window.location.href 参数作为 getOrigin() 方法的参数：
const getOrigin = require('get-url-origin');
console.log(getOrigin(window.location.href));示例代码
下面是一些更复杂的示例代码，展示了如何利用 get-url-origin 包来处理一些不同类型的 URL：
-- -------------------- ---- ------- ----- --------- - -------------------------- -- ---------- --- ------------------------------------------ -- ---------------------- -- -------- --- ------------------------------------------------------- -- ---------------------------- -- ---- --- ------------------------------------------------------- -- ----
在第一个示例中，我们处理了一个不带协议和路径的 URL。在这个情况下，getOrigin() 方法会默认将 URL 的协议设置为 http，然后返回该 URL 的 origin。
在第二个示例中，我们处理了一个带有端口号的 URL。在这种情况下，getOrigin() 方法会返回 URL 的完整 origin，包括协议、主机名和端口号。
在第三个示例中，我们处理了一个 file:// URL。在这种情况下，getOrigin() 方法会返回 null，因为 file:// URL 没有一个真正的“起源”(起点)。
总结
get-url-origin 提供了一种简单而灵活的方式来获取 URL 的 origin，这在前端开发中是非常有用的。通过 npm install 命令，我们可以轻松地安装和使用这个包。在本文中，我们介绍了 get-url-origin 的使用方法和示例代码，希望这些资料对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea181e8991b448e7698