【JS交互埋坑】事件函数自动将数字字符串String转为数值Number

一、DOM操作中自定义事件函数形参传参自动将数字字符串String转为数值Number。

DOM操作中自定义事件函数形参传参自动将数字字符串String转为数值Number。

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

这是最近在给别人调试一个前后端一体程序的过程中遇到的问题，很奇葩。当然很久之前也遇到过一次类似的问题。
代码是倒腾了好几手的代码了，但是明显第一次搞这个项目的人已经把所有的架构都封装好了，但是没有留下文档，以至于后面的人不了解情况下，调试很不方便。只能参考类似的代码进行处理。

这是一个表格列表数据的渲染，通过配置项的方式，去通过原生DOM渲染到页面。每一项中有一个format函数可以格式化当前行的数据，它返回一个包裹标签和事件的字符串。恰恰就是这个字符串，在自定义函数中传参时暗中捣鬼，将数字字符串转成了数值。
如下代码，这是一段做了拼接的代码，很难发现它会有问腿：

{
  display:操作',
  name '',
  index:'',
  width: 100,
  align:"center",
  editable: false,
  sortable: true,
  hidden: false,
  formatter: function (y, o, r) {
    return '<a operate="delete" href="javascript:void(@)" οnclick="revocationHandle(' + r.VC_BATCH_ID +')">撤销</a>
}

然而是事实是，当我传递 VC_BATCH_ID 的时候总会报 SyntaxError: invalid syntax 这个错误

SyntaxError（语法错误）对象代表尝试解析不符合语法的代码的错误。当 Javascript 引擎解析代码时，遇到了不符合语法规范的标记（token）或标记顺序，则会抛出 SyntaxError。
SyntaxError 是一个可序列化对象，所以可以使用 structuredClone() 对它进行克隆，也可以使用 postMessage() 在 Worker 之间拷贝它。

       VC_BATCH_ID 是诸如 asd-231-tfd-23334 类似的 id 值，所以我尝试传递 123 、‘Hello’、’中国’ 这些数字或字符串常量，发现都可以正常拿到结果。所以又尝试直接把 asd-231-tfd-23334 字面量做了传递，果不其然，又开始报错了。我又尝试传递了对象、数组，都是报错。真是一头雾水。

       我又尝试使用 String（） 、JSON.stringify() 去处理，依旧不行。
问题定位到了，就在于这个传递的参数上，它自己偷偷做了处理。那么到底是什么原因呢？
原来是字符串拼接的过程中，如果有事件函数要传递参数，参数部分应该是 removeHandle("id")这样的。所以我们这里需要转义字符转义一下引号。如下：

{
  display:操作',
  name '',
  index:'',
  width: 100,
  align:"center",
  editable: false,
  sortable: true,
  hidden: false,
  formatter: function (y, o, r) {
    return '<a operate="delete" href="javascriptvoid(@)" οnclick="revocationHandle(\'' + r.VC_BATCH_ID +'\')">撤销</a>
}

注：因为之前的纯原生操作，并没有遇到此类问题。这里不熟悉对方代码到底是如何封装和处理的，有可能与之有关系。但是再遇到诸如此类问题的时候，大家可以参考下解决方案。

二、批量定义元素事件不生效问题

这个问题对于一些成熟的开发人员不算难，很好解决。但是对于一些新手、甚至初级开发人员会造成困扰，所以在这里顺便讲一下。在原生JS中，假设有一列表内容，点击我们可以进行页面的跳转到响应的详情页面，这就需要给每一个都定义点击事件：

• 通过 ul>li 标签定义页面列表内容，并定义相关的类名如：list、item
• 在js中通过document.getElementsByClassName获取所有的元素
• 遍历所有获取的元素，并给每一个都定义点击事件

代码如下：

# HTML 代码
<ul class="list">
  <li class="item">列表展示内容一</li>
  <li class="item">列表展示内容二</li>
  <li class="item">列表展示内容三</li>
  <li class="item">列表展示内容四</li>
  <li class="item">列表展示内容五</li>
  <li class="item">列表展示内容六</li>
  <li class="item">列表展示内容七</li>
</ul>
# JavaScript 代码
var items = document.getElementsByClassName('item')
for(var i = 0; i < items.length; i++){
  items[i].onclick = function(){
    // 执行相关代码
    console.log(i, this)
  }
}

       上面的代码，一气呵成，看起来没有什么问题。如果仅仅是跳转到同一个页面，获取操作当前这个元素，完全可以使用 this 获取对应的内容。但是如果想要携带数据跳转到指定页面，或者当前页面中需要获取当前索引做进一步处理，会发现，索引并不存在于任何一个上面，而是一个固定值。什么原因呢？for 循环中 var 声明的变量是一个全局变量，而且点击事件属于人为触发后执行，而此时循环已经执行完毕，所以当人为i点击时，i的全局变量值已经时 items.length 了。

提供三种解决办法：

1、通过给每一个定义一个属性存储遍历的索引

for(var i = 0; i < items.length; i++){
  items[i],idx = i
  items[i].onclick = function(){
    // 执行相关代码
    console.log(i, this, this.idx)
  }
}

2、通过闭包的方式，形成独立作用域，保存变量的值

for(var i = 0; i < items.length; i++){
  (function(j){
    items[j].onclick = function(){
      // 执行相关代码
      console.log(i, this, j)
    }
  })(i)
}

3、通过let定义场域，让 i 成为局部作用于快中的值保存下来

for(let i = 0; i < items.length; i++){
  items[i].onclick = function(){
    // 执行相关代码
    console.log(i, this)
  }
}

注：三种方式都可以解决问题，可以根据现阶段的知识和能力选择合适的方案