es6 模板字符串

最新推荐文章于 2024-12-09 14:28:00 发布

悟世君子

最新推荐文章于 2024-12-09 14:28:00 发布

阅读量433

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/wsjzzcbq/article/details/107184876

版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

1、基本用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            let str = `
                <div>
                    <h4>春游</h4>
                    <h5>陆游</h5>
                    <p>沈家园里花如锦，半是当年识放翁。</p>
                    <p>也信美人终作土，不堪幽梦太匆匆。</p>
                </div>
            `
            document.querySelector('body').innerHTML = str
        </script>
    </body>
</html>

效果见下图

2、嵌套变量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>	
            let author = '皇甫松'
            let str = `
                <div>
                    <h4>采莲子</h4>
                    <h5>${author}</h5>
                    <p>船动湖光滟滟秋，贪看年少信船流。</p>
                    <p>无端隔水抛莲子，遥被人知半日羞。</p>
                </div>
            `
            document.querySelector('body').innerHTML = str
        </script>
    </body>
</html>

效果见下图

3、嵌套对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>			
            let author = {name:'苏轼', word:'，字子瞻', no:'，号东坡居士'} 
            let str = `
                <div>
                    <h4>春宵</h4>
                    <h5>${author.name}${author.word}</h5>
                    <p>春宵一刻值千金，花有清香月有阴。</p>
                    <p>歌管楼台声细细，秋千院落夜沉沉。</p>
                </div>
            `
            document.querySelector('body').innerHTML = str
        </script>
    </body>
</html>

效果见下图

4、嵌套函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            let author = ()=> {return '王维，唐朝著名诗人、画家，字摩诘，号摩诘居士'} 
            let str = `
                <div>
                    <h4>相思</h4>
                    <h5>${author()}</h5>
                    <p>红豆生南国，春来发几枝。</p>
                    <p>愿君多采撷，此物最相思。</p>
                </div>
            `
            document.querySelector('body').innerHTML = str
        </script>
    </body>
</html>

效果见下图

5、嵌套数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>	
            let contents = ['送郎八月到扬州，长夜孤眠在画楼。', '女子拆开不成好，秋心合着却成愁。']
            let str = `
                <div>
                    <h4>吴歌</h4>
                    ${
                      contents.map(content => `<p>${content}</p>`).join('')
                    }
                </div>
            `
            document.querySelector('body').innerHTML = str
        </script>
    </body>
</html>

效果见下图