JavaScript实现模板字符串【js编程题】

最新推荐文章于 2024-10-15 09:57:04 发布

web_小码农

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量144

点赞数

文章标签： javascript 前端源码

本文链接：https://blog.csdn.net/m0_53001289/article/details/123305979

版权

JavaScript实现模板字符串【js编程题】

题目描述

例子：name：{{user.name}} = name:lisi

代码实现

<!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>
    <div>
        你好{{name}}
    </div>
    <script>
        let tem = document.querySelector("div").innerHTML
        let res = /{{(\w*)}}/; // w匹配字母数字下划线
        let arr = res.exec(tem);
        let user = {
            name:"lisi"
        }
        console.log(arr); // (2) ['{{name}}', 'name', index: 11, input: '\n        你好{{name}}\n    ', groups: undefined]
        tem = tem.replace(arr[0],user[arr[1]]); //也就是将'{{name}}' 替换为 user[name]中的值
        document.querySelector("div").innerHTML = tem //直接将结果输在界面上
    </script> 
</body>
</html>