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

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

本帖最后由马黑黑于 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 + "</td><td>" + arr + "</td><td>" + arr + "</td>";
}
tbCode += "</tr></table>";

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

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

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

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

马黑黑 发表于 2022-3-29 13:15

我又不记得在论坛里，字母 i 放在中括号里有特殊意义（斜体）。现在改为 j 了。

马黑黑 发表于 2022-3-29 13:30

加林森 发表于 2022-3-29 13:57

看得很清晰，很工整的单元表格。{:4_199:}

红影发表于 2022-3-29 16:02

这个真好，本来要不停地写td tr的，用循环语句，就可以只写内容了。而且“字符串可以和变量、算式放在一起”，若碰到需要运算的，这个更能发挥出强大作用{:4_199:}

红影发表于 2022-3-29 16:05

反单引号可以换行的这个更好，能看得更清楚，否则像黑黑这个颜色代码一长串地写下去，自己都要看蒙了呢{:4_173:}

红影发表于 2022-3-29 16:06

马黑黑发表于 2022-3-29 13:15
我又不记得在论坛里，字母 i 放在中括号里有特殊意义（斜体）。现在改为 j 了。

黑黑辛苦了，感谢带来的美妙的知识{:4_187:}

马黑黑 发表于 2022-3-29 18:14

红影发表于 2022-3-29 16:06
黑黑辛苦了，感谢带来的美妙的知识

共享共享

马黑黑 发表于 2022-3-29 18:14

红影发表于 2022-3-29 16:05
反单引号可以换行的这个更好，能看得更清楚，否则像黑黑这个颜色代码一长串地写下去，自己都要看蒙了呢{:4_ ...

可不是吗

红影发表于 2022-3-29 20:13

马黑黑发表于 2022-3-29 18:14
共享共享

又去看了看那个颜色表，真挺不容易的，不仅要把符号内容展示出来，要要在第二列把底色调用出来。

红影发表于 2022-3-29 20:14

马黑黑发表于 2022-3-29 18:14
可不是吗

这个做表格真好{:4_187:}

马黑黑 发表于 2022-3-29 20:46

红影发表于 2022-3-29 20:14
这个做表格真好

但我一直纳闷哈，论坛的表格怎么都不好控制

马黑黑 发表于 2022-3-29 20:47

红影发表于 2022-3-29 20:13
又去看了看那个颜色表，真挺不容易的，不仅要把符号内容展示出来，要要在第二列把底色调用出来。

{:4_203:}

红影发表于 2022-3-29 23:01

马黑黑发表于 2022-3-29 20:46
但我一直纳闷哈，论坛的表格怎么都不好控制

就是你说的i用括号有其他含义的问题吧。

红影发表于 2022-3-29 23:01

马黑黑发表于 2022-3-29 20:47

{:4_187:}

马黑黑 发表于 2022-3-29 23:02

红影发表于 2022-3-29 23:01
就是你说的i用括号有其他含义的问题吧。

不是。那个可以换其他的，是论坛自己用了大量的table标签，它对table做了很多预定义

红影发表于 2022-3-30 09:34

马黑黑发表于 2022-3-29 23:02
不是。那个可以换其他的，是论坛自己用了大量的table标签，它对table做了很多预定义

哦哦，如同埋了很多雷，编写代码的过程中还得小心避雷{:4_173:}

马黑黑 发表于 2022-3-30 12:12

红影发表于 2022-3-30 09:34
哦哦，如同埋了很多雷，编写代码的过程中还得小心避雷

踩雷是常态

红影发表于 2022-3-30 16:40

马黑黑发表于 2022-3-30 12:12
踩雷是常态

踩得多了，就炸迷糊了{:4_189:}

马黑黑 发表于 2022-3-30 18:21

红影发表于 2022-3-30 16:40
踩得多了，就炸迷糊了

{:5_147:}{:4_198:}

页: [1] 2 3

花潮论坛's Archiver

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