推广一个良好的拼接带格式字符串的方法

本文属于《Javascript基础纪要》系列

带格式是指,像普通的HTML文档一样,有缩进,有换行,有空格,这种字符串更便于阅读。大家拼innerHTML的时候,巴不得越容易阅读越好。

JS拼字符串,一般喜欢用+。如果想要很多行拼在一起,且方便阅读,一般的做法是:

1
2
3
4
5
6
7
8
9
10
11
12
var
s = '<div class="main">'
    + '<div class="left">'
    +'</div>'
    +'<div class="right">${a},{{a}}'
    +   '<ul>'
    +       '<!-- for: ${people} as ${p} -->'
    +       '<li>${p.name}</li>'
    +       '<!-- /for -->'
    +   '</ul>'
    +'</div>'
+'</div>';

这种已经算比较好了,但还是不够好。比如有太多的+号,有太多的”,这里的结构还算少的,要是再多的话,+和’也会更多。下面是更简洁的方式,也是我一直在用的:

1
2
3
4
5
6
7
8
9
10
11
12
var ss = '<!-- target:Name -->\
<div class="main">\
    <div class="left"></div>\
    <div class="right">${a},{{a}}\
        <ul>\
            <!-- for: ${people} as ${p} -->\
            <li>${p.name}</li>\
            <!-- /for -->\
        </ul>\
    </div>\
</div>\
<!-- /target -->'
;

这种方式的好处显而易见:不管字符串有多长,始终只有一对”,甚至连+都没有;效率比第1种略高。你也可以随时中断(当然,中断时就要闭合一次”),插入变量。

这种方式要注意一点,也是实现的关键:每一行的最后,都加上转义斜线\,但没有后续字符,只有个\。(如果报语法错误,你需要看是不是某一行后面加漏了\

这种方式也有缺点,就是生成的字符串要比上一种方法大,因为他里面的缩进是保留了的,而第一种方式实际上并没有缩进。但个人认为这个缺点远不足以抵消其优点,甚至有时候就需要保留空格呢。

最近见到一个JS经验很丰富的同事都不知道第二种方法,感叹之下发布此文。供有需者学习。

《推广一个良好的拼接带格式字符串的方法》有8个想法

  1. 关键是每行末尾的\,可以使文本换行而不报错;示例代码确实是我从模板里拿出来的,但这不是我要讲的

  2. 没懂,第二种方法是什么模板吗?纯前端的js不会这样写吧,是在nodejs的前端模板里面的写法吗?

发表评论

电子邮件地址不会被公开。