a标签onclick传递参数不对

问题:方法能够调用到，传递参数时参数奇奇怪怪的。不是想要的值

一、代码

returnContent(content) {
   var str_new1 = content
   let temporaryArr = str_new1.split(`a href="`)
   let resultArr = []
   temporaryArr.forEach((item, index) => {
       if (index == 0) {
           resultArr[index] = item
       } else {
           let id = `${item.slice(0, item.indexOf('"'))}`
           resultArr[index] =
               'a href="' +
               'javascript:;"' +
               ' ' +
               `οnclick="openDetails('${id}')` +  //模板字符串中要加‘’
               ';return false;"' +
               ' ' +
               item.slice(item.indexOf('target="_blank"'))
       }
   })
   return resultArr.join('')
},

链接: https://blog.csdn.net/readiay/article/details/50947311

在 JavaScript 中，字符串变量需要使用引号或双引号来表示。因此，在 onclick 事件处理程序中，如果要将某个变量的值作为参数传递给函数，需要将变量名放在字符串模板中，并使用引号或双引号对整个字符串进行包装。

例如，在 onclick 事件处理程序中，如果要将变量 id 的值传递给名为 openDetails 的函数，可以这样写：

<button onclick="openDetails('${id}')">打开详情</button>

在这个示例中，我们使用 ${id} 表达式将变量 id 的值插入到字符串模板中，然后使用单引号对整个字符串进行包装。当用户单击按钮时，浏览器将根据模板渲染出一个类似于 openDetails(‘123’) 的函数调用语句，其中的 123 是变量 id 的值。

需要注意的是，在使用字符串模板时，应该根据实际情况选择合适的引号或双引号进行包装，并且避免因为缺少或多余引号而导致语法错误。另外，为了避免 XSS 攻击和安全漏洞，建议您使用编程方式动态绑定事件处理程序，而不是直接在 HTML 标签中使用 onclick 属性。

openDetails(id)事件绑定到组件上

假如这段代码出现在 Vue 组件中，其中的 this 指向的是组件实例对象。因此，绑定后可以通过组件实例对象调用该函数，例如：

mounted() {
  // 将 openDetails 函数绑定到组件实例对象上
  window.openDetails = this.openDetails;
}

methods: {
  openDetails() {
    // 打开详情页面
  }
}

这段代码是将当前作用域中的 openDetails 函数绑定到 this 对象上，以便在其他地方可以通过 this.openDetails() 调用该函数。

在这个示例中，我们在 Vue 组件的 mounted 生命周期钩子中将 openDetails 函数绑定到组件实例对象上，然后在组件的 methods 中定义了一个 openDetails 函数，用于打开详情页面。当其他地方需要调用 openDetails 函数时，可以通过 window.openDetails() 或者 this.openDetails() 进行调用。

需要注意的是，由于 window 对象在浏览器中是全局对象，因此使用 window.xxx 的方式定义全局变量或函数可能会引起命名冲突和安全问题。为了避免这种情况发生，最好使用模块化的方式进行组织和管理，以确保代码的可读性和可维护性。