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

最新推荐文章于 2024-05-21 20:48:27 发布

晨夕_love

最新推荐文章于 2024-05-21 20:48:27 发布

阅读量623

点赞数

分类专栏： html+css+js 文章标签：字符串拼接

html+css+js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍两种使用JavaScript拼接HTML字符串的方法。第一种方法通过连续使用+运算符进行拼接，但存在过多的符号影响可读性。第二种方法利用转义字符实现多行拼接，提高代码可读性并减少符号使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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