编写js代码的时候,经常会用到超长字符串的拼接。
例如,把系统时间中的年、月、日、时、分、秒共6个数字动态拼接到一个tr行,不换行的话,将是一个超长的字符串,阅读、维护都不方便。这时就需要将这个字符串适当换行。
常规方法换行这种写法就是在拼接运算符的“ ”号或者字符串后面直接换行,换行后的字符串还必须继续加上引号。
var dt = new Date();
var str = '<td>'
dt.getFullYear() '</td><td>'
(dt.getMonth() 1) '</td><td>'
dt.getDate() '</td><td>'
dt.getHours() '</td><td>'
dt.getMinutes() '</td><td>'
dt.getSeconds() '</td>';
使用反斜线换行
这种写法是每行必须以反斜线“\”结束,反斜线及换行符都不会作为字符串的内容,因而本行尾部及下一行的开始都不需要再加上引号。
var dt = new Date();
var str = '<td>' dt.getFullYear() '</td>\
<td>' (dt.getMonth() 1) '</td>\
<td>' dt.getDate() '</td>\
<td>' dt.getHours() '</td>\
<td>' dt.getMinutes() '</td>\
<td>' dt.getSeconds() '</td>';
使用数组拼接换行
这种写法是把要拼接的内容先放到数组中,然后使用数组的join方法把这些内容拼接起来。当使用jion方法时,可以指定字符串拼接时的连接符号。
var dt = new Date();
var str = '<td>' [
dt.getFullYear(),
dt.getMonth() 1,
dt.getDate(),
dt.getHours(),
dt.getMinutes(),
dt.getSeconds()].join('</td><td>') '</td>';
使用模板字符串的写法随意换行
这是ES6中的用法,模板字符串以反引号开始,再以反引号结束。当需要嵌入变量时,写入${}中即可。
var dt = new Date();
var str = `
<td>${dt.getFullYear()}</td>
<td>${dt.getMonth() 1}</td>
<td>${dt.getDate()}</td>
<td>${dt.getHours()}</td>
<td>${dt.getMinutes()}</td>
<td>${dt.getSeconds()}</td>`;
我个人更喜欢最后一种写法,因为可以随意发挥,尤其是在引用比较复杂的多行html代码的时候。您认为呢?