JS 模板字符串三种写法

最新推荐文章于 2024-03-31 09:09:33 发布

炉火纯青-旺

最新推荐文章于 2024-03-31 09:09:33 发布

阅读量7.7k

点赞数 1

分类专栏： js ES6 文章标签： JS ES6

本文链接：https://blog.csdn.net/qq_34870529/article/details/89289279

版权

js 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

ES6

31 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板字符串的使用</title>
</head>

<body>
    <script>
        const name = "wangshan";
        const age = 26;
        const sex = '男';
        const job = "webGis";

        function hello() {
            return "Hello EveryOne!";
        }

        /* ES5 第一种方法 */

        let html1 = '<ul><li>Name: ' + name +
            '</li><li>Age: ' + age +
            '</li><li>Sex: ' + sex +
            '</li><li>Job: ' + job +
            '</li></ul>';

        /* ES5 第二种方法 */

        let html2 = '<ul>' +
            '<li>Name: ' + name + '</li>' +
            '<li>Age: ' + age + '</li>' +
            '<li>Sex: ' + sex + '</li>' +
            '<li>Job: ' + job + '</li>' +
            '</ul>';

        /* ES6 模板字符串展示 */

        let html3 = `<ul><li>Name:${name}</li>
            <li>Age:${age}</li>
            <li>Sex:${sex}</li>
            <li>Job:${job}</li>
            <li>${hello()}</li>
            <li>${age > 30? 'Over 30': 'Under 30'}</li>
            </ul>`

        for (let html of [html1, html2, html3]) {
            document.body.innerHTML = html;
        }
    </script>
</body>

</html>

效果展示：

炉火纯青-旺

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
JS 模板字符串三种写法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫