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

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

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

这是一个表格列表数据的渲染,通过配置项的方式,去通过原生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中,假设有一列表内容,点击我们可以进行页面的跳转到响应的详情页面,这就需要给每一个都定义点击事件:

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

代码如下:

# 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)
  }
}

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

目录
相关文章
|
17天前
|
JavaScript 前端开发 开发者
|
1月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
43 3
|
2月前
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
2月前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
38 2
|
3月前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
2月前
|
存储 JavaScript 前端开发
JavaScript Number 对象
JavaScript Number 对象
26 0
|
2月前
|
JavaScript 前端开发
今天被JavaScript的String型和数字型的+运算撞了一下腰。
今天被JavaScript的String型和数字型的+运算撞了一下腰。
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
5月前
|
JavaScript 前端开发 索引
JavaScript有7个数据类型:Number, String, Boolean, Null, Undefined, Symbol(BES6)和BigInt(ES10)组成基本类型
【6月更文挑战第25天】JavaScript有7个数据类型:Number, String, Boolean, Null, Undefined, Symbol(BES6)和BigInt(ES10)组成基本类型,而Object包括Array、Function等是引用类型。Objects可以包含键值对,Array是特殊的Object。Functions也是对象。`null`和`undefined`被视为特殊的原始值。
55 1
|
5月前
|
关系型数据库 MySQL
【随手记】MySQL中ROW_NUMBER()、RANK()和DENSE_RANK()函数的用法
【随手记】MySQL中ROW_NUMBER()、RANK()和DENSE_RANK()函数的用法
163 1

热门文章

最新文章

下一篇
无影云桌面