如何在 onclick 函数中加上单引号？

Posted 2023-02-24

【中文标题】如何在 onclick 函数中加上单引号？

【英文标题】：How to put single quotes to the onclick function?

【发布时间】：2019-12-27 06:18:59

【问题描述】：

我的代码在这里 printNextPeriod（新日期（2019-01-01），新日期（2020-01-01），26）； 需要在日期之间加上单引号

期待

printNextPeriod(new Date('2019-01-01'), new Date('2020-01-01'),26);

下面的代码我需要在哪里修复这个错误？

 if (data == 'pestcontrol') 
return ('<button onclick="printNextPeriod(new Date('+row["first_job_dt"]+'), new Date('+row["end_date"]+'),'+row["day_bw_job"]+');" data-jobdays="'+ row["day_bw_job"] +'" data-fjd="'+ row["first_job_dt"] +'" data-actiendcontr="'+ row["end_date"] +'" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">View Schedule-P</button>');
    

数据表中的这些代码

                  "data" : "pest_or_clean", 
                  "bSortable": false,
                   render: function (data, type, row, rowData) 
                  //console.log(data);
                  if (data == 'pestcontrol') 
                  return ('<button onclick="printNextPeriod(new Date('+row["first_job_dt"]+'), new Date('+row["end_date"]+'),'+row["day_bw_job"]+');" data-jobdays="'+ row["day_bw_job"] +'" data-fjd="'+ row["first_job_dt"] +'" data-actiendcontr="'+ row["end_date"] +'" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">View Schedule-P</button>');
                   
                  else 
                  return ('<button data-jobdays="'+ row["day_bw_job"] +'" data-fjd="'+ row["first_job_dt"] +'" data-actiendcontr="'+ row["end_date"] +'" class="btn btn-success btn-sm actclean" data-target="#viewacticleanmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">View Schedule-C</button>');
                  
                 
              

【问题讨论】：

改用addEventListener，你再也不用担心这些烦人的逃逸问题了

@CertainPerformance 现在如何解决这个问题

【参考方案1】：

使用转义引号。

if (data == 'pestcontrol') 
  return ('<button onclick="printNextPeriod(new Date(\''+row["first_job_dt"]+'\'), new Date(\''+row["end_date"]+'\'),'+row["day_bw_job"]+');" data-jobdays="'+ row["day_bw_job"] +'" data-fjd="'+ row["first_job_dt"] +'" data-actiendcontr="'+ row["end_date"] +'" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">View Schedule-P</button>');

如果你使用 ES6 模板文字，那就更简单了。此外，当对象中的属性名称是文字时，您可以编写 variable.prop 而不是更冗长的 variable["prop"]。

if (data == 'pestcontrol') 
  return (`<button onclick="printNextPeriod(new Date('$row.first_job_dt'), new Date('$row.end_date'),$row.day_bw_job');" data-jobdays="$row.day_bw_job" data-fjd="$row.first_job_dt" data-actiendcontr="$row.end_date" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">View Schedule-P</button>`);

【参考方案2】：

使用Template literals (Template strings) 怎么样？这些真的很好。由于它们由反引号 (``) 括起来，因此您不会遇到您面临的单引号/双引号问题。

模板文字也可以包含占位符，这些占位符由美元符号和花括号 ($expression) 表示。

不再乱七八糟'string' + variable + 'string' 相反，您可以这样做`string $variable string`

查看下面的 sn-p，我在其中将一些虚构的日期放入对象中以传递给函数。

当然，唯一需要注意的是，这些是 ES6 规范的一部分，不能与 Internet Explorer 一起使用 https://caniuse.com/#feat=template-literals

如果您必须使用 IE，则需要使用反斜杠 (\) 转义实际上是字符串一部分的单引号，如下所示： '(new Date(\''+row["first_job_dt"]+'\')'

var row = 
  first_job_dt: `2019-01-01`,
  end_date: `2019-12-31`,
  day_bw_job: `2019-07-07`,
  first_job_dt: `2019-05-01`,


function test(data) 
  if (data == `pestcontrol`) 
    return (`<button onclick="printNextPeriod(new Date($row["first_job_dt"]), new Date($row["end_date"]),$row["day_bw_job"]');" data-jobdays="$row["day_bw_job"]" data-fjd="$row["first_job_dt"]" data-actiendcontr="$row["end_date"]" class="btn btn-success btn-sm actpest" data-target="#viewactipestmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">View Schedule-P</button>`);
   else 
    return (`<button data-jobdays="$row["day_bw_job"]" data-fjd="$row["first_job_dt"]" data-actiendcontr="$row["end_date"]" class="btn btn-success btn-sm actclean" data-target="#viewacticleanmodal" data-keyboard="false" data-backdrop="static" data-toggle="modal">View Schedule-C</button>`);
  


console.log(test(`pestcontrol`));

console.log(test(`otherValue`));