如何使用JavaScript生成格式为example.com/index.php#number的带锚点新链接

你需要的example.com/index.php#number格式链接核心是基础URL拼接哈希片段，可以根据使用场景选择以下实现方式：

• 场景1：简单场景直接字符串拼接
  适用于基础URL固定、无复杂参数的情况，写法最简洁：

const baseUrl = 'example.com/index.php'
// 自定义哈希值可以替换为任意你需要的内容，比如动态获取的数字、标识字符串
const hash = 'number'
const targetUrl = `${baseUrl}#${hash}`
// 输出结果：example.com/index.php#number

• 场景2：规范场景使用URL API
  如果是带协议的完整URL、或者存在查询参数，推荐用原生URL API处理，避免格式错误：

// 传入完整带协议的基础链接
const url = new URL('https://example.com/index.php')
// hash属性会自动添加#前缀，无需手动拼接
url.hash = 'number'
const targetUrl = url.href
// 输出结果：https://example.com/index.php#number

• 场景3：批量生成带数字后缀的hash链接
  如果需要生成多个按数字递增的hash链接，可以用循环实现：

const baseUrl = 'example.com/index.php'
// 要生成的链接总数量
const total = 15
const urlList = []
for (let i = 1; i <= total; i++) {
  urlList.push(`${baseUrl}#${i}`)
}
// 最终得到从example.com/index.php#1到example.com/index.php#15的链接数组

• 场景4：将生成的链接插入到页面中
  如果需要把链接渲染到网页DOM里，可以用以下写法：

const baseUrl = 'example.com/index.php'
const container = document.querySelector('#link-container') // 替换为你页面里的容器选择器
for (let i = 1; i <= 10; i++) {
  const link = document.createElement('a')
  link.href = `${baseUrl}#${i}`
  link.textContent = `链接${i}`
  container.appendChild(link)
  container.appendChild(document.createElement('br'))
}

内容的提问来源于stack exchange，提问作者Novinity