如何将class的publicid追加到HTTPS目标链接？

下面分几种常见场景给出具体实现方法：

原生JavaScript场景 #

假设你有包含publicid的类，先创建类实例，再通过模板字符串拼接完整链接，最后生成a标签：

// 定义包含publicid的类
class Earthquake {
  constructor(publicid) {
    this.publicid = publicid;
  }
}

// 创建类实例
const quakeInstance = new Earthquake("2024p123456");
// 基础链接
const baseUrl = "https://www.geonet.org.nz/earthquake/";
// 拼接完整链接（用模板字符串避免语法错误）
const fullUrl = `${baseUrl}${quakeInstance.publicid}`;

// 生成并插入a标签
const linkElement = document.createElement('a');
linkElement.href = fullUrl;
linkElement.textContent = "查看地震详情";
document.body.appendChild(linkElement);

Vue框架场景 #

在Vue模板中可以直接通过绑定属性+模板字符串实现：

情况1：publicid在data中 #

<template>
  <!-- 用v-bind(:)绑定href，模板字符串拼接链接 -->
  <a :href="`https://www.geonet.org.nz/earthquake/${publicid}`">查看地震详情</a>
</template>

<script>
export default {
  data() {
    return {
      publicid: "2024p123456" // 可从类实例或接口获取
    };
  }
};
</script>

情况2：publicid在自定义类实例中 #

<template>
  <a :href="`https://www.geonet.org.nz/earthquake/${quakeInstance.publicid}`">查看地震详情</a>
</template>

<script>
// 自定义类
class Earthquake {
  constructor(publicid) {
    this.publicid = publicid;
  }
}

export default {
  data() {
    return {
      quakeInstance: new Earthquake("2024p123456")
    };
  }
};
</script>

React框架场景 #

在React组件中拼接链接后赋值给a标签的href属性：

import React from 'react';

// 自定义类
class Earthquake {
  constructor(publicid) {
    this.publicid = publicid;
  }
}

function EarthquakeDetailLink() {
  const quakeInstance = new Earthquake("2024p123456");
  const fullUrl = `https://www.geonet.org.nz/earthquake/${quakeInstance.publicid}`;
  
  return <a href={fullUrl}>查看地震详情</a>;
}

export default EarthquakeDetailLink;

常见错误提醒 #

你之前尝试的写法可能犯了双引号嵌套语法错误，比如：

<!-- 错误写法：双引号嵌套会导致浏览器解析中断 -->
<a href="https://www.geonet.org.nz/earthquake/" + "publicid">...</a>

必须通过JavaScript（或框架的模板语法）完成变量拼接，再赋值给href属性。

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