js编写动态字符串小技巧

2022-11-03 13:33

|

126

|

0

|

前端

|

sinye

167 字

|

3 分钟

js编写动态字符串小技巧

在我们编写需要动态改变的字符串时，需要字符串拼接变量，比如'<span>'+ul_data.a+'</span>'，数量少就没什么关系，一但数量多了，就会看到满屏的引号和加号，编写出来的代码十分不优雅。

es6之前字符串拼接：

<body>
    <div class="app">123</div>
</body>
<script>
var ul_data = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5
}
document.getElementsByClassName('app')[0].innerHTML = `
    <ul class='cs'>
        <li>`+ul_data.a+`</li>
        <li>`+ul_data.b+`</li>
        <li>`+ul_data.c+`</li>
        <li>`+ul_data.d+`</li>
        <li>`+ul_data.e+`</li>
    </ul>
`
</script>

es6新增语法之`${}`:

<body>
    <div class="app">123</div>
</body>
<script>
var ul_data = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: 5
}
document.getElementsByClassName('app')[0].innerHTML = `
    <ul class='cs'>
        <li>${ul_data.a}</li>
        <li>${ul_data.b}</li>
        <li>${ul_data.c}</li>
        <li>${ul_data.d}</li>
        <li>${ul_data.e}</li>
    </ul>
`
</script>

总结

相比之前的字符串拼接，新写法更加优雅

暂无评论

发送评论编辑评论