如果你想获取站点的URL信息，那么window.location对象适合你！使用其属性获取有关当前页面地址的信息，或使用其方法进行某些页面重定向或刷新。https://segmentfault.com/search?q=FrontendXiaozhi#2window.location.origin→'"https://segmentfault.com'.protocol→'https:'.host→'segmentfault.com'.hostname→'segmentfault.com'.port→''.pathname→'/search'.search→'?q=Frontend小智'.hash→'#2'.href→'https://segmentfault.com/search?q=Front-endXiaozhi#2'window.location.assign('url').replace('url').reload().toString()window.location属性window.location返回值.origin站点主地址（协议+主机名+port).protocol协议架构(http:或htts:).host域名+port.port端口.pathname前面带'/'的路径.search?后面是查询字符串.hash从##开始Partial.hrefFullURLhost和hostname的区别在上面的例子中，你可能已经注意到了host和主机名返回相同的值，所以为什么这些属性。嗯，跟端口号有关系，一起来看看吧。没有端口的URLwindow.location.host;//'segmentfault.com'window.location.hostname;//'segmentfault.com'window.location.port;//''有端口的URLhttps://segmentfault.com/search"8080window.location.host;//'segmentfault.com:8080'window.location.hostname;//'segmentfault.com'window.location.port;//'8080'因此，主机将包含端口号，而hostname只会返回主机名。如何更改URL属性我们不仅可以调用location`属性来检索URL信息，还可以使用它来设置新属性和更改URL。//Start'https://segmentfault.com/'window.location.pathname='/tidbits';//setpathname//result'https://segmentfault.com/tidbits'这是您可以更改的完整属性列表//examplewindow.location.protocol='https'.host='localhost:8080'.hostname='localhost'.port='8080'.pathname='path'.search='querystring'//（这里不要写`?`).hash='hash'//(这里不用写`#`).唯一不能设置的属性f或者href='url'是window.location.origin，它是只读的。Location对象window.location返回一个Location对象。它为我们提供了当前页面信息的地址。但我们也可以通过多种方式访问??Location对象。window.location→Locationwindow.document.location→Locationdocument.location→Locationlocation→Location我们这样做的原因是这些是我们浏览器中的全局变量。window.locationvslocation的上述四个属性都指向同一个Location对象。我个人更喜欢window.location并且实际上会避免定位。主要是因为location看起来像一个普通的变量，我们有时会不小心将其命名为变量，这会覆盖全局变量。例如：//https://www.samanthaming.comlocation.protocol;//'https'functionlocalFile(){constlocation='/sam';returnlocation.protocol;//?undefined//b/clocal"location"hasoverridetheglobalvariable我想大多数开发人员都知道window是一个全局变量。这样就不太可能引起混淆。老实说，在写这篇文章之前，我并不知道location是一个全局变量。建议您使用window.location而不是其他写法。window.locationmethodmethodmethodrole.assign()加载一个新文档。replace()用新文档替换当前文档。reload()重新加载当前页面。reload()根据MDN返回URLwindow.location.toString:this方法返回URL的USVString，它是Location.href的只读版本。也就是说，我们可以这样获取href的值：//https://www.samanthaming.comwindow.location.href;//https://www.samanthaming.comwindow.location.toString();//https://www.samanthaming.comassign与replace这两种方法都重定向或导航到另一个URL。不同之处在于assign将当前页面保存在历史记录中，因此用户可以使用“后退”按钮导航到它。而使用replace方法时，是不保存的。让我们看一个例子。分配1.打开一个新的空白页面2.输入www.samanthaming.com（当前页面）3.使用`window.location.assign('https://www.w3schools.com')`加载一个新页面4.按“返回上一页”5.返回👉www.samanthaming.com替换1.打开一个新的空白页面2.输入www.samanthaming.com（当前页面）3.使用`window.location.assign('https://www.w3schools.com')`加载新页面4.按“返回上一页”5.返回空白页如何重定向页面如何重定向到另一个页面，有3种方法。window.location.href='https://www.samanthaming.com';window.location.assign('https://www.samanthaming.com');window.location.replace('https://www.samanthaming.com');replacevsassignvshref三者都可以重定向，区别在于浏览器的历史。href和assign会将当前页面保存在历史记录中，但replace不会。因此，如果您想创建无法导航回原始页面的体验，请使用replace??现在的问题是href与assign。我更喜欢分配，因为它是一种方法，所以感觉就像我在做某事。还有一个额外的好处是它更容易测试。我写过很多Jest测试，所以通过使用一种方法，可以更轻松地进行模拟。window.location.assign=jest.fn();myUrlUpdateFunction();expect(window.location.assign).toBeCalledWith('http://my.url');最后希望cheatsheet，希望对你有帮助帮助，在需要的时候，快速给你带来答案。谢谢大家收看。作者：SamanthaMing译者：前端小智来源：medium原文：https://morioh.com/p/b444d291bdfb本文转载自微信公众号“大运世界”，可通过以下二维码关注.转载本文请联系前端小智公众号。
