模板字面量与标签函数

<!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>
</head>
<body>
    <script>
        // 作业内容：
        // 1. 实例演示模板字面量与标签函数; 
        // 2. 实例演示解构赋值与对象字面量的简化方式
        let username = 'admin';
        // ` ` 模板字面量   
        let str = `
            <a>Hello</a>
            ${username}  
        `;
        console.log(str);
        // 标签函数
        let show = (str,...arg) => {
             console.log(arg[0]+arg[1]+arg[2])
            // return a+b+c;
        };
        let a = 10;
        let b = 20;
        let c = 70;
        show`${a} + ${b} + ${c} =`;
        // 解构赋值
        let [e,f,...g] = [10,20,30,40,50]; 
        console.log(e,f,g);
        console.log([a,b] = [b,a]) //解构实现交换，无需借助第三个变量即可实现
        // 对象解构，字面量
        let {id,name} = {id:1000,name:"小王"};
        console.log(id,name);
        let person = {
            id: "张三",
            name:"zhangsan@qq.com",
            getInfo:function(){
                return `${this.name}:(${this.email})`; 
            }
        };
        console.log(person);
         let user = {
            id,
            name,
            //可以使用箭头简写
            // getInfo(){
            //     return `${this.name}:(${this.email})`; 
            // }
            getInfo : () => `${this.name}:(${this.email})`,
        };
        console.log(user);
    </script>
</body>
</html>
模板字面量与标签函数

模板字面量与标签函数

更多相关文章

随机推荐
