获取url的hash值最直接的方法是使用window.location.hash，它返回包含#号及其后内容的字符串，若无hash则返回空字符串；2. 若需去除#号，可使用substring(1)截取#之后的内容；3. 处理空hash时应先判断window.location.hash是否为真，避免对空字符串操作；4. 监听hash变化可通过window.addeventlistener('hashchange', callback)实现，该事件在hash值改变时触发，适用于单页应用的路由控制，最终确保应用在不同hash状态下稳定运行并实现无刷新页面切换。
在JavaScript里要获取URL的hash值，最直接也是最常用的方法就是使用
window.location.hash属性。它能让你轻松拿到地址栏里那个井号（#）后面的所有内容。
解决方案
获取URL的hash值，其实就是一行代码的事。你可能在开发单页应用（SPA）或者做一些页面内锚点跳转时，会频繁地和它打交道。
// 假设当前URL是：http://example.com/page.html#section-1?param=value const hashValue = window.location.hash; console.log(hashValue); // 输出: "#section-1?param=value" // 如果URL是：http://example.com/page.html // console.log(window.location.hash); // 输出: "" (空字符串)
这个
window.location.hash非常方便，它直接返回一个字符串，包含了URL中
#符号及其之后的所有内容。如果URL里没有hash值，它就会返回一个空字符串。值得注意的是，返回的字符串是包含
#符号本身的。这一点在使用时需要特别注意，因为多数时候我们可能只想要
#后面的实际内容。
获取到的hash值包含#号怎么办？
这是个很常见的后续问题。
window.location.hash的便利性在于它直接给你了原始数据，但实际应用中，我们往往不需要那个
#。比如说，我想要根据hash值来切换页面内容，如果hash是
#about，我可能只想拿到
about这个字符串。
处理这个很简单，你可以利用字符串的
substring方法来截取。
const fullHash = window.location.hash; // 比如 "#my-section"
if (fullHash) { // 确保有hash值，避免对空字符串操作
const cleanHash = fullHash.substring(1); // 从索引1开始截取，跳过'#'
console.log(cleanHash); // 输出 "my-section"
} else {
console.log("URL中没有hash值。");
}这里
substring(1)就是关键。它从字符串的第二个字符（索引为1）开始截取，直到字符串末尾，自然就把开头的
#给去掉了。当然，如果你更喜欢，也可以用
replace('#', '')，但substring(1)在语义上更明确，因为它就是为了“跳过第一个字符”而生的。
hash值为空字符串的情况如何处理？
在实际的项目里，你不能总是假设URL里一定会有hash值。用户可能直接访问了根URL，或者URL本身就没有设计hash部分。这时候
window.location.hash会返回一个空字符串
""。那么，我们该如何优雅地处理这种“没有hash”的情况呢？
我的做法通常是先判断
window.location.hash是否为真（即非空字符串），然后根据是否有值来决定后续逻辑。
const currentHash = window.location.hash;
if (currentHash) {
// 有hash值，可以进一步处理，比如去掉#号，或者根据hash值加载特定内容
const processedHash = currentHash.substring(1);
console.log(`当前hash是：${processedHash}`);
// 假设根据hash加载内容
// loadContentByHash(processedHash);
} else {
// 没有hash值，通常意味着这是页面的初始状态，或者需要加载默认内容
console.log("URL中没有指定hash，加载默认内容或执行默认行为。");
// loadDefaultContent();
}这种条件判断是编程中的基本功，但在这里尤为重要。它能让你避免对空字符串进行不必要的操作，防止潜在的错误，并确保你的应用在各种URL状态下都能稳定运行。我个人觉得，写代码的时候多想一步，考虑“如果没有会怎样”，比事后调试要省心得多。
hash值发生变化时如何监听？
当用户在浏览器中通过点击锚点链接、手动修改URL的hash部分，或者通过JavaScript代码改变
window.location.hash时，URL的hash值就会发生变化。在前端路由中，监听hash变化是实现无刷新页面跳转的核心机制之一。浏览器提供了一个专门的事件来处理这种情况：
hashchange事件。
你可以给
window对象添加一个
hashchange事件监听器：
window.addEventListener('hashchange', function() {
const newHash = window.location.hash;
console.log('URL的hash值变了！新的hash是:', newHash);
// 在这里你可以根据新的hash值来更新页面内容，实现“路由”功能
// 例如：
// if (newHash === '#products') {
// displayProductsPage();
// } else if (newHash === '#about') {
// displayAboutPage();
// } else {
// displayHomePage();
// }
});
// 模拟改变hash值，触发事件
// setTimeout(() => {
// window.location.hash = 'new-section';
// }, 2000);hashchange事件非常方便，它会在
window.location.hash的值改变时自动触发，而不会导致整个页面的重新加载。这对于构建流畅的单页应用体验至关重要。旧的浏览器可能不支持这个事件，但现在主流浏览器支持度已经非常好了，所以通常不用担心兼容性问题。利用这个事件，你可以构建出非常灵活和响应式的Web应用，让用户感觉就像在桌面应用里一样顺滑。
