如何从 URL 中获取片段标识符？

在 Web 开发中，URL 中的片段标识符（Fragment Identifier）是指 # 符号后的部分，通常用于定位页面的某个具体部分。例如，https://www.example.com/about#team 就是一个含有片段标识符的 URL，其中片段标识符为 team。

有时，我们需要在前端 JavaScript 中获取 URL 中的片段标识符，并据此进行相应的处理。本文将介绍如何从 URL 中获取片段标识符。

使用 location 对象

在浏览器中，当前页面的 URL 被存储在一个名为 location 的全局对象中。我们可以通过访问该对象的 hash 属性来获取 URL 中的片段标识符。

const fragmentIdentifier = window.location.hash.slice(1);
console.log(fragmentIdentifier);

上述代码中，我们通过访问 window.location.hash 属性获取 URL 中的片段标识符，并使用 slice 方法去掉 # 符号。最终结果会被存储在变量 fragmentIdentifier 中，并输出到控制台。

需要注意的是，由于 hash 属性的值始终包含 # 符号，因此我们需要使用 slice 方法将其去掉。

监听 hashchange 事件

除了直接获取 URL 中的片段标识符外，我们还可以通过监听 hashchange 事件来实现对片段标识符的监听。

window.addEventListener('hashchange', () => {
  const fragmentIdentifier = window.location.hash.slice(1);
  console.log(fragmentIdentifier);
});

上述代码中，我们使用 addEventListener 方法监听 hashchange 事件，并在每次事件触发时获取 URL 中的片段标识符，并输出到控制台。

需要注意的是，hashchange 事件只会在 URL 中的片段标识符发生改变时触发。

小结

从 URL 中获取片段标识符可以使用 location 对象的 hash 属性，也可以使用监听 hashchange 事件。无论哪种方法，我们都需要注意片段标识符始终包含 # 符号，需要使用相应的方法去掉。