如何在HTML的href中动态传入id变量至Contact与view之间？求简单方案

纯原生JS环境 #

直接用字符串拼接或者ES6模板字符串就能搞定，两种方法都很简单：

方法1：ES6模板字符串（更简洁，推荐） #

用反引号把整个URL包起来，变量用${}直接嵌入到Contact和view中间，替换原来的双斜杠：

var id = 0x323214343;
// 动态生成a标签
const link = document.createElement('a');
link.href = `https://develop.lightning.force.com/lightning/r/Contact/${id}/view`;
link.textContent = doctor.Name;
// 将标签添加到页面，比如body
document.body.appendChild(link);

如果是生成HTML代码片段插入DOM：

var id = 0x323214343;
const htmlSnippet = `<a href="https://develop.lightning.force.com/lightning/r/Contact/${id}/view">${doctor.Name}</a>`;
// 替换到页面指定容器
document.getElementById('your-container-id').innerHTML = htmlSnippet;

方法2：传统字符串拼接（兼容旧浏览器） #

如果要兼容不支持ES6的老浏览器，用加号把字符串和变量拼起来即可：

var id = 0x323214343;
const targetUrl = "https://develop.lightning.force.com/lightning/r/Contact/" + id + "/view";
const link = document.createElement('a');
link.href = targetUrl;
link.textContent = doctor.Name;
document.body.appendChild(link);

主流前端框架场景（举两个常用例子） #

Vue（2/3通用） #

在模板里用:href绑定属性，直接用模板字符串插值：

<template>
  <a :href="`https://develop.lightning.force.com/lightning/r/Contact/${id}/view`">{{ doctor.Name }}</a>
</template>

<script>
export default {
  data() {
    return {
      id: 0x323214343,
      doctor: { Name: '示例医生姓名' }
    }
  }
}
</script>

React #

在JSX里直接用模板字符串嵌入变量：

function DoctorContactLink() {
  const id = 0x323214343;
  const doctor = { Name: '示例医生姓名' };
  return (
    <a href={`https://develop.lightning.force.com/lightning/r/Contact/${id}/view`}>
      {doctor.Name}
    </a>
  );
}

核心逻辑 #

不管用哪种方式，核心都是把原来URL里Contact//view的双斜杠部分，替换成/${id}/，也就是把id变量插入到Contact和view之间的路径位置。

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