如何给 onclick 函数加上单引号？

Question

我的代码在这里 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>');
                  }
                 }
              }

Answer 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>`);
}

Answer 2

使用 Template literals (Template strings) 怎么样？这些真的很好。因为它们被反引号 (``) 括起来，所以您不会运行进入您面临的 single/double 引用问题。

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

不再凌乱'string' + variable + 'string'
相反，您可以这样做 `string ${variable} string`

查看下面的代码片段，我在对象中放入了一些虚构的日期以传递给函数。

当然，唯一需要注意的是，这些是 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`));

如何给 onclick 函数加上单引号？

How to put single quotes to the onclick function?

javascript

jquery

datatable

quotes