反单引号：让JS字符拼接更优雅

马黑黑 · 发表于 2022-3-29 13:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-3-29 13:14 编辑

优雅之外，也更方便。我们一写 table 标签为例，我们知道，它是由一系列的父标签和子标签组成。比如下面的2*2表格代码：

<table>
<tr>
      <td>行一 : 单元格一</td>
      <td>行一 : 单元格二</td>
</tr>
<tr>
      <td>行一 : 单元格一</td>
      <td>行一 : 单元格二</td>
</tr>

</table>

用 HTML 写表格自然没啥问题，但多数情况下，我们需要用表格加载庞大的数据，这时候用 JS 写表格很省事，但有个问题，传统的字符串拼接方式，代码会令人眼花缭乱，一系列的加号带着一大堆的单引号、双引号，不太好区分哪个对哪个，tr、td写得不对称也是常用的是。为此，表格和数据相对复杂的，还是用反单引号写表格及其数据更好。先看常规的字串拼接写法（假设我们已经有了一个二维数组 arr ，我们要写一个 arr.length*4的表格）：

var tbCode = "<table class='tbcl'><tr>";
for(j=0; j<arr.length; j++) {
tbCode += "<td>" + (j+1) + "</td><td>" + arr[j][0] + "</td><td>" + arr[j][1] + "</td><td>" + arr[j][2] + "</td>";
}
tbCode += "</tr></table>";

看得出来，循环语句内的拼接单元格的语句，长且不说，主要是拼接方法不易阅读，不方便查错。改用反单引号来写字串拼接，情况大不相同：

var tbCode = `<table class='tbcl'><tr>`;
for(j=0; j<arr.length; j++) {
tbCode += `
      <td>${j+1}</td>
      <td>${arr[j][0]}</td>
      <td>${arr[j][1]}</td>
      <td>${arr[j][2]}</td>`;
}
tbCode += `</tr></table>`;

这里，循环体内外的字串拼接，我们都用了反单引号，这是允许的。反单引号里面的字串，可以随意按语法规范使用单引号、双引号，最主要的，其一：字符串可以和变量、算式放在一起，方法是变量和算式用 ${变量或算式} 这样的语句格式，其前后都可以有字符串；其二：拼接的字串可以分行写，令所拼接的字串群能够一目了然。

这几个优点，便是这种字串拼接的写法的优雅与方便所在。