ES6-ES13学习笔记（3.0）

mez_Blog

于 2023-05-31 16:48:59 发布

阅读量680

点赞数 1

分类专栏： ECMA 前端 mez_Blog的专栏文章标签： es6 es13 学习笔记 html

本文链接：https://blog.csdn.net/mez_Blog/article/details/130972044

版权

mez_Blog的专栏同时被 3 个专栏收录

119 篇文章 6 订阅

订阅专栏

前端

49 篇文章 0 订阅

订阅专栏

ECMA

6 篇文章 0 订阅

订阅专栏

ES6--模板字符串

在实际应用中，比较常用的就是ES6的模板字符串写法。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-05-31 16:20:14
 * @LastEditors: Mei
 * @LastEditTime: 2023-05-31 16:38:24
 * @FilePath: \vscode\ECMA\04\01.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>

    </ul>
    <script>

        function test(){
            return "123"
        }
        let name="mez"
        // let oli="<li><b></li>"
        let oli=`<li>
            <b>${name}</b>
            </li>`

        console.log(oli)

        let arr=["xiaoming","jige","kunkun"]
        let newlist=arr.map(function(item,index){
            return `<li class="${index===0?'active':''}">
            <b>${item}</b>${test()}
            </li>`
        })

        console.log(newlist)
        let oul=document.querySelector("ul")
        oul.innerHTML=newlist.join("")

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

比如我们想要在ul中，加上自己想要的li结构，就需要用到模板字符串写法，传统的写法换行比较麻烦，需要在每一行的最后加上反斜杠“\”，并且，如果我们使用自定义变量name时，还需要进行字符串拼接，而${...},的写法很好的完成了替换，再加上模板字符串写法，我们就可以很容易的实现自己的li节点内容。

在模板字符串中，我们同样可以用 ${...},的写法为我们的li节点加上样式，这里我们是要将li节点的第一个节点换一个背景色，实现逻辑是使用三目运算符来判断li索引，当索引值恒等于0时，我们使用active样式，否则就为空。

当然了，我们在模板字符串中还可以使用函数，我们定义了test函数，在模板字符串中继续使用${...},的写法进行调用即可：即${test()}

mez_Blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6-ES13学习笔记（3.0）

比如我们想要在ul中，加上自己想要的li结构，就需要用到模板字符串写法，传统的写法换行比较麻烦，需要在每一行的最后加上反斜杠“\”，并且，如果我们使用自定义变量name时，还需要进行字符串拼接，而${...},的写法很好的完成了替换，再加上模板字符串写法，我们就可以很容易的实现自己的li节点内容。当然了，我们在模板字符串中还可以使用函数，我们定义了test函数，在模板字符串中继续使用${...},的写法进行调用即可：即${test()}在实际应用中，比较常用的就是ES6的模板字符串写法。
复制链接

扫一扫