首页 > 网站 > WEB开发 > 正文

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

2024-04-27 15:14:58
字体:
来源:转载
供稿:网友

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

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

123456789101112var 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>';

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

123456789101112var 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经验很丰富的同事都不知道第二种方法,感叹之下发布此文。供有需者学习。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表