ES6模板语法

最新推荐文章于 2024-06-11 18:58:36 发布

咸鱼妹妹

最新推荐文章于 2024-06-11 18:58:36 发布

阅读量1.2k

点赞数 1

分类专栏： ES6

本文链接：https://blog.csdn.net/weixin_45884202/article/details/110439337

版权

ES6 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

ES6模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
</head>
<body>
    <div>
        表明：<li></li>
        内容：<li></li>
        姓名：<li></li>
    </div>
    <script>
        let list = {
            title:'我是一个列表名',
            content:'我是内容',
            name:'哈哈哈哈'
        }
        
        // es5字符串和变量进行拼接
        let ele = "<div>表明：<li>"+list.title+"</li>内容：<li>"+list.content+"</li>姓名：<li>"+list.name+"</li></div>"

        // es6的模板语法 ``
        let newEle = `
            <div>
                表明：<li>${list.title}</li>
                内容：<li>${list.content}</li>
                姓名：<li>${list.name}</li>
            </div>
        `
        /*
            ``：作为空分隔符，里面放字符串
            ${}:用来渲染变量

            模板字符串：
                 字符串中的空格和缩进都会被保留，使代码结果清晰明了;
                 ${}中不仅可以放入变量，也可以放入表达式（运算等等）
                 如果需要使用 `,只需要在前加上反斜杠\即可
        */


    </script>
</body>
</html>

咸鱼妹妹

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6模板语法

ES6模板语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板语法</title></head><body> <div&g
复制链接

扫一扫